跳到主要内容

执行上下文

JS 代码按照顺序执行，但是 JS 引擎并不是一行一行地分析和执行程序，而是一段一段地分析执行，会先进行编译阶段然后才是执行阶段。

function foo() {
  console.log('foo1')
}

foo() // foo2

function foo() {
  console.log('foo2')
}

foo() // foo2

例如这里的函数提升.

执行上下文​

执行上下文是当前 JavaScript 代码被解析和执行时所在环境的抽象概念。

分为三种执行上下文：

  • 全局执行上下文：只有一个，浏览器中的全局对象就是 window 对象，this 指向这个全局对象。
  • 函数执行上下文：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文。
  • Eval 函数执行上下文： 指的是运行在 eval 函数中的代码，很少用而且不建议使用。

对于每个执行上下文，都有三个重要属性：

  • 变量对象(Variable object，VO)
  • 作用域链(Scope chain)
  • this

this​

  • 函数在调用时，JavaScript 会默认给 this 绑定一个值；

  • this 的绑定和调用方式以及调用的位置有关系和定义的位置（编写的位置）没有关系；

  • this 是在运行时被绑定的；

  • 独立函数调用 (默认绑定) 指向全局 window

  • 对象调用 (隐式绑定) 指向该对象 obj.b(); // 指向 obj

  • 作为 call 与 apply 调用(bind) obj.b.apply(object, []); // this 指向当前的 object

  • 作为构造函数调用(new 绑定) const b = new Fun();// this 指向当前实例对象

call​

以给定的 this 值和逐个提供的参数调用函数。

apply​

以给定的 this 值和作为数组（或类数组对象）提供的 arguments 调用该函数。

bind​

创建一个新函数，当调用该新函数时，它会调用原始函数并将其 this 关键字设置为给定的值，同时，还可以传入一系列指定的参数，这些参数会插入到调用新函数时传入的参数的前面。

Function.prototype.myCall = function (thisArg, ...args) {
  thisArg = thisArg ? new Object(thisArg) : window
  const fnc = Symbol()
  thisArg[fnc] = this
  const result = thisArg[fnc](...args)
  delete thisArg[fnc]

  return result
}

Function.prototype['MyApply'] = function (thisArg, agrs) {
  thisArg = thisArg ? new Object(thisArg) : window
  const fnc = Symbol()
  thisArg[fnc] = this

  const result = !agrs ? thisArg[fnc]() : thisArg[fnc](...agrs)
  delete thisArg[fnc]

  return result
}

Function.prototype['MyBind'] = function (thisArg, ...agrs) {
  thisArg = thisArg ? Object(thisArg) : globalThis
  const self = this

  return (...args) => self.apply(thisArg, [...agrs, ...args])
}

简单手写了一下 call、apply、bind，注意传入的 thisArg，如果传入的是 null 或者 undefined，那么就会指向全局对象。并且原始值会被转换为对象,call 和 apply 参数的区别.还有 bing 是返回一个函数.(许多边界条件没有处理)

new​

new 函数调用时，会创建一个新对象，这个新对象会继承函数的原型对象，并且 this 指向这个新对象，然后返回这个新对象。

使用 new 来调用函数，或者说发生构造函数调用时，会自动执行下面的操作。

  • 创建（或者说构造）一个新对象称之为 newInstance。
  • 这个新对象会被执行[[Prototype]]连接(newInstance 的[[Prototype]]指向 constructor 函数的 prototype 属性)。
  • 使用给定的参数执行构造函数,this 指向 newInstance。
  • 如果构造函数没有返回其他对象，则返回 newInstance 否则返回构造函数的返回值。
function myNew(constructor, ...args) {
  const that = Object.create(constructor.prototype)
  // 等同于 obj.__proto__ = newArg.prototype;
  const obj = constructor.apply(that, args)
  return obj && typeof obj === 'object' ? obj : that
}

作用域链​

当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

变量对象​

变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。

全局上下文​

全局上下文中的变量对象就是全局对象.

函数上下文​

在函数上下文中，我们用活动对象(activation object, AO)来表示变量对象。

活动对象和变量对象其实是一个东西，只是变量对象是规范上的或者说是引擎实现上的，不可在 JavaScript 环境中访问，只有到当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫 activation object 呐，而只有被激活的变量对象，也就是活动对象上的各种属性才能被访问。

活动对象是在进入函数上下文时刻被创建的，它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。

执行过程​

执行上下文的代码会分成两个阶段进行处理：分析和执行，我们也可以叫做：

  • 进入执行上下文
  • 代码执行

进入执行上下文​

当进入执行上下文时，这时候还没有执行代码，

变量对象会包括：

  • 函数的所有形参 (如果是函数上下文)

    • 由名称和对应值组成的一个变量对象的属性被创建
    • 没有实参，属性值设为 undefined

  • 函数声明

    • 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建
    • 如果变量对象已经存在相同名称的属性，则完全替换这个属性

  • 变量声明

    • 由名称和对应值（undefined）组成一个变量对象的属性被创建；
    • 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性

代码执行​

在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值

执行上下文栈（Execution context stack，ECS）​

来管理执行上下文

参考​

https://github.com/mqyqingfeng/Blog/issues/4