자바 스크립트 전역 객체 속성과 변수 선언 간의 관계에 대해 자세히 알아보기

전역 개체 및 변수 선언 정보

오늘은 js 학습 영상을 살펴 보았는데 생성자에 대해 이야기 할 때 생성자의 this point와 window 객체에 대해 이야기하는 일반 함수를 추가했습니다.

우리 모두는 생성자의 this가 인스턴스화 된 객체를 가리키는 반면 일반 함수의 this는 실제로 창 객체를 가리킨다는 것을 알고 있습니다. 따라서 다음과 같은 상황이 발생합니다.

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

경고와 같은 함수는 실제로 창 전역 개체의 구성원이며 창을 생략 할 수 있습니다.

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

우리가 선언 한 변수는 실제로 window 객체의 속성이됩니다.

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

"JS의 모든 것은 객체입니다"라는 문장을 생각해보십시오. 이런 종류의 변수 선언이 실제로 창 개체에 속성을 추가한다는 것이 갑자기 나에게 나타 났습니까? 두 가지가 동등합니까? 다시 말해:

** 전역 범위 window.num와 var 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 Advanced Programming"이라는 책을 읽었습니다. 창 개체에 다음과 같은 구절이 있습니다.

윈도우 객체는 ECMAScript의 Global 객체로 재사용되기 때문에 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