为什么我们需要在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.'