了解javascript中的原型/构造函数[重复]

Question

function A(){}

function B(){}

function C(){}

B.prototype = new A();
console.log(B.prototype.constructor);
C.prototype = new B();
console.log(C.prototype.constructor);

打印：

[功能：A]
[功能：A]

到目前为止，我的理解是，通常在 JavaScript 中，对象的构造函数属性是指创建它的构造函数。如果对象是由文字创建的，则构造函数属性引用该文字的基础类型。

鉴于上面 constructor 属性的“定义”，我不明白为什么它打印
[Function: A] 两次，而不是：

[功能：A]
[功能：B]

Answer 1

当您设置prototype 时，您会清除前一个。并且，通过这样做，您在原型切换之前清除了对原始构造函数的引用（constructor 是存储在原型中的对象引用，如果您更改原型，您也会更改构造函数）。

当像这样手动进行继承时，您必须记住在交换原型后“修复”constructor 属性。您的代码没有这样做，因此当您调用new B() 时，您实际上是在使用A() 作为构造函数。然后，当您将C 的原型设置为new B() 时，A() 构造函数运行并返回A 的实例。

function A(){}

function B(){}

function C(){}

console.log("B.prototype.constructor before inheritance: ",  B.prototype.constructor);
B.prototype = new A();

C.prototype = new B();

console.log(A.prototype.constructor);  // A
console.log(B.prototype.constructor);  // A
console.log(C.prototype.constructor);  // A

console.log("B.prototype.constructor after inheritance: ",  B.prototype.constructor);



// We've completely changed the prototype (including the constructor), so we have to fix it:
B.prototype.constructor = B;
console.log("B.prototype.constructor after constructor fix: ",  B.prototype.constructor);

对于 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.');
  }
}

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