如何創建一個不使用ES6類從Object.prototype繼承的類？

Question

我可以使用舊語法創建一個不從Object.prototype繼承的類。

 function Shape(x, y, width, height) { this.x = x, this.y = y, this.width = width, this.height = height; } Shape.prototype = Object.create(null, { constructor: { configurable: true, writable: true, value: Shape }, move: { configurable: true, writable: true, value: function (x, y) { this.x += x, this.y += y; } } }); var rect = new Shape(0, 0, 4, 2); console.log(Object.getPrototypeOf(rect) === Shape.prototype); console.log(Object.getPrototypeOf(Object.getPrototypeOf(rect)) !== Object.prototype); //inheritance 

我怎樣才能使用ES6課程？

 class Shape { constructor(x, y, width, height) { this.x = x, this.y = y, this.width = width, this.height = height; } move(x, y) { this.x += x, this.y += y; } } var rect = new Shape(0, 0, 4, 2); console.log(Object.getPrototypeOf(rect) === Shape.prototype); console.log(Object.getPrototypeOf(Object.getPrototypeOf(rect)) === Object.prototype); // inheritance 

Answer 1

您可以使用extends null 。

請注意，類本身仍將繼承自Function.prototype ，而不是null 。 因此，您將能夠在類上使用函數方法。

但要注意的是，當使用extends條款，則必須初始化this使用它通過調用之前super ，還是不要用this ，並在年底返回一個對象。

在這種情況下，您無法使用super初始化this因為Function.prototype不是構造函數。 因此，您必須使用Object.create來創建將成為實例的對象。

 class Shape extends null { constructor(x, y) { // Use `that` instead of `this`, and return it at the end var that = Object.create(new.target.prototype); that.x = x; that.y = y; return that; } move(x, y) { this.x += x; this.y += y; } } var rect = new Shape(0, 0); console.log(rect); console.log(Object.getPrototypeOf(rect) === Shape.prototype); console.log(Object.getPrototypeOf(Shape.prototype) === null); console.log(Object.getPrototypeOf(Shape) === Function.prototype); 

new.target將是正在實例化的函數。 這可以是Shape本身，也可以是擴展它的另一個函數。 這對於允許Shape可擴展非常有用。

 class Shape extends null { constructor(x, y) { // Use `that` instead of `this`, and return it at the end var that = Object.create(new.target.prototype); that.x = x; that.y = y; return that; } move(x, y) { this.x += x; this.y += y; } } class BestShape extends Shape { constructor(...args) { super(...args); this.best = true; } } var rect = new BestShape(0, 0); console.log(rect); console.log(Object.getPrototypeOf(rect) === BestShape.prototype); console.log(Object.getPrototypeOf(BestShape.prototype) === Shape.prototype); console.log(Object.getPrototypeOf(Shape.prototype) === null); console.log(Object.getPrototypeOf(BestShape) === Shape); console.log(Object.getPrototypeOf(Shape) === Function.prototype); 

如果您不想避免在構造函數中使用this ，則另一種方法是擴展其prototype為null的函數。 缺點是您的類將繼承該函數，而不是直接從Function.prototype繼承。

 function NullClass() {} NullClass.prototype = null; class Shape extends NullClass { constructor(x, y) { super(); this.x = x; this.y = y; } move(x, y) { this.x += x; this.y += y; } } var rect = new Shape(0, 0); console.log(rect); console.log(Object.getPrototypeOf(rect) === Shape.prototype); console.log(Object.getPrototypeOf(Shape.prototype) === null); console.log(Object.getPrototypeOf(Shape) === NullClass); console.log(Object.getPrototypeOf(NullClass) === Function.prototype); 

如果您不想重用NullClass ，則可NullClass聯定義它

class Shape extends Object.assign(function(){},{prototype:null}) { /* ... */ }

Answer 2

您必須手動將Shape.prototype的原型設置為null 。

 class Shape { constructor(x, y, width, height) { this.x = x, this.y = y, this.width = width, this.height = height; } move(x, y) { this.x += x, this.y += y; } } // This is the key line. Object.setPrototypeOf(Shape.prototype, null); const rect = new Shape(0, 0, 4, 2); console.log(Object.getPrototypeOf(rect) === Shape.prototype); console.log(Object.getPrototypeOf(Object.getPrototypeOf(rect)) !== Object.prototype);