ecmascript-6 Function.prototype.bind() 如何处理类构造函数？

Question

我完全错过了 ES6 革命，我在 7 年后回到 JavaScript，发现发生了许多非常奇怪的事情。

特别是Function.prototype.bind() 处理类构造函数的方式。

考虑一下：

// an ES6 class
class class1 {
  constructor (p) {
    this.property = p;
  }
}

var class2 = class1.bind(passer_by);
var class3 = class2.bind(passer_by,3);

class2() // exception, calling a constructor like a function
class3() // idem

console.log (new class1(1)) // class1 {property: 1}
console.log (new class2(2)) // class1 {property: 2}
console.log (new class3() ) // class1 {property: 3}

// An ES5-style pseudo-class
function pseudoclass1 (p) {
  this.property = p;
}

var property = 0;
var passer_by = { huh:"???" }

var pseudoclass2 = pseudoclass1.bind(passer_by);
var pseudoclass3 = pseudoclass1.bind(passer_by,3);

pseudoclass1(1); console.log (property)  // 1 (this references window)
pseudoclass2(2); console.log (passer_by) // Object { huh: "???", property: 2 }
pseudoclass3() ; console.log (passer_by) // Object { huh: "???", property: 3 }

console.log (new pseudoclass1(1)) // pseudoclass1 {property: 1}
console.log (new pseudoclass2(2)) // pseudoclass1 {property: 2}
console.log (new pseudoclass3() ) // pseudoclass1 {property: 3}

显然class2和class3被标识为构造函数，而class3是class1的部分应用，可以生成第一个参数为固定值的实例。

另一方面，尽管它们仍然可以充当（穷人的）构造函数，但 ES5 风格的函数确实服务于 bind() 设置的 this 的值，当它们作用于倒霉的人时可以看出passer_by 而不是像未绑定的 pseudoclass1 那样破坏全局变量。

显然，所有这些构造函数都以某种方式访问​​this 的值，从而允许它们构造一个对象。然而他们的this 应该绑定到另一个对象。

所以我想一定有某种机制在起作用，将正确的this 提供给构造函数，而不是传递给bind() 的任何参数。

现在我的问题是，我可以在这里和那里找到一些关于它的知识，甚至一些代码显然来自 Chrome 的 V8 的某个版本（函数 bind() 本身似乎对构造函数做了一些特殊的事情），或者讨论关于原型链中插入的一个神秘的 FNop 函数，以及，如果我可以补充的话，偶尔的货物崇拜 bu[beep]it。

但是我找不到关于这里实际发生的事情的解释，关于为什么实施这种机制的理由（我的意思是，使用新的扩展运算符和解构等等，不是吗？可以产生相同的结果（向构造函数应用一些参数），而不必在bind()？除了传递给bind() 的值之外的其他东西？）

我尝试阅读 2015 年和 2022 年 ECMA 262 规范，但当我的大脑开始从耳朵里漏出来时，我不得不停下来。我将调用堆栈追溯为：
19.2.3.2
9.4.1.3
9.4.1.2
7.3.13 其中关于构造函数的说法是：“如果未传递 newTarget，则此操作等效于：new F(...argumentsList)”。啊哈。所以这个伪递归调用应该允许以某种方式模拟new... Erf...

如果某个善良和精明的灵魂能让我更好地了解正在发生的事情，告诉我 ECMA 规范的哪些部分处理这种机制，或者更笼统地指出我的正确方向，我将不胜感激方向。

说实话，我已经厌倦了用头撞墙。这个bit of Chrome code 似乎表明bind() 正在为构造函数做一些特别的事情，这对我来说是不可理解的。因此，如果其他一切都失败了，我至少想要一个解释。

Answer 1

这与具体的类没有任何关系，而是与 .bind 的工作方式有关。

你一直在正确的轨道上。这里最相关的部分是9.4.1.2。

回顾一下：ECMAScript 区分两种类型的函数：callable 函数和 constructable 函数。函数表达式/声明两者都是，而例如class 构造函数只能构造，箭头函数只能调用。

在规范中，这由函数的内部 [[Call]] 和 [[Construct]] 方法表示。

new 将触发内部[[Construct]] 方法的调用。

.bind 将为[[Call]] 和[[Construct]] 返回一个具有不同实现的新函数对象。那么the "bound" version of [[Construct]] 是什么样的呢？

9.4.1.2 [[Construct]] (argumentsList, newTarget)

当绑定函数外来对象的 [[Construct]] 内部方法时，使用绑定函数创建的 F 会使用参数列表 argumentsList 和newTarget，采取以下步骤：

1. 让 target 为 F.[[BoundTargetFunction]]。
2. 断言：IsConstructor(target) 为真。
3. 令 boundArgs 为 F.[[BoundArguments]]。
4. 令 args 是一个新列表，其中包含与列表 boundArgs 相同的值，顺序相同，后跟与列表 argumentsList相同的值> 顺序相同。
5. 如果 SameValue(F, newTarget) 为真，则将 newTarget 设置为 target。
6. 返回 ?构造（target，args，newTarget）。

这意味着绑定的构造函数将使用绑定的参数 (F.[[BoundArguments]]) 和传入的参数 (argumentsList) “构造”原始函数 (F.[[BoundTargetFunction]])，但它完全忽略了绑定的 @ 987654336@ 值（即F.[[BoundThis]]）。

---

但是除了传递给 bind() 的值之外，还有其他类型的函数被馈送吗？

是的，箭头函数。箭头函数没有自己的this 绑定（使用最近的this 提供环境的值），因此绑定的箭头函数也会忽略绑定的this 值。