javascript - 为什么继承Array在ES5中很难实现？

Question

在 ES5 中使用原型(prototype)继承，从 Array 继承并获得预期的行为看起来并不简单，比如在将项目添加到 Array 时自动更新 .length (见下面的代码)。 ES5 创建派生函数对象 (MyArray)，然后将基类型传递给它进行初始化，为什么这个模型很难在这个模型中获得预期的行为？

ES6 改变了基础构造函数中的行为和创建对象，然后派生类的构造函数对其进行初始化(在调用 super() 之后)，想知道为什么这样解决了问题。

function MyArray(){}
MyArray.prototype = Object.create(Array.prototype);

var myArr = new MyArray();
myArr[0] = 'first';
console.log(myArr.length); // expect '1', but got '0' in output

Answer 1

关于Array 的关键是一个真正的数组对象是一个Array Exotic Object。 .异国情调的对象是具有使用标准 JS 语言功能无法实现的行为的对象，尽管在 ES6 中 Proxy 允许用户代码创建类似异国情调的对象的更多能力。

当子类化一个返回像Array这样的奇异对象的构造函数时，子类化方法需要以创建的对象实际上是一个奇异对象的方式来完成。当你做类似的事情时

function ArraySubclass(){}
ArraySubclass.prototype = Object.create(Array.prototype);

然后

(new ArraySubclass()) instanceof Array

因为原型(prototype)是匹配的，但是 new ArraySubclass 返回的对象只是一个普通对象，它的原型(prototype)链中恰好有 Array.prototype。但是你会注意到

Array.isArray(new ArraySubclass()); // false

因为该对象不是真正的异国情调。在这种情况下

new ArraySubclass()

等同于做

var obj = Object.create(ArraySubclass.prototype);
ArraySubclass.call(obj);

那么在 ES5 中如何扩展 Array？您需要创建一个外来对象，但您还需要确保该外来对象在其原型(prototype)链中包含您的 ArraySubclass.prototype 对象。这就是 ES5 遇到问题的地方，因为在 vanilla ES5 中，无法更改现有对象的原型(prototype)。使用许多引擎添加的 __proto__ 扩展，您可以使用如下代码获得正确的 Array 子类化行为

var obj = new Array();
obj.__proto__ = ArraySubclass.prototype;
ArraySubclass.call(obj);

假设您想概括上面的模式，您会怎么做？

function makeSubclass(baseConstructor, childConstructor){
    var obj = new baseConstructor();
    obj.__proto__ = childConstructor.prototype;
    return obj;
}

function ArraySubclass(){
    var arr = makeSubclass(Array, ArraySubclass); 

    // do initialization stuff and use 'arr' like 'this'

    return arr;
}
ArraySubclass.prototype = Object.create(Array.prototype);

所以这在 ES5 + __proto__ 中有效，但是当事情变得更复杂时呢？如果你想继承 ArraySubclass 怎么办？您必须能够更改 makeSubclass 的第二个第二个参数。但是我们该怎么做呢？这里的实际目标是什么？当你做类似的事情时

new ArraySubclass()

我们关心的是作为第二个参数传递给 new 的值，并且应该传递的是构造函数的原型(prototype)。在 ES5 中没有很好的途径来实现这一点。

这就是 ES6 类的优势所在。

class ArraySubclass extends Array {
  constructor(){
    super();
  }
}

关键是当 super() 运行时，它知道 ArraySubclass 是子类。当 super() 调用 new Array 时，它还会传递一个额外的隐藏参数，表示“嘿，当您创建这个数组时，将其原型(prototype)设置为 ArraySubclass。 prototype。如果有多个继承级别，它将传递子级最多的原型(prototype)，以便返回的奇异对象是真正的奇异对象，同时确保它具有正确的原型(prototype)。

这不仅意味着事物构造正确，而且意味着引擎可以预先创建具有正确原型(prototype)值的对象。由于引擎处理和跟踪对象的方式，创建后改变对象的 __proto__ 值是一个众所周知的去优化点。