Javascriptグローバルオブジェクトプロパティと変数宣言の関係を深く掘り下げます

グローバルオブジェクトと変数の宣言について

今日はjs学習ビデオをレビューしました。コンストラクターについて話すとき、コンストラクターのこのポイントと、ウィンドウオブジェクトについて話す通常の関数を追加しました。

コンストラクターのthisがインスタンス化されたオブジェクトを指しているのに対し、通常の関数のthisは実際にはウィンドウオブジェクトを指していることは誰もが知っています。したがって、この状況が発生します。

function f1(){
    
    
    console.log(this);   
}
f1();     //这里调用后打印出来的会是window对象

alertなどの関数は、実際にはウィンドウグローバルオブジェクトのメンバーであり、ウィンドウは省略できます。

alert('123');
window.alert('123');   //这两个是等同的

宣言する変数は、実際にはウィンドウオブジェクトのプロパティになります。

let num = 100;
console.log(window);   
//-> 会发现window对象里会多出一个属性num,值为100

「JSのすべてがオブジェクトです」という文を考えてみてください。この種の変数宣言が実際にウィンドウオブジェクトに属性を追加していることに突然気づきましたか?2つは同等ですか?言い換えると:

**グローバルスコープwindow.numvar num同じではありませんか?****

このアイデアで、私は次のテストを行いました:

//测试直接给window添加属性,能不能向变量一样仅凭属性名就打印?
window.num = 10;
alert(num);    //-> 10
//果然,测试的结果是,num可以正常打印

//那再使用变量重新声明呢?
window.age = 18;
var age = 20;    
alert(age);   //-> 20
//果然,打印出来的是重新声明的值,这是不是意味着window.age这个属性被变量声明给“覆盖”了呢?
alert(window.age);  //-> 20
//说明确实被覆盖了

//反过来也一样
var name = 'Jack';
window.name = 'Nick';
alert(window.name);   //-> Nick
//一次性打印两个时
console.log(window.name,name);  //-> Jack Jack

//看看两者是否相等:
console.log(window.name===name);   //-> true

次に、「JavaScript AdvancedProgramming」という本を読みました。ウィンドウオブジェクトに次の箇所があります。

ウィンドウオブジェクトはECMAScriptのグローバルオブジェクトとして再利用されるため、varを介して宣言されたすべてのグローバル変数と関数がウィンドウオブジェクトのプロパティとメソッドになります。といった:

var age = 29;
var sayAge = () => alert(this.age);

alert(window.age);  // 29
sayAge();   // 29
window.sayAge();  //29

この段落もあります:

ただし、varの代わりにletまたはconstを使用しても、変数はグローバルオブジェクトに追加されません。

つまり、次のような状況が発生します。

window.age = 18;
let age = 20;    
console.log(age , window.age);   //-> 20 18   
//两个都可以正常打印,值互不干扰

const num = 10;
console.log(window.num);   //-> undefined

さらに、宣言されていない変数にアクセスするとエラーがスローされますが、ウィンドウオブジェクトで、宣言されていない可能性のある変数をクエリできます。

var newVal = oldval;  //会抛出错误,因为oldVal没有声明

var newValue = window.oldvalue;
//这里不会抛出错误,因为这里是属性查询
//newValue会被设置成undefined

おすすめ

転載: blog.csdn.net/Lu_xiuyuan/article/details/112987642