javascript - 使用原型(prototype)的 Class 接口(interface)进行类继承

Question

我正在使用原型(prototype)的独立类继承:https://github.com/Jakobo/PTClass

我有以下类(class):

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 for my yo class。

如何正确继承我的 hello 类？

Answer 1

问题是 yo 的 initializer 没有传递您传递给父类(super class)的参数:

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

因此，hello 的 initialize 函数中的代码尝试从 args 读取 name 属性，但args是未定义。因此出现错误。

更新的工作示例:

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>

<小时/>

关于我对这个问题的评论，这是一个不使用 PrototypeJS 的 ES2015+ 版本:

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 定义一个构造函数，因为它不执行任何操作。 JavaScript 引擎将为我们创建一个，如下所示:

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