变量对象是与执⾏上下⽂相关的数据作⽤域,存储了在上下⽂中定义的变量和函数声明。
因为不同执⾏上下⽂下的变量对象稍有不同,所以我们来聊聊全局上下⽂下的变量对象和函数上下⽂的变量对象。
1. 全局上下⽂
-
全局对象是预定义的对象,作为 JavaScript 的全局函数和全局属性的占位符。通过使⽤全局对象, 可以访问所有其他所有预定义的对象、函数和属性。
-
在顶层 JavaScript 代码中,可以⽤关键字 this 引⽤全局对象。因为全局对象是作⽤域链的头,这意味着所有⾮限定性的变量和函数名都会作为该对象的属性来查询。
-
例如,当JavaScript 代码引⽤ parseInt() 函数时,它引⽤的是全局对象的 parseInt 属性。全局对象是作⽤域链的头,还意味着在顶层 JavaScript 代码中声明的所有变量都将成为全局对象的属性。
简单点说:
1.可以通过 this 引⽤,在客户端 JavaScript 中,全局对象就是 Window 对象。
console.log(this);
- 全局对象是由 Object 构造函数实例化的⼀个对象。
console.log(this instanceof Object);
- 预定义的属性是否可⽤
console.log(Math.random());
console.log(this.Math.random());
- 作为全局变量的宿主
var a = 1;
console.log(this.a);
- 客户端 JavaScript 中,全局对象有 window 属性指向⾃身
var a = 1;
console.log(window.a);
this.window.b = 2;
console.log(this.b);
综上,对JS⽽⾔,全局上下⽂中的变量对象就是全局对象。
2. 函数上下⽂
在函数上下⽂中,我们⽤活动对象( activation object , AO)来表示变量对象。
活动对象和变量对象其实是⼀个东⻄,只是变量对象是规范上的或者说是引擎实现上的,不可在JavaScript 环境中访问,只有到当进⼊⼀个执⾏上下⽂中,这个执⾏上下⽂的变量对象才会被激活,所以才叫 activation object,⽽只有被激活的变量对象,也就是活动对象上的各种属性才能被访问。活动对象是在进⼊函数上下⽂时刻被创建的,它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。
3. 执⾏过程
执⾏上下⽂的代码会分成两个阶段进⾏处理:分析和执⾏,我们也可以叫做:
- 进⼊执⾏上下⽂;
- 代码执⾏;
3.1. 进⼊执⾏上下⽂
当进⼊执⾏上下⽂时,这时候还没有执⾏代码,变量对象会包括:
- 函数的所有形参 (如果是函数上下⽂)
- 由名称和对应值组成的⼀个变量对象的属性被创建;
- 没有实参,属性值设为 undefined;
- 函数声明
- 由名称和对应值(函数对象(function-object))组成⼀个变量对象的属性被创建;
- 如果变量对象已经存在相同名称的属性,则完全替换这个属性;
- 变量声明
- 由名称和对应值(undefined)组成⼀个变量对象的属性被创建;
- 如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会⼲扰已经存在的这类属性;
举个例⼦:
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
}
3.2. 代码执⾏
在代码执⾏阶段,会顺序执⾏代码,根据代码,修改变量对象的值
还是上⾯的例⼦,当代码执⾏完后,这时候的 AO 是:
AO = {
arguments: {
0: 1,
length: 1
},
a: 1,
b: 3,
c: reference to function c(){},
d: reference to FunctionExpression "d"
}
到这⾥变量对象的创建过程就介绍完了,让我们简洁的总结我们上述所说:
全局上下⽂的变量对象初始化是全局对象;函数上下⽂的变量对象初始化只包括Arguments对象;- 在
进⼊执⾏上下⽂时会给变量对象添加形参、函数声明、变量声明等初始的属性值; - 在代码执⾏阶段,会再次修改
变量对象的属性值;
3.3. 思考题
例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;//在后续执行中,foo变量被赋值为1,因此后续对foo的引用会是1
会打印函数,⽽不是 undefined 。
这是因为在进⼊执⾏上下⽂时,⾸先会处理函数声明,其次会处理变量声明,这叫做函数声明提升,如果变量名称跟已经声明的形式参数或函数相同,则变量声明不会⼲扰已经存在的这类属性。