javascript - 有趣的 JavaScript 继承模式

Question

我最近看了一个视频 Douglas Crockford正在解释 Javascript 的继承模式。该视频本身相当古老——拍摄于 6 年前——但仍然有用。在那段视频中，他展示了一种他发明的继承模式(尽管我不确定作者是谁)。这是使用他的方法的代码:

// imitation of new operator
function objectConstructor(obj, initializer, methods) {
    // create prototype
    var func, prototype = Object.create(obj && obj.prototype);
    // add methods to the prototype
    if(methods) Object.keys(methods).forEach(function(key) {
        prototype[key] = methods[key];
    });
    // function that will create objects with prototype defined above
    func = function() {
        var that = Object.create(prototype);
        if(typeof initializer === 'function') initializer.apply(that, arguments);
        return that;
    }
    
    func.prototype = prototype;
    prototype.constructor = func;
    return func;
}

var person = objectConstructor(Object, function(name) {
    this.name = name;
},  {
    showName: function() {
        console.log(this.name);
    }
});
var employee = objectConstructor(person, function(name, profession) {
    this.name = name;
    this.profession = profession;
},  {
    showProfession: function() {
        console.log(this.profession);
    }
});
var employeeInfo = employee('Mike', 'Driver');
employeeInfo.showName(); // Mike
employeeInfo.showProfession(); // Driver

不幸的是，他没有展示调用。那么，这部分

var employeeInfo = employee('Mike', 'Driver');
employeeInfo.showName();
employeeInfo.showProfession();

是我的。它通常有效，但事实证明我对两个“类” - person 和 employee 重复 this.name = name;。我玩了一下，但如果没有这种重复，我就无法让它正常工作。似乎我无法获取 name 因为这样的属性不包含在 employee 的原型(prototype)链中。我也没有成功地混合诸如 person.call(this, argument) 这样的东西。那么，除了 2017 年是否酷/好/聪明/明智等之外，我如何从 employee 中删除 this.name = name; 并获取相同的结果？或者一切都很好，但这种方法不认为如此？

Answer 1

这是您的代码片段，进行了 2 个小修改，以便您可以执行 super(name) 类型的调用。

我已经发表了评论，我已经做了修改..带有前缀keith:

// imitation of new operator
function objectConstructor(obj, initializer, methods) {
    // create prototype
    var func, prototype = Object.create(obj && obj.prototype);
    // add methods to the prototype
    if(methods) Object.keys(methods).forEach(function(key) {
        prototype[key] = methods[key];
    });
    // function that will create objects with prototype defined above
    func = function() {
        var that = Object.create(prototype);
        if(typeof initializer === 'function') initializer.apply(that, arguments);
        return that;
    }
    
    func.prototype = prototype;
    //keith: store the initialization in constructor,
    //keith: as func is already creating the object..
    prototype.constructor = initializer;
    return func;
}

var person = objectConstructor(Object, function(name) {
    this.name = name;
},  {
    showName: function() {
        console.log(this.name);
    }
});
var employee = objectConstructor(person, function(name, profession) {
    //keith: call our super  person(name)
    person.prototype.constructor.call(this, name);
    this.profession = profession;
},  {
    showProfession: function() {
        console.log(this.profession);
    }
});
var employeeInfo = employee('Mike', 'Driver');
employeeInfo.showName(); // Mike
employeeInfo.showProfession(); // Driver