在JavaScript中擴展/重寫？

Question

我想寫一個使用JavaScript和<canvas>的小遊戲，但首先我想指出「正確的」或至少通用的方法來處理對象。

我很難理解的一個話題是如何實現方法的overriding。

當我創建一個對象，我可能有這樣的：

function MyObject() 
{ 
    var base = {}; 

    base.i = 0; 
    base.update = function() 
    { 
     base.i ++; 
    } 

    return base; 
} 

後來，當我創建一個應該具有相同的成員開始另一個對象，我用這個：

function AnotherObject() 
{ 
    var base = new MyObject(); 

    base.j = 0; 

    return base; 
} 

我想添加更多的內容到AnotherObject.update()，同時仍然運行我在MyObject.update()中的邏輯，但是當我在AnotherObject()內執行此操作時：

base.update = function() 
{ 
    j ++; 
} 

然後，我當然失去了我在MyObject.update()增加的邏輯。

我該如何寫AnotherObject.update()以便它也調用MyObject定義的原始update()方法？

Answer 1

首先，我建議你閱讀這個優秀的excellent MDN article。它會啓發你。

可以實現繼承這樣：

function MyObject() { 
    this.i = 0; 
} 

MyObject.prototype.update = function() { 
    this.i++; 
} 

function AnotherObject() { 
    MyObject.call(this); 
    this.j = 0; 
} 

AnotherObject.prototype = new MyObject; 

AnotherObject.prototype.constructor = AnotherObject; 

AnotherObject.prototype.update = function() { 
    MyObject.prototype.update.call(this); 
    this.j++; 
} 

obj = new AnotherObject(); 
console.log(obj.i); //0 
console.log(obj.j); //0 

obj.update(); 
console.log(obj.i); //1 
console.log(obj.j); //1 

console.log(obj instanceof MyObject) //true 
console.log(obj instanceof AnotherObject) //true 

Answer 2

+1對zzzzBov的評論。當您應該使用prototype時，您正在使用base。不在構造函數中，而是在構造函數之後進一步優化類定義。

Answer 3

function MyObject() { 
    this.value = 5; 
} 
MyObject.prototype.update = function() { 
    this.value++; 
} 
Var newObject = new MyObject(); 
newObject.update =function() { 
    value--; 
} 

Answer 4

正如其他人所建議你應遵循基於原型的繼承。這是做到這一點的正確方法。

但作爲一個解決方案，你已經完成的工作，你可以做如下

function MyObject() { 
    var base = {}; 
    base.i = 0; 
    base.update = function() { 
     this.i++; 
    } 
    base.show = function() { 
     console.log("i is " + this.i); 
    } 
    return base; 
} 

function AnotherObject() { 
    var base = new MyObject(); 
    base.j = 0; 
    var update = base.update; // proxy variable that refers to original `update` 
    base.update = function() { 
     update.call(this); // invoke original `update` 
     this.j++; 
    } 
    var show = base.show; // proxy variable that refers to original `show` 
    base.show = function() { 
     show.call(this); // invoke original `show` 
     console.log("j is " + this.j); 
    } 
    return base; 
} 

var t = AnotherObject(); 
t.update(); 
t.show();