JavaScript 내부 전원의 변수 객체
목차
(무료 학습 추천: javascript 비디오 튜토리얼)
Preface
JavaScript를 프로그래밍할 때 시스템을 성공적으로 구축하기 위해서는 항상 함수와 변수를 선언하는 것이 불가피하지만, 인터프리터는 어디서 어떻게 작동하나요? 이러한 함수와 변수는 어디서 찾을 수 있나요? 이러한 객체를 참조하면 정확히 어떤 일이 발생합니까?
이전 글 "JavaScript의 실행 컨텍스트"에서 그 일부를 언급했습니다. JavaScript 코드가 실행 가능한 코드 조각을 실행하면 해당 실행 컨텍스트(실행 컨텍스트)가 생성됩니다.
각 실행 컨텍스트에는 세 가지 중요한 속성이 있습니다.
1. 변수 객체
함수 컨텍스트에서, 우리는 변수 객체를 표현하기 위해 활성화 객체(AO)를 사용합니다.
활성 개체와 변수 개체는 실제로 동일합니다:
여기에 둘 사이의 관계에 대한 Daphne의 답변이 첨부되어 있습니다.
코드를 사용하여 변수 개체의 생성 과정을 시뮬레이션할 수 있습니다.
1 일반 개체를 사용하여 변수 개체를 나타냅니다.
var VO = {}; // 变量对象
2. 변수 개체는 실행 컨텍스트의 속성입니다:
activeContext = { VO: { // 上下文数据(var, FD, function arguments) }};
3. 다음 코드를 만나면:
var a = 10;function func(x){ var b = 20;}func(30);
4. 해당 변수 개체는 다음과 같아야 합니다.
// 全局变量对象VO(Global) = { a: 10, func: reference to function plus(){}}// func函数上下文的变量对象VO(func functionContext) = { x: 30, b: 20};
다른 실행 컨텍스트에서 변수 개체가 약간 다르기 때문입니다. 차이점이 있으므로 별도로 이야기해 보겠습니다.
2. 전역 변수 객체
먼저 전역 객체라는 개념을 이해해 봅시다. W3School에도 도입되었습니다.
전역 개체는 JavaScript 전역 함수 및 전역 속성에 대한 자리 표시자 역할을 하는 미리 정의된 개체입니다. 전역 개체를 사용하면 미리 정의된 다른 모든 개체, 함수 및 속성에 액세스할 수 있습니다.
1. 이를 통해 참조할 수 있습니다. 클라이언트 측 JavaScript에서는 전역 객체가 Window 객체입니다.
console.log(this); //Window
2. 전역 개체는 개체 생성자에 의해 인스턴스화되는 개체입니다.
console.log(this instanceof Object); // true
3. 다양한 기능과 속성이 미리 정의되어 있습니다.
// 都能生效console.log(Math.random()); //随机数console.log(this.Math.random()); //随机数
4. 전역 변수의 호스트(매우 훌륭함)
var a = 1;console.log(this.a);// 1
5. 클라이언트 측 JavaScript에서 전역 개체는 자신을 가리키는 창 속성을 갖습니다.
var a = 1;console.log(window.a); // 1this.window.b = 2;console.log(this.b); // 2
그리고 전역 컨텍스트의 변수 개체
는 전역 개체입니다! 变量对象
就是全局对象!
三、函数上下文中的变量对象
在函数执行上下文中,VO是不能直接访问的,此时由活动对象
(activation object,缩写为AO)扮演VO
3. object in the context
활성화 개체
(활성화 개체, 약어로 AO)가 VO 역할.
VO(functionContext) === AO
AO = { arguments: <argo>}</argo>
length — 매개 변수 수 실제로 전달된
properties-indexes 내부의 요소 수는args.length와 동일합니다.properties-indexes의 값은 실제로 전달된 매개 변수와 공유됩니다.
function foo(x, y, z) { // 声明的函数参数数量arguments (x, y, z) alert(foo.length); // 3 // 真正传进来的参数个数(only x, y) alert(arguments.length); // 2 // 参数的callee是函数自身 alert(arguments.callee === foo); // true // 参数共享 alert(x === arguments[0]); // true alert(x); // 10 arguments[0] = 20; alert(x); // 20 x = 30; alert(arguments[0]); // 30 // 不过,没有传进来的参数z,和参数的第3个索引值是不共享的 z = 40; alert(arguments[2]); // undefined arguments[2] = 50; alert(z); // 40 } foo(10, 20);
실행 컨텍스트 입력
코드 실행
函数声明
变量声明
举个例子:
function foo(a) { var b = 2; function c() {} var d = function() {}; b = 3;}foo(1);
在进入执行上下文后,这时候的 AO 是:
AO = { arguments: { 0: 1, length: 1 }, a: 1, b: undefined, c: reference to function c(){}, d: undefined}
在代码执行阶段,会顺序执行代码,根据代码,修改变量对象的值
还是上面的例子,当代码执行完后,这时候的 AO 是:
AO = { arguments: { 0: 1, length: 1 }, a: 1, b: 3, c: reference to function c(){}, d: reference to FunctionExpression "d"}
到这里变量对象的创建过程就介绍完了,让我们简洁的总结我们上述所说:
思考题
最后让我们看几个例子:
1.第一题
function foo() { console.log(a); a = 1;}foo(); // ???function bar() { a = 1; console.log(a);}bar(); // ???
第一段会报错:Uncaught ReferenceError: a is not defined
。
第二段会打印:1
。
这是因为函数中的 “a” 并没有通过 var 关键字声明,所有不会被存放在 AO 中。
第一段执行 console 的时候, AO 的值是:
AO = { arguments: { length: 0 }}
没有 a 的值,然后就会到全局去找,全局也没有,所以会报错。
当第二段执行 console 的时候,全局对象已经被赋予了 a 属性,这时候就可以从全局找到 a 的值,所以会打印 1。
2.第二题
console.log(foo);function foo(){ console.log("foo");}var foo = 1;
会打印函数,而不是 undefined 。
这是因为在进入执行上下文时,首先会处理函数声明,其次会处理变量声明,如果如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会干扰已经存在的这类属性。
相关免费学习推荐:javascript(视频)
위 내용은 미니멀리스트 JavaScript의 변수 객체의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!