Function.prototype.{apply,call,bind} 是无法正确polyfill的

November 23, 2024

我们以 Function.prototype.call 为例，因为它的步骤最简单。

一个典型的 Function.prototype.call 的 polyfill 实现可以是如下：

function functionPrototypeCall(func: (...args: any[]) => any, thisArg: any, ...args: any[]) {
    // 计算出上下文对象
    const thisValue = ordinaryCallGetThis(thisArg);
    // 将函数设置为上下文对象的方法并调用
    return withTempKeyOf(thisValue, (thisValue, key) => thisValue[key](...args), func);
}

function ordinaryCallGetThis(thisArg: any) {
    if (thisArg === null || thisArg === undefined) {
        return globalThis;
    } else {
        return thisArg;
    }
}

function withTempKeyOf<R>(obj: any, cb: (thisValue: any, key: PropertyKey) => R, value?: any): R {
    const UNIQUE_KEY = Symbol();
    const thisValue = Object(obj);
    Object.defineProperty(thisValue, UNIQUE_KEY, { enumerable: false, value, configurable: true });
    const result = cb(thisValue, UNIQUE_KEY);
    delete thisValue[UNIQUE_KEY];
    return result;
}

问题在于， ordinaryCallGetThis 和 withTempKeyOf 函数的实现都不完美。

`withTempKeyOf`

withTempKeyOf 函数的目的是正确调用 Call(func, thisValue, argList)。
当执行 withTempKeyOf(thisValue, (thisValue, key) => thisValue[key](...args), func) 时，Call 抽象操作的所有参数都被正确传入了。

通过设置临时 Symbol 键，并使之不可枚举，已经将该临时键的其可见性降低到最小。
不过不可枚举当然不意味着无法列出，显然，Reflect.ownKeys 就会受影响。

`ordinaryCallGetThis`

该 polyfill 的最大 miss 就是 ordinaryCallGetThis 的实现，即使它看起来很简单。

可以看出，当 thisArg 为 null 或 undefined 时，它返回 globalThis；否则原样返回。

这一步部分模拟了 OrdinaryCallBindThis(F, calleeContext, thisArgument) 抽象操作。
当函数 F 是非严格模式下才是此行为；对于严格函数，不会为 thisArg 为 null 或 undefined 做特殊处理。

但是，关键在于我们无法知道传入的函数 func 是否是严格模式！

// 此脚本必须在全局环境是非严格模式下运行

function strict() {
    "use strict";
    console.log(this === globalThis);
}

function normal() {
    console.log(this === globalThis);
}

strict(); // => false
strict.call(undefined); // => false
functionPrototypeCall(strict, undefined); // => true

normal(); // => true
normal.call(undefined); // => true
functionPrototypeCall(normal, undefined); // => true

另外，假设已知函数 func 必然是严格函数，ordinaryCallGetThis 的调用能否省略呢？

显然也是不行的，因为 polyfill 是通过将函数设置为上下文对象的方法并调用来处理 this 的，
但是 Function.prototype.call 也能够正确处理严格模式下 this 不是对象的情况。

function strict2() {
    "use strict";
    console.log(this);
}

function functionPrototypeCall2(func: (...args: any[]) => any, thisArg: any, ...args: any[]) {
    return withTempKeyOf(thisArg, (key) => thisArg[key](...args), func);
}

strict2.call(null);
functionPrototypeCall2(strict2, null); // 报错

Tip

小知识：
Reflect.apply 和 Function.prototype.call 不一样。
前者要求传入的参数列表必须是类数组对象，而后者允许使用 null 和 undefined 替代空数组。
v8 的报错信息为 CreateListFromArrayLike called on non-object，可以看出，v8 内部函数命名与规范一致

后话

实际上，core-js 也没有提供 Function.prototype.call 函数的实现，毕竟它确实无法 polyfill。

←Back to home

This work is licensed under CC BY-NC-SA 4.0