在子类中调用 super() 后 属性 查找实际上是如何工作的

Question

我有一个来自 MDN 的简单示例。

class Animal { 


 constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

现在，在 subclass Dog 中，this.name 是如何工作的。由于 this 指的是 Dog class 实例并且名称不存在于 Dog 实例上。因此，为了访问它，我们使用调用父级构造函数的超级调用。我明白了。

但是有人可以通过原型机制来解释一下吗（我很了解原型查找和链接机制）。

我敢肯定，在内心深处，它会归结为这一点，但不清楚中间的中间步骤。谢谢！

Answer 1

this refers to Dog class

不是，this指的是实例化对象。实例化对象的内部原型为Dog.prototype，Dog.prototype的内部原型为Animal.prototype。

由于this直接引用实例化对象（在两个构造函数中，以及在所有方法中），

this.name = name;

将 name 属性 直接放在该对象上 ，因此引用 d.name 完全没问题，或者在方法，this.name:

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + ' makes a noise.');
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name); // call the super class constructor and pass in the name parameter
  }

  speak() {
    console.log(this.name + ' barks.');
  }
}

const d = new Dog('Mitzie');

const dProto = Object.getPrototypeOf(d);
const secondProto = Object.getPrototypeOf(dProto);
console.log(dProto === Dog.prototype);
console.log(secondProto === Animal.prototype);

console.log(d.hasOwnProperty('name'));

Answer 2

其实我想问的是内幕。所以，这是基于@Jai 在我正在寻找的评论中的指针的答案。

我通过 es5compiler 或任何编译器 运行 基于 class 的代码并获得此转换

var Dog = /** @class */ (function (_super) {

  __extends(Dog, _super);
    function Dog(name) {
        return _super.call(this, name) || this;
    }
    Dog.prototype.speak = function () {
        console.log(this.name + ' barks.');
    };
    return Dog;
}(Animal));

所以基本上

return _super.call(this, name) inside Dog 函数解释了 class Dog 的 speak 方法中 this 引用的混淆。它通过 call()

改变上下文