无法真正理解Javascript中的构造函数和原型关系

Question

我是Javascript的初学者，并且很难尝试理解构造函数和原型属性之间的关系。

我知道Prototype对象有一个constructor属性，指向构造函数。构造函数有一个prototype属性，指向原型对象。

这是我想要了解的代码（我的问题在代码中被注释）：

function Car(){};
var myCar = new Car();
console.log(Object.getPrototypeOf(myCar)); //why this prints "Car" Object ? isn't it the constructor not the prototype object ? why the prototype object is not printed ?


var Vehicle = {
    getName : function(){
        return "hello";
    }
};
Car.prototype = Vehicle ; //I'm trying to change the prototype property in the constructor to "Vehicle" Object is that done right ?
console.log(Object.getPrototypeOf(myCar).getName()); //Why am i getting getName() function does not exist ?

Answer 1

  

为什么要打印“Car”对象？不是构造函数不是原型对象吗？原型对象为什么不打印？

这就是Chrome（或您使用的浏览器）命名对象的方式。如果您仔细查看属性，它实际上是Car.prototype：

  

我正在尝试将构造函数中的prototype属性更改为“Vehicle”对象是否正确？

您无法更改现有对象的原型，只能扩展它。设置Car.prototype = Vehicle;只会更改Car的 future 实例的原型，现有的实例仍将引用原始的原型对象，该对象没有getName property：

// create a new instance after setting the new prototype
var myCar2 = new Car();
// yields false
console.log(Object.getPrototypeOf(myCar) === Object.getPrototypeOf(myCar2)); 

---

这与原型无关，而是与JavaScript中的赋值和引用有关。想象一下，我有以下对象：

var foo = {
    bar: {
        answer: 42
    }
};

并假设我将foo.bar分配给另一个对象的属性：

var baz = {};
baz.xyz = foo.bar;

现在将foo.bar设置为其他值，例如foo.bar = {}，不会更改baz.xyz的值，它仍然会引用上一个对象。

只有扩展原始对象（扩展原型）或更改其属性才会生效，因为foo.bar和baz.xyz都引用同一个对象：

foo.bar.answer = 21;
console.log(baz.xyz.answer); // shows 21
// console.log(foo.bar === baz.xyz); // yields true