javascript - 在子类中调用 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.

现在，在子类 Dog 中，this.name 是如何工作的。由于 this 引用 Dog 类实例，并且名称不存在于 Dog 实例上。因此，要访问它，我们使用 super 调用来调用父级的构造函数。我知道它看起来向上。

但是有人可以通过原型(prototype)机制进行解释吗(我很容易理解原型(prototype)查找和链接机制)。

我确信在内心深处它会归结为这一点，但不清楚中间的中间步骤。谢谢!

Answer 1

this refers to Dog class

不，this 指的是实例化的对象。实例化对象有一个内部原型(prototype) Dog.prototype，而 Dog.prototype 有一个内部原型(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'));