JavaScript：在構造函數中定義函數，而不是使用原型 - 有什麼區別？

所以，我不是一個JavaScript專家，只是想明白兩個代碼片段之間的區別。我有一個我想要轉換爲TypeScript的項目，我需要了解兩個正在生成的代碼片段之間的區別。JavaScript：在構造函數中定義函數，而不是使用原型 - 有什麼區別？

var Pony = (function() { 
    function Pony() { } 
    Pony.prototype.bite = function() { 
     alert("Chomp!"); 
    }; 
    return Pony; 
})(); 

var Pony2 = (function() { 
    function Pony2() { 
     var self = this; 
     self.bite = function() { 
      alert("Chomp!"); 
     }; 
    } 
    return Pony2; 
})();

來源

2013-03-29 epitka

更多：http://stackoverflow.com/q/9772307/218196，http://stackoverflow.com/q/ 4386708/218196 –

兩者之間的區別是，你可以通過保存在var中小馬的對象屬性得到第一小馬的原型，並可能在其他地方展開或使用該原型的相關位，其中作爲Pony2會只是被視爲一種功能。所以如果你以後不打算使用任何類型的原型繼承，它們是等價的。

來源

2013-03-29 14:26:09 Whiskahs

至於如何使用它們，沒有區別。然而，從性能的角度來看，前一種方法是更可取的。讓我們來擴展你的例子一點點：

var prototypePony1 = new Pony(); 
var prototypePony2 = new Pony(); 
var thisPony1 = new Pony2(); 
var thisPony2 = new Pony2(); 

prototypePony1.hasOwnProperty('bite'); //returns false 
prototypePony2.hasOwnProperty('bite'); //returns false 
thisPony1.hasOwnProperty('bite'); //returns true 
thisPony2.hasOwnProperty('bite'); //returns true 

Pony.prototype.bite = function() { alert('Nomnomnom!'); }; 
Pony2.prototype.bite = function() { alert('Nomnomnom!'); }; 

prototypePony1.bite(); //alerts 'Nomnomnom!' 
prototypePony2.bite(); //alerts 'Nomnomnom!' 

thisPony1.bite(); //alerts 'Chomp!', instance property is accessed first 
delete thisPony2.bite; 
thisPony2.hasOwnProperty('bite'); //returns false 
thisPony2.bite(); //alerts 'Nomnomnom!'

在上面的例子中，thisPony1和thisPony2都得到自己的bite功能的副本，因爲它是使用this然而，prototypePony1和prototypePony2都共享同一份定義bite來自Pony的構造函數。

一旦我們在Pony2上定義了bite原型，實例屬性仍然首先訪問thisPony1。直到我們刪除實例屬性，我們纔看到thisPony2上新定義的原型屬性。

有關定義對象方法的更多詳細信息，請查看here。

來源

2013-03-29 14:31:43 joelmdev

不要讓OP代碼中的立即執行的函數欺騙你。變量'Pony'和'Pony2'是構造函數，可用於創建多個實例。這不是「一次性的事情」。 –

閱讀速度太快。並忘記了我的'新編輯相應。 – joelmdev

根據你的鏈接，是不是相反，pony2a和pony2b得到自己的副本，而pony1a和pony1b，分享。 – epitka

上面的答案很好地概述了放置原型和放置實例之間的區別。至於你約轉換爲打字稿的問題，下面是你會怎麼寫他們兩個：

class Pony { 
    bite(){ 
     alert('chomp'); 
    } 
} 

class Pony2 { 
    bite: () => void; 
    constructor(){ 
     this.bite =() => alert('chomp'); 
    } 
}

來源

2013-03-29 15:40:47

JavaScript：在構造函數中定義函數，而不是使用原型 - 有什麼區別？

回答

相關問題