原型在JavaScript

Question

我一直在寻找进入原型对象，我有点困惑以下

//my constructor function 
function Circle(r) { 
    this.radius = r; 
    this.PI = 3.14; 
} 

function areaCalculator() { 
    this.area = this.PI * this.radius * this.radius; 
} 

function circumferenceCalculator() { 
    this.circumference = 2* this.PI * this.radius; 
} 

，因为我们的函数是一个对象，并有一个属性叫做原型，它是可以添加的属性和这些原型对象的方法将自动适用于我们使用我们的函数构造函数创建的所有自定义对象。

Circle.prototype.areaCalculator = areaCalculator; //adding function 
Circle.prototype.color = "Red"; //adding property 

var circle1 = new Circle(5); 
circle1.areaCalculator(); 
console.log(circle1.radius);//5 
console.log(circle1.area); //78.5 
console.log(circle1.color);//Red 

如果我理解正确，所有使用Circle的对象都会引用相同的颜色变量，除非它们被明确设置。它是否正确？

而且这是什么意思做类似下面不使用原型

Circle.circumferenceCalculator = circumferenceCalculator; 
Circle.color = "Red"; 

是上述两种说法是否正确？

Answer 1

是的，所有使用new Circle创建的对象都将指向相同的color属性。该属性实际上位于原型对象上，而不在您创建的对象上。因此，当您将其设置在特定对象上时，它会从原型中“遮蔽”属性，但不覆盖它 - 您可以在设置后尝试设置为delete obj.color，并且您将恢复原来的颜色。

做Circle.color='red'会简单地设置Circle对象的color属性（甚至函数都是对象，但他们有一个callable属性调用时，它定义了他们的行为） - 这是没有办法连接到Circle的原型。

Answer 2

函数也是一个对象，你可以增加它的属性。一个常见的例子是jQuery，其中$充当对象和函数。

function Circle(r) {} 
Circle.circumferenceCalculator = circumferenceCalculator; 
Circle.color = "Red"; 

$.each();    //$ as an object 
$('selector').each() //$ as a function 

但是，这不会反映在您创建的实例中。反映在实例上的那些只是通过原型和构造函数中添加的那些。

function Circle(r) { 
    this.radius = r; 
    this.PI = 3.14; 
} 

Circle.prototype.areaCalculator = areaCalculator; 
Circle.prototype.color = "Red"; 

var mycircle = new Circle(5); 

//props on Circle itself: 
//Circle.color 
//Circle.areaCalculator 

//props on the instance: 
//mycircle.radius 
//mycircle.PI 
//mycircle.areaCalculator 
//mycircle.color