理解JavaScript類的方法和原型

Question

第一個例子：

function Animal(name) { 
    // Instance properties can be set on each instance of the class 
    this.name = name; 
    this.speak = function() { 
     console.log("My name is " + this.name); 
    } 
} 

var animal = new Animal('Petname1'); 
animal.speak(); 


function Cat(name) { 
    Animal.call(this, name); 
} 

Cat.prototype = new Animal(); 

var cat = new Cat('Petname2'); 
console.log(cat.speak()); 

第二個例子：

function Animal(name) { 
    // Instance properties can be set on each instance of the class 
    this.name = name; 
} 

Animal.prototype.speak = function() { 
    console.log("My name is " + this.name); 
}; 

var animal = new Animal('Petname1'); 
animal.speak(); 


function Cat(name) { 
    Animal.call(this, name); 
} 

Cat.prototype = new Animal(); 

var cat = new Cat('Petname2'); 
console.log(cat.speak()); 

在第一示例中，我直接添加到類，在我通過將第二示例prototype。有什麼不同？輸出是一樣的。

Answer 1

首先，您必須瞭解new如何在Javascript上工作​​，並且link對此有很好的解釋。

基於此，兩種方法之間的差異是創建新動物和貓時正在創建的speak函數的數量。

第一種方法將具有speak函數的相同實例編號，其編號爲Cat和Animal。然而，第二種方法只有一個speak函數，不管你已經實例化了多少貓和動物。看看下面的代碼片段。

在這一個我們可以看到，兩個動物實例的'說話'功能是不同的。

function Animal(name) { 
    this.name = name; 
    this.speak = function() { 
     console.log("My name is " + this.name); 
    } 
} 

var animalA = new Animal(); 
var animalB = new Animal(); 

animalA.speak === animalB.speak // false 

分配到原型我們可以看到它對於兩個實例是相同的。

function Animal(name) { 
    this.name = name; 
} 

Animal.prototype.speak = function() { 
    console.log("My name is " + this.name); 
}; 

var animalA = new Animal(); 
var animalB = new Animal(); 

animalA.speak === animalB.speak // true 

Answer 2

在第一個例子中，speak()被附加到創建的每個Animal對象上。您可以在運行時更改對象的行爲speak()，只會針對該特定對象完成該操作。

但是，第二個例子有speak()被定義一次，並且所有對象都將獲得更新版本，如果它完全通過Animal.prototype.speak賦值進行更改。