爲什麼我們需要在JavaScript

Question

定義構造函數

我讀這段代碼

// Shape - superclass 
function Shape() { 
    this.x = 0; 
    this.y = 0; 
} 

// superclass method 
Shape.prototype.move = function(x, y) { 
    this.x += x; 
    this.y += y; 
    console.info('Shape moved.'); 
}; 

// Rectangle - subclass 
function Rectangle() { 
    Shape.call(this); // call super constructor. 
} 

// subclass extends superclass 
Rectangle.prototype = Object.create(Shape.prototype); 
Rectangle.prototype.constructor = Rectangle; 

var rect = new Rectangle(); 

rect instanceof Rectangle; // true 
rect instanceof Shape; // true 

rect.move(1, 1); // Outputs, 'Shape moved.' 

我真是被這個片段迷惑

Rectangle.prototype = Object.create(Shape.prototype); 
Rectangle.prototype.constructor = Rectangle; 

爲什麼我們不使用Rectangle.prototype =形狀。原型，Object.create()有什麼特別之處？ 以及如果Rectangle.prototype.constructor = Rectangle;不叫？

Answer 1

如果你做Rectangle.prototype = Shape.prototype那麼你將在Rectangle.prototoype上執行的任何修改將反映在Shape.prototype上，因爲它們是相同的對象。

爲了避免這種情況，我們使用Object.create(Shape.prototype)創建一個新對象，該對象的原型鏈接指向Shape.prototype。

至於Rectangle.prototype.constructor = Rectangle;，這是爲了確保new Shape().constructor指向Rectangle而不是Shape。

函數的原生prototype具有指向該函數的constructor屬性。

例如

function Rectangle() {} 

Rectangle.prototype.constructor === Rectangle; //true 

現在，當我們做Rectangle.prototype = ...，我們打破參考，並需要事後修復。

Answer 2

如果您只是將Rectangle.prototype設置爲Shape.prototype，那麼Rectangle和Shape將與原型共享同一個對象。這意味着，您添加到Rectangle.prototype的所有內容也可在Shape.prototype上獲得 - Rectangle將不再繼承自Shape。

Object.create(parent)創建一個從傳入的父對象繼承的子對象。這樣，父對象的所有屬性也可用於子對象，而子對象的屬性不會影響父對象。

要回答你的問題（「爲什麼我們需要在JavaScript中定義構造函數？」） - 我們不需要。您也可以使用普通對象：

// Shape - superclass 
function Shape() { 
    return { 
    x: 0, 
    y: 0, 
    // superclass method 
    move: function(x, y) { 
     this.x += x; 
     this.y += y; 
     console.info('Shape moved.'); 
    } 
    }; 
} 

// Rectangle - subclass 
function Rectangle() { 
    var rectangle = Shape(); 
    // rectangle-specific things could be added here 
    return rectangle; 
} 

var rect = Rectangle(); 

rect instanceof Rectangle; // false, instanceof does not work here 
rect instanceof Shape; // false 

rect.move(1, 1); // Outputs, 'Shape moved.'