JavaScript 多級繼承和 isPrototypeOf

Question

我在 JavaScript 中實現了多級繼承，如下所示

function MovingObject(){

}

function Vehicle(){

}
Vehicle.prototype = Object.create(MovingObject);

function Car(){

}
Car.prototype = Object.create(Vehicle);

var c = new Car();

Car 是 Vehicle 的孩子，而 Vehicle 又是MovingObject 的孩子，所以我希望Car 是MovingObject 的間接孩子。

下面的語句返回 true 表示 Car 是 Vehicle 的直接子代

Vehicle.isPrototypeOf(c);

但是，下面的語句不返回 true

MovingObject.isPrototypeOf(c);

知道為什么它不返回 true ，以及如何讓它返回 true嗎？

Answer 1

這是 JavaScript 的一個常見問題。

MovingObject或Vehicle是構造函數，但它們不是原型。

也就是說，你應該得到使用Object.create(ConstructorFunction.prototype)而不是僅僅ConstructorFunction 。

在 JavaScript 中，即使函數也是對象，這就是為什么Object.create(...)在您提供構造函數時起作用的原因。 結果對象將具有構造函數對象作為原型。

實際上，您既可以使用Object.create(ConstructorFunction.prototype)方法，也可以使用new實現相同的目標：

Vehicle.prototype = new MovingObject();

new方法的主要問題是您正在使用構造函數創建一個新對象，並且您可能正在向原型添加不需要的數據和行為：

 function MovingObject() { this.x = 11; } function Vehicle() {} Vehicle.prototype = new MovingObject(); var instance = Object.create(Vehicle.prototype); // What? instance has "x" property!! document.getElementById("result").textContent = instance.x;

 <div id="result"></div>

更新

OP 在一些評論中說：

這是否意味着我們不能在這里建立真正的汽車和移動對象之間的 is-a 關系？ 如果是，我們如何使用代碼對其進行測試？ 意思是，只有當 Car 是一個移動對象時，我才想執行一些代碼。 我怎樣才能達到測試？

檢查並執行以下代碼片段以更清楚：

 function A() {} function B() {} B.prototype = Object.create(A.prototype); function C() {} C.prototype = Object.create(B.prototype); var instanceOfB = Object.create(B.prototype); var instanceOfC = Object.create(C.prototype); var result1 = A.prototype.isPrototypeOf(instanceOfC); var result2 = B.prototype.isPrototypeOf(instanceOfC); var result3 = A.prototype.isPrototypeOf(instanceOfB); document.getElementById("result1").textContent = result1; document.getElementById("result2").textContent = result2; document.getElementById("result3").textContent = result3;

 <h2>A is prototype of instanceOfC?</h2> <div id="result1"></div> <h2>B is prototype of instanceOfC?</h2> <div id="result2"></div> <h2>A is prototype of instanceOfB?</h2> <div id="result3"></div>

更新 2

正如@RobertRossmann 對此答案所評論的那樣，可以使用instanceof運算符實現相同的代碼片段，該運算符具有附加值，可以檢查實例是否屬於提供構造函數的某個原型：

 function A() {} function B() {} B.prototype = Object.create(A.prototype); function C() {} C.prototype = Object.create(B.prototype); var instanceOfB = Object.create(B.prototype); var instanceOfC = Object.create(C.prototype); var result1 = instanceOfC instanceof B; var result2 = instanceOfC instanceof C; var result3 = instanceOfB instanceof A; var result4 = instanceOfC instanceof A; document.getElementById("result1").textContent = result1; document.getElementById("result2").textContent = result2; document.getElementById("result3").textContent = result3; document.getElementById("result4").textContent = result4;

 <div id="result1"></div> <div id="result2"></div> <div id="result3"></div> <div id="result4"></div>