一. JS程序运行过程发生了什么
参考(储备知识):
内存空间详细图解
执行上下文详解
变量对象详解
作用域与作用域链
闭包
《JavaScript设计模式与开发实践》(曾探 著)
以下面这段代码为例:
var name = "window";
var p = {
name: 'Perter',
getName: function () {
// 利用变量保存的方式保证其访问的是p对象
var self = this;
return function () {
return self.name;
}
}
}
var getName = p.getName();
var _name = getName();
console.log(_name);
代码执行到最后结果要经历两个阶段
上下文创建 ——> 上下文执行
1. 上下文创建
- 变量对象创建
argument属性值是指函数参数,函数属性指函数地址,变量属性值设为undefined
在这段代码中,变量对象VO(Variable Object)如下:
//全局EC中变量对象
windowEC = {
VO: window
}
//getNameEC中变量对象
getNameEC = {
VO: {
arguments: {……},
getName: <refernce address>,
getName: undefined
}
}
//匿名函数EC(赋给getName)中变量对象
anonymousEC = {
VO: {
arguments: {……},
anonymous: <refernce address>,
anonymous: undefined
}
}
- 作用域链建立
//全局EC中变量对象
windowEC = {
VO: window
scopeChain: [window]
}
//getNameEC中变量对象
getNameEC = {
VO: {
arguments: {……},
getName: <refernce address>,
getName: undefined
},
scopeChain: [VO(getNameEC) Window]
}
//匿名函数EC(赋给getName)中变量对象
anonymousEC= {
VO: {
arguments: {……},
anonymous: <refernce address>,
anonymous: undefined
}
scopeChain: [VO(anonymousEC) VO(getNameEC) window]
}
- this指向确定
//全局EC中变量对象
windowEC = {
VO: window
scopeChain: [window],
this: window
}
//getNameEC中变量对象
getNameEC = {
VO: {
arguments: {……},
getName: <refernce address>,
getName: undefined
},
scopeChain: [VO(getNameEC) window],
this: p
}
//匿名函数EC(赋给getName)中变量对象
anonymousEC= {
VO: {
arguments: {……},
anonymous: <refernce address>,
anonymous: undefined
}
scopeChain: [VO(anonymousEC) VO(getNameEC) window],
this: window
}
2. 代码执行阶段
这是调用阶段的执行上下文变化过程,EC:执行上下文
Chrome浏览器调试验证
通过闭包访问getName作用域中的变量self