javascript 区别(车内功能)this.color vs car.color1 vs car.prototype.color2

Question

var car = function(){
this.color = 'blue';
}

car.color1 = 'white';
car.prototype.color2 = 'red';

var toyota = new car();

console.log(car.color);         // undefined
console.log(car.color1);        // white
console.log(car.color2);        // undefined

console.log(toyota.color);      // blue
console.log(toyota.color1);     // undefined
console.log(toyota.color2);     // red

请您解释一下为什么其中 3 个在创建新对象之前和之后有不同的答案。

Answer 1

car 是一个函数:

var car = function(){
    this.color = 'blue';
};

由于函数是一流的对象，您可以在它们上设置属性:

car.color1 = 'white';

这在某种程度上相当于面向对象语言中的静态属性。

函数也可以充当构造函数(当您使用 new 运算符调用它们时)。当他们这样做时，他们产生的实例继承自构造函数原型(prototype)。属性解析查看实例，然后继续查看原型(prototype)链，直到找到属性:

car.prototype.color2 = 'red'; // Property shared by instances of `car`
var toyota = new car(); // toyota is an instance of `car`

当您实例化 car 时，将调用构造函数并将实例的 color 属性设置为 'blue'。

因此，例如:

• 当您访问 color 属性时，它会在实例上找到。
• 当您访问实例上的 color1 属性时，它并不存在(它是构造函数的静态属性)。
• 当您访问 color2 属性时，它在实例上找不到，但在原型(prototype)上找到。

对于函数本身:

• 当您访问 color 属性时，它不存在(因为它只存在于实例中)
• 当您访问 color1 属性时，它被发现是因为您正在检查函数对象本身
• 当您访问 color2 属性时，它并不存在(因为它只存在于实例继承的原型(prototype)上)。