尝试理解 ECMAScript-6 Function.prototype.bind() 的实际作用

Question

这道题是follow-up到。出于某种原因，我在 7 年后回到 JS，男孩，我几乎认不出这只亲爱的老野兽了。

纯粹出于教育目的，我决定重写 Function.prototype.bind() 允许做的各种事情的天真实现。这只是一个尝试了解正在发生的事情并引发一些问题的练习。

对于我的示例和评论中的所有错误和误解，我很乐意接受纠正。

另外，这段代码不是我的。我从一个博客中得到了这个想法，只是稍微调整了一下，但不幸的是我忘记了来源。如果有人认出原作，我会很乐意给予应有的信任。同时，我为我的失误道歉。

朴素绑定

最初的想法只是简单地做 lambda 演算专家显然称之为“部分应用”的事情，即固定函数第一个参数的值，它也接受一个隐式的“this”第一个参数，如下所示：

Function.prototype.naive_bind = function (fixed_this, ...fixed_args) {
    const fun = this; // close on the fixed args and the bound function
    return function(...free_args) { // leave the rest of the parameters free
        return fun.call(fixed_this, ...fixed_args, ...free_args);
    }
}

绑定构造函数（第一轮）

class class1 {
    constructor (p1, p2) {
        this.p1 = p1;
        this.p2 = p2;
    }
}

var innocent_bystander = { "huh?":"what?" }

var class2 = class1.naive_bind(innocent_bystander);
class2 (1,2)                 // exception: class constructor must be invoked with new (as expected)
console.log(new class2(1,2)) // exception: class constructor must be invoked with new (Rats!)

function pseudoclass1 (p1, p2) {
    this.p1 = p1;
    this.p2 = p2;
}
var pseudoclass2 = pseudoclass1.naive_bind(innocent_bystander);
pseudoclass2 (1,2)                 // same exception (as expected)
console.log(new pseudoclass2(1,2)) // same again (at least it's consistent...)

Tonnerre de Brest ! 显然，运行时对仅基于 Function.prototype.call() 的包装器不满意。似乎真正的 bind() 正在添加一团秘密调味料，为生成的函数提供适当的“构造函数”风味（显然 ECMA 262 规范中的“构造函数”并不意味着 class 构造函数，但是任何可以用“new”调用并使用“this”来填充新创建的属性和方法的函数 object)

绑定其他函数

var purefunction1 = console.log
var purefunction2 = purefunction1.naive_bind (null, "Sure,", "but")
purefunction2 ("you can still", "bind pure", "functions")
// sure, but you can still bind pure functions

// ...and make animals talk (by binding simple methods)
var cat = { speech: "meow" }
var dog = { speech: "woof" }
var fish= { speech: "-" }

var talk = function(count) { console.log ((this.speech+", ").repeat(count-1) + this.speech + "!") }

talk.naive_bind (cat,1)(); // meow! 
talk.naive_bind (dog,1)(); // woof!
talk.naive_bind (cat)(3) // meow, meow, meow!
talk.naive_bind (fish)(10) // -, -, -, -, -, -, -, -, -, -!

// and bind arrow functions
// ("this" is wasted on them, but their parameters can still be bound)

var surprise = (a,b,c) => console.log (this.surprise, a,b,c)
var puzzlement = surprise.naive_bind(innocent_bystander, "don't", "worry");

// "this" refers to window, so we get our own function as first output.
surprise ("where", "am", "I?")  // function surprise(a, b, c) where am I?
// the bound value of this is ignored, but the other arguments are working fine
puzzlement("dude")              // function surprise(a, b, c) don't worry dude

显然，一切都按预期进行。还是我漏掉了什么？

绑定构造函数（第二轮）

我们显然无法将包装器传递给 new，但我们可以尝试直接调用 new。由于 this 的值由 new 提供，construction-specialized 包装器只需要担心真正的构造函数参数。

 Function.prototype.constructor_bind = function (...fixed_args) {
    const fun = this;
    return function(...free_args) {
        return new fun (...fixed_args, ...free_args);
    }
}

var class1_ctor = class1.constructor_bind(1);
console.log (class1_ctor(2)) // class1 { p1:1, p2:2 }

var monster = (a,b) => console.log ("boooh", a, b)
var abomination = monster.constructor_bind(1);
console.log (abomination(2)) // exception: fun is not a constructor (as expected)

好吧，这似乎已经结束了。我想真正的 bind() 更安全更快，但至少我们可以重现基本功能，即：

为方法提供 this 的固定值
对任何合法函数进行部分应用，尽管构造函数需要特定的变体

编辑：已删除问题以符合 SO 政策。

仅替换为一个与此 post 的标题相匹配的那个，我试图通过提供一个我认为真实函数所做的幼稚且可能错误的等价物来探索：

根据 ECMAScript 规范 6.0 版，请帮助我了解本机 Function.prototype.bind() 方法的工作原理。

Answer 1

您唯一遗漏的一点是在 ES6 中引入了，它 a) 可以区分 [[call]] 和 [[construct]] 在 function 和 b) 中需要在 new 调用中转发。

所以更完整的 polyfill 可能如下所示：

Function.prototype.bind = function (fixed_this, ...fixed_args) {
    const fun = this;
    return function(...free_args) {
        return new.target != null
            ? Reflect.construct(fun, [...fixed_args, ...free_args], new.target)
            : fun.call(fixed_this, ...fixed_args, ...free_args);
    }
}

其他一些细节会涉及 fun 被断言为函数对象，并且返回的绑定函数具有特殊的 .name、准确的 .length，并且没有 .prototype。您可以在规范中找到这些内容，显然您已经阅读过了。

尝试理解 ECMAScript-6 Function.prototype.bind() 的实际作用

An attempt at understanding what ECMAScript-6 Function.prototype.bind() actually does

bind

this

ecmascript-6

朴素绑定

绑定构造函数（第一轮）

绑定其他函数

绑定构造函数（第二轮）