执行上下文

当执行 JS 代码时，会产生三种执行上下文

  • 全局执行上下文
  • 函数执行上下文
  • eval 执行上下文

每个执行上下文中都有三个重要的属性

  • 变量对象（VO），包含变量、函数声明和函数的形参，该属性只能在全局上下文中访问
  • 作用域链（JS 采用词法作用域，也就是说变量的作用域是在定义时就决定了）
  • this
  1. var a = 10
  2. function foo(i) {
  3.   var b = 20
  4. }
  5. foo()

对于上述代码，执行栈中有两个上下文：全局上下文和函数 foo 上下文。

  1. stack = [
  2.     globalContext,
  3.     fooContext
  4. ]

对于全局上下文来说，VO 大概是这样的

  1. globalContext.VO === globe
  2. globalContext.VO = {
  3.     a: undefined,
  4.     foo: <Function>,
  5. }

对于函数 foo 来说，VO 不能访问，只能访问到活动对象（AO）

  1. fooContext.VO === foo.AO
  2. fooContext.AO {
  3.     i: undefined,
  4.     b: undefined,
  5.     arguments: <>
  6. }
  7. // arguments 是函数独有的对象(箭头函数没有)
  8. // 该对象是一个伪数组，有 `length` 属性且可以通过下标访问元素
  9. // 该对象中的 `callee` 属性代表函数本身
  10. // `caller` 属性代表函数的调用者

对于作用域链，可以把它理解成包含自身变量对象和上级变量对象的列表，通过 [[Scope]] 属性查找上级变量

  1. fooContext.[[Scope]] = [
  2.     globalContext.VO
  3. ]
  4. fooContext.Scope = fooContext.[[Scope]] + fooContext.VO
  5. fooContext.Scope = [
  6.     fooContext.VO,
  7.     globalContext.VO
  8. ]

接下来让我们看一个老生常谈的例子，var

  1. b() // call b
  2. console.log(a) // undefined
  4. var a = 'Hello world'
  6. function b() {
  7.     console.log('call b')
  8. }

想必以上的输出大家肯定都已经明白了，这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行上下文时，会有两个阶段。第一个阶段是创建的阶段（具体步骤是创建 VO），JS 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 undefined，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用。

在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升

  1. b() // call b second
  3. function b() {
  4.     console.log('call b fist')
  5. }
  6. function b() {
  7.     console.log('call b second')
  8. }
  9. var b = 'Hello world'

var 会产生很多错误，所以在 ES6中引入了 let。let 不能在声明前使用，但是这并不是常说的 let 不会提升，let 提升了声明但没有赋值，因为临时死区导致了并不能在声明前使用。

对于非匿名的立即执行函数需要注意以下一点

  1. var foo = 1
  2. (function foo() {
  3.     foo = 10
  4.     console.log(foo)
  5. }()) // -> ƒ foo() { foo = 10 ; console.log(foo) }

因为当 JS 解释器在遇到非匿名的立即执行函数时，会创建一个辅助的特定对象，然后将函数名称作为这个对象的属性，因此函数内部才可以访问到 foo，但是这个值又是只读的，所以对它的赋值并不生效，所以打印的结果还是这个函数，并且外部的值也没有发生更改。

  1. specialObject = {};
  3. Scope = specialObject + Scope;
  5. foo = new FunctionExpression;
  6. foo.[[Scope]] = Scope;
  7. specialObject.foo = foo; // {DontDelete}, {ReadOnly}
  9. delete Scope[0]; // remove specialObject from the front of scope chain