Javascript 在子类中调用super（）后，属性查找实际上是如何工作的

我有一个来自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

如何在引擎盖下工作。因为

这个

指的是

Dog

类实例，并且名称不是Dog实例上存在的东西。所以为了访问它，我们使用超级调用调用父级的构造函数。我知道它是向上看的

但是有人能通过原型机制解释一下吗（我很容易理解原型查找和链接机制）

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

这是指狗类

否，

此

引用实例化的对象。实例化对象的内部原型为

Dog.prototype

，而

Dog.prototype

的内部原型为

Animal.prototype

因为

这个

直接引用实例化的对象（在构造函数和所有方法中）

将

name

属性直接放在该对象上，因此完全可以引用

d.name

，或者在其中一个方法中引用

this.name

：

类动物{
建造师（姓名）{
this.name=名称；
}
讲{
console.log（this.name+'发出噪音'）；
}
}
狗类动物{
建造师（姓名）{
super（name）；//调用super类构造函数并传入name参数
}
讲{
console.log（this.name+'barks'）；
}
}
const d=新狗（“Mitzie”）；
const dProto=Object.getPrototypeOf（d）；
const secondProto=Object.getPrototypeOf（dProto）；
console.log（dProto==Dog.prototype）；
console.log（secondProto==Animal.prototype）；
log（d.hasOwnProperty（'name'））
这是指狗类

否，
此
引用实例化的对象。实例化对象的内部原型为
Dog.prototype
，而
Dog.prototype
的内部原型为
Animal.prototype

因为
这个
直接引用实例化的对象（在构造函数和所有方法中）

将
name
属性直接放在该对象上，因此完全可以引用
d.name
，或者在其中一个方法中引用
this.name
：


类动物{
建造师（姓名）{
this.name=名称；
}
讲{
console.log（this.name+'发出噪音'）；
}
}
狗类动物{
建造师（姓名）{
super（name）；//调用super类构造函数并传入name参数
}
讲{
console.log（this.name+'barks'）；
}
}
const d=新狗（“Mitzie”）；
const dProto=Object.getPrototypeOf（d）；
const secondProto=Object.getPrototypeOf（dProto）；
console.log（dProto==Dog.prototype）；
console.log（secondProto==Animal.prototype）；
log（d.hasOwnProperty（'name'））事实上，我想问的是在引擎盖下。下面是基于@Jai在我所寻找的评论中的指针得出的答案

我通过或任何编译器运行了基于类的代码，并得到了这个转换

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\u super.call（this，name）
insidedog函数解释了类Dog的
this
reference内部
speak
方法的混淆。它通过
call（）
改变了上下文事实上，我想问的是幕后黑手。下面是基于@Jai在我所寻找的评论中的指针得出的答案

我通过或任何编译器运行了基于类的代码，并得到了这个转换

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\u super.call（this，name）
insidedog函数解释了类Dog的
this
reference内部
speak
方法的混淆。它通过
call（）
改变上下文，它可能在引擎盖下使用
.bind（）/.call（）/.apply（）
。嗯……很难想象。你能详细说明一下吗！可以更直观地阅读，也可以提供阅读资源。您是在询问
Dog.prototype.speak
方法中的
this.name
，还是在
Dog
构造函数中的
super
调用？这个链接可以帮助你。粘贴您的代码并查看es5版本以便理解，或者您可能会查看一些编译器，如tsc/babel等。它可能在后台使用
.bind（）/.call（）/.apply（）
。嗯……很难想象。你能详细说明一下吗！可以更直观地阅读，也可以提供阅读资源。您是在询问
Dog.prototype.speak
方法中的
this.name
，还是在
Dog
构造函数中的
super
调用？这个链接可以帮助你。粘贴您的代码并查看es5版本以便理解，或者您可以查看一些编译器，如tsc/babel等。
此
当然指的是实例。那是我写作的拙劣之处。不管怎样，你是想说当
super（name）
调用发生时，它会将
name
属性复制到该对象（Dog实例）而不是查找？请编辑你的答案，因为这不是基于我将
this
写入Dog类而不是实例的错误。违背了实际要求的目的。为sameNo道歉，没有复制任何东西-当
super（）
发生时，调用
Animal
的构造函数，在
Animal
的构造函数中
this
引用实例化的对象。对象并不真正关心其内部原型是什么（在这里，它是狗还是动物），但无论如何，
.name
属性不在任何原型上，而是在对象本身上。嗯……我想得太多了。
这个
当然指的是实例。那是我写作的拙劣之处。不管怎样，你是想说当
super（name）
调用发生时，它复制