2016-12-08 66 views
3

我想學習如何在JavaScript中使用的原型,我瞭解到,原型可以幫助我如許多對象JavaScript的原型共享

var car = function(color, speed) { 
    this.color = color; 
    this.speed = speed; 
} 
car.prototype.doors = 4; 
var honda = new car('black', 'beep'); 
var kea = new car('black', 'meep'); 
document.write(kea.doors+' '+ honda.doors); 
honda.doors = 2; 
document.write('<br/>'); 
document.write(kea.doors+' '+ honda.doors); 
car.prototype.doors = 4; 
document.write('<br/>'); 
document.write(kea.doors+' '+ honda.doors); 

之間共享功能,我看到了一個視頻在這裏:Here

的傢伙說,如果我更新原型的值,那麼變量會在所有對象中改變,但在我的例子中,當我改變它時,值並沒有改變。 糾正我,如果我錯了。

+0

刪除行「honda.doors = 2」然後看 –

回答

1

JavaScript對象是引用類型,而像Numbers這樣的基本類型不是。所以你會使用副本。當你改變honda.doors的值時,你不會在其他任何地方改變它。要解決此問題,您可以將car.prototype.doors作爲對象,如car.prototype.doors = {doors: 4};

+0

「當你改變honda.doors的值時,你不會在其他地方改變它。」我知道,但在視頻中,這個人說car.prototype.doors會更新每個對象內部的所有門變量,即使我沒有在每個對象上手動執行這些操作! –

+0

@ Seif Eddine Slimene錯誤的信息,也許你應該糾正他在視頻評論部分 – Viney

+0

請檢查視頻的最後一分鐘,他說明白,明確改變了價值和另一個從它的構造函數的原型繼承價值將改變這兩個,我只是想確認 –

4

只有沒有明確更改此屬性的對象纔會更改。我改變了最後一步你的代碼來設置5門:

car.prototype.doors = 5; 

https://jsfiddle.net/g1hrujL0/ 在那裏,你可以看到,對於它繼承自它的原型價值KEA對象改變門的數量,但是因爲我們已經顯式地改變了honda對象的這個屬性,它的值沒有改變。

+0

,但在視頻中,那個傢伙說car.prototype.doors會更新每個對象內部的所有門變量,即使我沒有在每個對象上手動執行該操作! (他的意思也是明確改變的) –

+0

基本上當你嘗試訪問一個對象的值時,它首先檢查該值是否被設置爲一個屬性直接對象。當它沒有設置時,它會檢查對象的原型。因此,當您更新原型的值時,它只會影響沒有爲此屬性設置的自定義值的對象。 – Ben

+0

請仔細檢查視頻的最後一分鐘,他表示明確表示,明確變更了值,另一個從構造函數原型繼承的值將更改這兩個值,我只是想確認一下。 –

1

您的代碼製作了一個類似於此的對象。如果你打開chrome開發工具,你可以驗證。當你看honda.doors它會找到2發現4

car:{ 
    color: "black", 
    doors: 2, 
    speed:"beep", 
    __proto__: { 
     constructor: function(color, speed), 
     doors:4, 
     __proto__: {} 
    } 
} 
1

而且除了之前@Ben答案(他們只會更改爲不具有這種性質的明確改變你的對象),這是與刪除相同也如果你刪除當前的對象屬性(刪除honda.doors;)然後引用它,它將獲取原型屬性值。在當前對象不具有該屬性否則它始終是指原生屬性值,我希望這有助於在原型

的理解原型被稱作考慮這段代碼

var car = function(color, speed) { 
 
    this.color = color; 
 
    this.speed = speed; 
 
} 
 
car.prototype.doors = 4; 
 
var honda = new car('black', 'beep'); 
 
var kea = new car('black', 'meep'); 
 
console.log(kea.doors+' '+ honda.doors); 
 
honda.doors = 2; 
 
console.log('<br/>'); 
 
console.log(kea.doors+' '+ honda.doors); 
 
car.prototype.doors = 4; 
 
delete honda.doors; 
 
console.log('<br/>'); 
 
console.log(kea.doors+' '+ honda.doors);

+0

謝謝它真的有幫助: –