類的繼承與原型的類接口

Question

我使用原型的獨立的類繼承：https://github.com/Jakobo/PTClass

和我有以下類：

App.hello = Class.create({ 

    initialize: function(args) { 
     this.name = args.name 
    }, 

    sayHello: function() { 
     console.log('Hello, ' + this.name); 
    }, 

    sayGoodbye: function() { 
     console.log('Goodbye, ' + this.name); 
    } 

}); 

App.yo = Class.create(App.hello, { 

    initialize: function($super) { 
     $super(); 
    }, 

    sayHello: function() { 
     console.log('Yo, ' + this.name); 
    } 

}); 

凡想法是，yo將從hello繼承並覆蓋其sayHello方法。但也可以在其父類中調用sayGoodbye方法。

所以我打電話給他們，像這樣：

var test = new App.hello({name: 'Cameron'}); 
    test.sayHello(); 
    test.sayGoodbye(); 
var test2 = new App.yo({name: 'Cameron'}); 
    test2.sayHello(); 
    test2.sayGoodbye(); 

但是我得到的錯誤Uncaught TypeError: Cannot read property 'name' of undefined我yo類。

我該如何正確繼承我的hello類？

Answer 1

的問題是，yo的initializer不傳遞參數，你把它傳遞給超：

initialize: function($super, args) { // *** 
    $super(args);     // *** 
}, 

因此，在hello代碼的initialize函數試圖從閱讀name財產args，但是args是undefined。因此錯誤。

更新工作示例：

var App = {}; 
 

 
App.hello = Class.create({ 
 

 
    initialize: function(args) { 
 
     this.name = args.name 
 
    }, 
 

 
    sayHello: function() { 
 
     console.log('Hello, ' + this.name); 
 
    }, 
 

 
    sayGoodbye: function() { 
 
     console.log('Goodbye, ' + this.name); 
 
    } 
 

 
}); 
 

 
App.yo = Class.create(App.hello, { 
 

 
    initialize: function($super, args) { 
 
     $super(args); 
 
    }, 
 

 
    sayHello: function() { 
 
     console.log('Yo, ' + this.name); 
 
    } 
 

 
}); 
 

 
var test = new App.hello({name: 'Cameron'}); 
 
    test.sayHello(); 
 
    test.sayGoodbye(); 
 
var test2 = new App.yo({name: 'Cameron'}); 
 
    test2.sayHello(); 
 
    test2.sayGoodbye();

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.min.js"></script>

---

和關於我對這個問題的評論，這裏是一個ES2015 +版本不使用PrototypeJS：

const App = {}; 
 

 
App.hello = class { 
 
    constructor(args) { 
 
     this.name = args.name 
 
    } 
 

 
    sayHello() { 
 
     console.log('Hello, ' + this.name); 
 
    } 
 

 
    sayGoodbye() { 
 
     console.log('Goodbye, ' + this.name); 
 
    } 
 
}; 
 

 
App.yo = class extends App.hello { 
 
    sayHello() { 
 
     console.log('Yo, ' + this.name); 
 
    } 
 
}; 
 

 
const test = new App.hello({name: 'Cameron'}); 
 
     test.sayHello(); 
 
     test.sayGoodbye(); 
 
const test2 = new App.yo({name: 'Cameron'}); 
 
     test2.sayHello(); 
 
     test2.sayGoodbye();

請注意，我們根本不需要爲yo定義constructor，因爲它什麼都不做。 JavaScript引擎將創造一個對我們來說，這看起來是這樣的：

constructor(...allArguments) { 
    super(...allArguments); 
}