瞭解JavaScript中的原型概念

-1

下面提到的實施例1和實施例2都給出相同的輸出。

實施例1 [顯示 'F1 L1']

function parent(fname, lname) { 
     this.firstName = fname; 
     this.lastName = lname; 
     this.fun1 = function() { 
      return this.firstName + " " + this.lastName; 
     }; 
    }; 

function child() {}; 
child.prototype = new parent('f1', 'l1'); 

var objChild = new child(); 
alert(objChild.fun1()); // alert displays 'f1 l1'

實施例2 [也顯示 'F1 L1']

function parent(fname, lname) { 
     this.firstName = fname; 
     this.lastName = lname;   
    }; 

parent.prototype.fun1 = function() { 
     return this.firstName + " " + this.lastName; 
    }; 


function child() {}; 
child.prototype = new parent('f1', 'l1'); 

var objChild = new child(); 
alert(objChild.fun1()); // alert displays 'f1 l1'

實施例1和實施例2之間的唯一區別是fun1（）函數的定義方式。我的問題是，當定義fun1（）的方法給出相同的輸出時，兩者之間有什麼區別（我理解我對原型的理解不清楚）。

請說明

來源

2014-06-29 refactor

@didierc原型不能像模板一樣工作。原型對象始終與實例保持分離。 – Pointy

@有點確實，錯誤的比喻。這可能是OP令人困惑的一點，所以我的評論實際上沒有幫助。謝謝你澄清！ – didierc

下面的答案詳細解釋了原型是什麼，它是如何使用的以及如何將它用於繼承：http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 – HMR

您的第一個示例將「fun1」放在每個父實例上。第二個把它放在父原型上。

當您在第一個示例中調用objChild.fun1()時，JavaScript運行時將在「子」原型對象上找到該函數。在第二個例子中，它不會在那裏找到它，但它會在繼續檢查「父」原型對象時找到它。

順便說一下，這不是建立繼承鏈的最佳實踐方式;這種方法沒有涉及一些（不可否認的）細節。相對較新的Object.create()函數是一個更好的選擇，您可以找到關於它的信息（以及舊版瀏覽器的「polyfill」）on the MDN site。（如果不明確，我的意思是將child.protoype設置爲新實例化的「父」對象。）

來源

2014-06-29 16:33:47 Pointy

如果您想要爲所有對象使用相同的方法fun1，則優選第二種方法。相反，第一種方法允許您爲不同對象使用此方法的不同實現。

來源

2014-06-29 16:37:39

瞭解JavaScript中的原型概念

回答

相關問題