通过ECMA262理解this

July 26, 2024December 29, 2024

ecma262

Read this first if you are new to ECMA262

调用函数

从解释器实现角度看，运行时调用一个函数的本质是执行以下抽象操作：

Call(F, V [,argumentsList])：

F 为函数对象，V 为 this 值
此操作调用 F 的 [[Call]] 方法

可以发现：除了要提供参数列表，还需要提供 this 参数

[[Call]](thisArgument, argumentsList)

该抽象操作内部又委托 OrdinaryCallBindThis(F, calleeContext, thisArgument) 抽象操作，来指定当前执行环境的 this 值
此操作主要是根据函数的 [[ThisMode]] 内部槽来决定如何绑定 this。分为严格模式、非严格模式和箭头函数情况
（简单来说，绑定 this 即设置当前 Function Environment Record 的 [[ThisValue]]）
据此可知，传入的 thisArgument 不一定就是最终的 this 值，详细见下面箭头函数和严格模式一节

最后通过 OrdinaryCallEvaluateBody(F, argumentsList) 抽象操作来执行代码（委托 EvaluateCall 抽象操作）
当执行函数体时，this 只不过是一个关键字，解释器对其求值即调用 ? ResolveThisBinding() 抽象操作
该抽象操作会在上层 Environment Record 中寻找已保存的 this 值（规范术语 this binding），详细参见补充一节

那么上述抽象操作中的 this 是怎么得来的？关键在于最后的 EvaluateCall(func, ref, arguments, tailPosition) 抽象操作。

首先看看该抽象操作最初是如何被调用的，从语法解析完毕开始，即我们执行一个 CallExpression : CallExpression Arguments 表达式：

令 ref 为 ? 对 CallExpression 的求值结果。
令 func 为 ? GetValue(ref)。
令 thisCall 为当前的 CallExpression。
令 tailCall 为 IsInTailPosition(thisCall)。
返回 ? EvaluateCall(func, ref, Arguments, tailCall)。

现在执行 EvaluateCall 抽象操作：

若 ref 为 Reference Record, 则
1. 若 IsPropertyReference(ref) 是 true, 则
  1. 令 thisValue 为 GetThisValue(ref).
2. 否则,
  1. 令 refEnv 为 ref.[[Base]].
  2. 断言: refEnv 是 Environment Record.
  3. 令 thisValue 为 refEnv.WithBaseObject().
否则,
1. 令 thisValue 为 undefined.
令 argList 为 ? ArgumentListEvaluation of arguments.
若 func 不是 Object, 抛出 TypeError 异常.
若 IsCallable(func) 是 false, 抛出 TypeError 异常.
若 tailPosition 是 true, 执行 PrepareForTailCall().
返回 ? Call(func, thisValue, argList).

结合上面的信息，可知（我们忽略 with 表达式的情况）：

如果执行 CallExpression 得到 Reference Record 且它还是 PropertyReference（即其 [[Base]] 是 Environment Record），在此情况下：若它是 SuperReference（即含 [[ThisValue]]）则返回它的 [[ThisValue]]，否则返回它的 [[Base]]

这里，核心问题在于 ref 是不是一个 Reference Record：
因为如果 ref 不是 Reference Record，那么 thisValue 就会是 undefined
事实是 ref 既可以是包含了函数的 Reference Record，也可以是直接是函数本身

例如，在下面的示例中，obj.fn 是包含了函数的 Reference Record，而 (true && obj.fn) （求值后）是函数本身：

var fn = function () {
    // "use strict";
    return `this is ${this}`;
};
var fn2 = () => `this is ${this}`;

var obj = { fn, fn2 };

fn(); // this is [object global]
obj.fn(); // this is [object Object]
obj.fn2(); // this is [object global]
(true && obj.fn)(); // this is [object global]
(false || obj.fn)(); // this is [object global]

箭头函数和严格模式

箭头函数时，解释器算法传入 thisValue 也和普通情况别无二致，也就是说这时是不区分是否是箭头函数的。
但我们知道，箭头函数的内部槽 [[ThisMode]] 与其它函数不一样：它是 LEXICAL，表示 this 引用词法上包围的函数的 this 值。

还记得上面提到的 OrdinaryCallBindThis(F, calleeContext, thisArgument) 抽象操作吗？
这个操作非常重要：正是它最终为 Function Environment Record 绑定 thisValue（调用 BindThisValue(thisValue)）。

箭头函数的 [[ThisMode]] 是 LEXICAL，此时 OrdinaryCallBindThis 抽象操作中不会为其（指这个箭头函数的 Function Environment Record）绑定 this。
这就是为什么规范称箭头函数的 Function Environment Record 不会绑定 this。
因此在 GetThisEnvironment() 抽象操作中，会向上层 Environment Record 寻找，直至找到 this （规范术语 this binding）。

Tip

因为在此抽象操作中，必然会跳过当前 Function Environment Record，因此即使调用 Function.prototype.bind 来绑定当前 Function Environment Record 的 this 也是没有意义的
这就是为什么对箭头函数调用 .bind() 没有效果

非严格模式下，函数的 [[ThisMode]] 是 GLOBAL，这时如果 thisArgument 是 undefined 或 null，
thisValue 就为 globalEnv.[[GlobalThisValue]]。

Warning

最顶层 EnvironmentRecord 分两种情况：模块环境（ModuleEnvironmentRecord）和非模块环境（GlobalEnvironmentRecord）（注：模块总是严格模式）
GlobalEnvironmentRecord.GetThisBinding(): 返回当前 [[GlobalThisValue]] 内部槽 GlobalEnvironmentRecord.[[GlobalThisValue]] : The value returned by this in global scope. Hosts may provide any ECMAScript Object value.
ModuleEnvironmentRecord.GetThisBinding(): 返回 undefined

根据规范，非模块环境的 [[GlobalThisValue]] 值由实现定义
在浏览器中，它是 window；在 Node.js 中，它指向 module.exports 的初始值，而不是 global
注意这与 globalThis 的机制不同

Node.js 注意：cjs 模块代码本质是运行在一个包装函数内，其 this 被指定为 cjsModuleInstance 并通过 runScriptInThisContext 运行

node/lib/internal/modules/cjs/loader.js

let wrap = function (script) {
    return Module.wrapper[0] + script + Module.wrapper[1];
};

const wrapper = ["(function (exports, require, module, __filename, __dirname) { ", "\n});"];

Node.js 模块细节不在本文探讨范围内，见https://yieldray.fun/posts/nodejs-modules

示例：
创建两个文件，test.cjs 和 test.mjs，内容均为 "use strict"; console.log(this)
执行 node test.cjs，结果为 {}
执行 node test.mjs，结果为 undefined
创建 index.html，内容为 <script src="./test.cjs"></script><script src="./test.mjs" type="module"></script>
打开 index.html，结果为 window 和 undefined

严格模式下，函数的 [[ThisMode]] 是 STRICT，这时不会因为 thisArgument 是 undefined 或 null 而做特殊处理，
即 thisArgument 就是 CallExpression 那一步得到的 thisCall，否则就是 undefined 了。

apply call bind

现在我们来看，Function.prototype.apply 和 Function.prototype.call 就非常简单了：
这两个函数都接受 thisArg，这个参数传递给 Call(func, thisArg, argList)，最终被设置为 Function Environment Record 的 [[ThisValue]] 内部槽。

比较特殊的是 Function.prototype.bind(thisArg, ...args)：
它委托 BoundFunctionCreate(targetFunction, boundThis, boundArgs) 抽象操作，
我们可以简单理解为该抽象操作将 [[BoundThis]] 内部槽设为 boundThis，将 [[BoundArguments]] 内部槽设为 boundArgs。

其实就是创建了一个 Bound Function Exotic Objects，它是一个特殊的 Function Objects。
这个 Bound Function Exotic Objects 的 [[Call]] 内部方法的 this 必定是它 [[BoundThis]] 内部槽的值，因此也就实现了绑定的效果。

Note

简单来说：bound function exotic object，包装了 function object，并覆写了 [[Call]] 内部方法

new

当使用 new 调用构造函数时，解释器调用 [[Construct]] 内部方法而非 [[Call]] 内部方法。
（这里省略 [[ConstructorKind]] 为 derived，也就是构造函数是派生构造函数的情况，不过过程也是类似的）

OrdinaryCallBindThis 绑定 this 的值就是 ? OrdinaryCreateFromConstructor(newTarget, "%Object.prototype%") 的返回值，注意这里的 newTarget 就是指构造函数本身。

也就是说 this 就是新创建的一个对象，对象的 [[Prototype]] 为构造函数的 prototype 属性。

前置知识

首先了解普通对象的必要内部方法

内部方法	签名	描述
`[[GetPrototypeOf]]`	( ) → Object \| Null	确定提供此对象继承属性的对象。null值表示没有继承属性。
`[[SetPrototypeOf]]`	(Object \| Null) → Boolean	将此对象与提供继承属性的另一个对象关联。传递null表示没有继承属性。返回true表示操作成功完成，返回false表示操作未成功。
`[[IsExtensible]]`	( ) → Boolean	确定是否允许向此对象添加其它属性。
`[[PreventExtensions]]`	( ) → Boolean	控制是否可以向此对象添加新属性。返回true表示操作成功，返回false表示操作未成功。
`[[GetOwnProperty]]`	(`propertyKey`) → Undefined \| Property Descriptor	返回此对象自有属性的属性描述符，其键为`propertyKey`，如果不存在此类属性，则返回undefined。
`[[DefineOwnProperty]]`	(`propertyKey`, `PropertyDescriptor`) → Boolean	创建或更改自有属性，其键为`propertyKey`，使其具有`PropertyDescriptor`描述的状态。如果该属性成功创建/更新，则返回true；如果无法创建或更新该属性，则返回false。
`[[HasProperty]]`	(`propertyKey`) → Boolean	返回一个布尔值，指示此对象是否已经具有键为`propertyKey`的自有或继承属性。
`[[Get]]`	(`propertyKey`, `Receiver`) → any	返回此对象中键为`propertyKey`的属性值。如果需要执行任何ECMAScript代码来获取属性值，则在评估代码时使用`Receiver`作为this值。
`[[Set]]`	(`propertyKey`, `value`, `Receiver`) → Boolean	将键为`propertyKey`的属性值设置为`value`。如果需要执行任何ECMAScript代码来设置属性值，则在评估代码时使用`Receiver`作为this值。如果属性值已设置，则返回true；如果无法设置，则返回false。
`[[Delete]]`	(`propertyKey`) → Boolean	从此对象中删除键为`propertyKey`的自有属性。如果属性未删除且仍然存在，则返回false。如果属性已删除或不存在，则返回true。
`[[OwnPropertyKeys]]`	( ) → List of property keys	返回一个列表，其元素是此对象的所有自有属性键。

interface ProxyHandler<T extends object> {
    apply?(target: T, thisArg: any, argArray: any[]): any;
    construct?(target: T, argArray: any[], newTarget: Function): object;
    defineProperty?(target: T, property: string | symbol, attributes: PropertyDescriptor): boolean;
    deleteProperty?(target: T, p: string | symbol): boolean;
    get?(target: T, p: string | symbol, receiver: any): any;
    getOwnPropertyDescriptor?(target: T, p: string | symbol): PropertyDescriptor | undefined;
    getPrototypeOf?(target: T): object | null;
    has?(target: T, p: string | symbol): boolean;
    isExtensible?(target: T): boolean;
    ownKeys?(target: T): ArrayLike<string | symbol>;
    preventExtensions?(target: T): boolean;
    set?(target: T, p: string | symbol, newValue: any, receiver: any): boolean;
    setPrototypeOf?(target: T, v: object | null): boolean;
}

ECMAScript 函数对象封装了带参数的 ECMAScript 代码，这些代码在词法环境中闭合，并支持动态求值。
ECMAScript 函数对象是普通对象，具有与其它普通对象相同的内部槽和内部方法。
ECMAScript函数对象的代码可以是严格模式代码或非严格模式代码。
代码为严格模式的 ECMAScript 函数对象称为严格函数，代码为非严格模式的则称为非严格函数。

除了 [[Extensible]] 和 [[Prototype]]，ECMAScript函数对象还拥有表中列出的内部槽。

内部槽	类型	描述
`[[Environment]]`	an Environment Record	函数闭合时的环境记录。在求值函数代码时用作外部环境。
`[[PrivateEnvironment]]`	a PrivateEnvironment Record or null	函数闭合时的私有环境记录。如果该函数在语法上不包含在类中，则为null。在求值函数代码时，用作内部类的外部私有环境。
`[[FormalParameters]]`	a Parse Node	定义函数形式参数列表的源文本的根解析节点。
`[[ECMAScriptCode]]`	a Parse Node	定义函数主体的源文本的根解析节点。
`[[ConstructorKind]]`	base or derived	函数是否为派生类构造函数。
`[[Realm]]`	a Realm Record	创建函数的 Realm，并在求值函数时提供任何访问的内在对象。
`[[ScriptOrModule]]`	a Script Record or a Module Record	创建函数的脚本或模块。
`[[ThisMode]]`	lexical, strict, or global	定义在函数的形式参数和代码主体中如何解释`this`引用。lexical意味着`this`引用词法上包围的函数的this值。strict意味着this值完全按照函数调用时提供的值使用。global意味着undefined或null的this值被解释为全局对象的引用，其它this值首先传递给ToObject。
`[[Strict]]`	a Boolean	如果这是一个严格函数，则为true；如果这是一个非严格函数，则为false。
`[[HomeObject]]`	an Object	如果函数使用`super`，这是一个对象，其`[[GetPrototypeOf]]`提供了`super`属性查找开始的对象。
`[[SourceText]]`	a sequence of Unicode code points	定义函数的源文本。
`[[Fields]]`	a List of ClassFieldDefinition Records	如果函数是一个类，这是一个表示类的非静态字段及其相应初始化器的记录列表。
`[[PrivateMethods]]`	a List of PrivateElements	如果函数是一个类，这是一个表示类的非静态私有方法和访问器的列表。
`[[ClassFieldInitializerName]]`	a String, a Symbol, a Private Name, or empty	如果函数是作为类字段的初始化器创建的，用于字段命名求值的名称；否则为空。
`[[IsClassConstructor]]`	a Boolean	指示函数是否为类构造函数。（如果为true，调用函数的`[[Call]]`将立即抛出TypeError异常。）

补充

Environment Record

函数环境记录（Function Environment Record）是一种声明性环境记录，用于表示函数的顶级作用域。
如果该函数不是箭头函数，还提供一个 this 绑定。
如果一个函数不是箭头函数并引用了 super，其函数环境记录还包含在函数内部执行 super 方法调用所需的状态。

执行上下文

一个 agent 由一组 ECMAScript 执行上下文、一个执行上下文栈、一个正在运行的执行上下文、一个 Agent Record 以及一个执行线程组成。除执行线程外，agent 的各个组成部分是该 agent 独有的。

agent 的执行线程在该agent的执行上下文中独立执行算法步骤，不受其它 agent 的影响，除非一个执行线程被多个 agent 共享，且这些 agent 的 Agent Record 中的 [[CanBlock]] 字段均为false。

执行上下文是一种规范装置，用于跟踪 ECMAScript 实现对代码的运行时执行。
在任何时间点，每个 agent 最多只有一个实际执行代码的执行上下文，这被称为 agent 的运行执行上下文。

执行上下文栈用于跟踪执行上下文。运行执行上下文始终是此栈的顶部元素。
每当控制从当前运行执行上下文关联的可执行代码转移到与该执行上下文无关的可执行代码时，便会创建一个新的执行上下文。
新创建的执行上下文会被推入栈顶并成为运行执行上下文。

执行上下文包含跟踪其关联代码执行进度所需的任何特定于实现的状态。

在执行之前，所有的 ECMAScript 代码都必须与一个 Realm 相关联。
Realm 包含一个 Global Environment Record。

TypeScript

const $ = document.querySelector;
$("#foo"); // TypeError: Illegal invocation

function mustHaveRightThis(this: HTMLElement) {
    return this.remove();
}

// The 'this' context of type 'void' is not assignable to method's 'this' of type 'HTMLElement'
mustHaveRightThis();

const rightThis: ThisType<Console> = {
    callback: function () {
        this.log(666);
        this.foo; // Property 'foo' does not exist on type 'Console'.
    },
};

规范总结

排除几种特殊情况

[[ThisMode]] 为 LEXCIAL，即箭头函数：此时会向上层 Environment Record 寻找 this binding
Function.prototype.bind：会创建 Bound Function Exotic Objects
Function.prototype.{call,apply}：会跳过 EvaluateCall 操作来绑定 this 并调用函数

普通情况

使用 new，即构造函数：会调用 [[Construct]] 而不是 [[Call]]，此时 this 是新创建的对象
直接通过括号运算符调用：语法解析后执行 EvaluateCall，括号前面的表达式解析结果如果是 PropertyReference 则 this 被设置为函数所在的对象；否则表达式解析结果就是 ECMA262 语言值，而不是规范值，此时 this 设置为 undefined

是否严格模式