Question

这是用例

我扩展了Array类：

class ExtendedArray extends Array {
  constructor(...args) {
    super(...args);

    this.test = 10;
  }

  testTwo() {
  }
}

现在，我有一些方法可以映射我的ExtendedArray实例并返回另一个ExtendedArray实例，该实例可以直接使用。

但是在其他情况下，我想映射到ExtendedArray上，但返回一个实际的Array实例，而不是我的ExtendedArray。在这种情况下，我认为我可以走上__proto__链并致电.constructor。

这是当我注意到一些意想不到的奇怪行为时。

基于上面的类，我期望这样的层次结构

/*
  ExtendedArray
    test: 10
    __proto__: Object
        testTwo: () {}
      __proto__: Array
        forEach
        ...
        __proto__: Object
            ...
*/

但是我得到这样一个：

/*
  ExtendedArray
    test: 10
    __proto__: Array -- Different
        constructor: class ExtendedArray
        testTwo: () {}
      __proto__: Array(0) -- Different
        constructor: f Array()
        forEach
        ...
        __proto__: Object
            ...
*/

任何人都可以解释Array和Array(0)之间的区别是原型类型是什么。当数组的构造函数是ExtendedArray类并且根据类主体定义中的方法创建数组时，为什么第一个原型也是Array的实例。我本来希望以太类型为Object或ExtendedArray？

任何有助于理解这种行为的方法都将非常有用。

我试图对此进行研究，发现了信息，这些信息解释了不同类字段和方法在结果对象中的位置，但没有解释原型对象的类型如何解决。

Answer 1

调试器中显示的“类型”是毫无意义的。他们只是试图对实例有所帮助，但通常会导致原型对象混乱。它们在浏览器之间也有所不同，并且经常在devtools版本之间进行更改。

所有这些值只是对象，它们的结构和原型链正是您所期望的。

* { padding: 0; margin: 0; box-sizing: border-box; } html { height: 100%; } body{ background-color: #EAEDF0; height: 100%; background-size: 100%; background-image: url('graphic/background.jpg'); background-attachment: fixed; background-size: cover; } h1 { margin-left: 1em; margin-bottom: 0.5em; } h2 { margin-left: 1em; } p { margin: 0 1em 1em 1em; } #holder { min-height: 100vh; background-color: #EAEDF0; max-width: 960px; margin: auto; } #header { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; height: auto; padding-bottom: 2.5em; background-image: url(graphic/waves.jpg); -webkit-justify-content: space-between; justify-content: space-between; align-items: center; } #main { display: -webkit-flex; display: flex; flex-direction: column; color: #000000; -webkit-flex: 1; flex: 1; height: 100%; background-color: #EAEDF0; max-width: 960px; } #footer { display: -webkit-flex; display: flex; background-color: #00ff00; height:auto; -webkit-justify-content: space-around; justify-content: space-around; -webkit-align-items: center; align-items: center; width: 100%; max-width: 960px; position: fixed; bottom: 0em; color: #ffffff; background-image:url('graphic/waves.jpg'); } .head-item { display: flex; margin: 2vw; height: 2vw; }和Array有什么区别？

Array(0)对象具有Array.prototype属性。您的.length = 0尚未。

为什么第一个原型是ExtendedArray.prototype实例，而其构造函数是Array类。我本来希望以太类型为ExtendedArray或Object？

它不是ExtendedArray 实例-它不是从ExtendedArray继承的（因为它是 ExtendedArray.prototype）。就像ExtendedArray.prototype之类的对象。

但是它确实继承自{constructor: ExtendedArray}，因此就是“类型”。

ES6类原型-类型解析

1 个答案: