原型在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