JS进阶一

一. 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

写下这些是希望交流一下波哥前端进阶文章的学习心得，有不同见解之处欢迎留言讨论~