使用 Object.create() 的对象创建模式

Question

我一直在弄清楚如何在使用 Object.create() 而不是传统的构造函数时进行多级继承。我打开了一个小提琴 here 。

我们有两种类型的对象，程序员和“子类”前端开发人员。程序员继承自程序员原型对象，正如您所见，所有程序员都可能很尴尬。

var programmerProto = Object.create(Object.prototype,{    
   beAwkward: {value: function(){
          return "Yeah I uhh, AHEM, *shuffles feet*";
   }
  }    
});

function programmerFactory (name, age, neckbeard){
  return Object.create(programmerProto, {
    name: {writable: true, enumerable: true, value: name},
    age: {writable: false, enumerable: true, value: age},
    neckbeard: {writable: true, enumerable: true, value: neckbeard}
  });
}

现在对于前端开发人员来说，他们有自己的共同特征，所以我们需要一个新的原型对象。但是，前端开发者也是程序员，所以我们制作前端原型对象如下：

 var frontEndProto = Object.create(programmerProto, {
   beSmooth: {
     value: function(){
                 return "Excuse me ma'am, could I interest you in a, fish sandwich?";
             }        
 },
   preferredLanguage: {writable: true, enumerable: true, value: 'JS'}
});

现在我们遇到了问题。我想使用工厂方法来创建前端开发人员的实例，所以我可以添加一些前端特定的属性，比如“CSS3_skillz”之类的。但是如果我使用 Object.create(frontEndProto, "...")，那 ... 将是我已经在programmerFactoryFunction 中编写的所有代码。如果我从frontEndFactory 中调用programmerFactory，则返回对象的原型是programmerProto 而不是frontEndProto。处理这个问题的正确方法是什么？

Answer 1

我认为您在继承链和Object.defineProperty() 样式属性的使用上有点过火了。

除非您有充分的理由需要像instanceof 这样的东西，否则您可以只使用.extend() 函数来实现您的继承。我正在使用下面的下划线/lodash _.extend() 函数，但您几乎可以使用它的任何实现：

var programmerProto = {    
    beAwkward: function(){
        return "Yeah I uhh, AHEM, *shuffles feet*";
    }
};

function programmerFactory (name, age, neckbeard){
    return _.extend({
        name: name,
        age: age,
        neckbeard: neckbeard
    }, programmerProto);
}

var frontEndProto = {
    beSmooth: function(){
        return "Excuse me ma'am, could I interest you in a, fish sandwich?";
    },
    preferredLanguage: 'JS'
};

function frontEndFactory(name, age, css3Skillz) {
    return _.extend(programmerFactory(name, age, true), {
        css3Skillz: css3Skills
    }, frontEndProto);
}

我觉得这个话题的演讲还不错：
http://www.youtube.com/watch?v=PV_cFx29Xz0&t=28m57s

Answer 2

您的问题的解决方案在于将一个对象的属性附加到另一个对象，这在这里很有用。

首先，我使用的append函数——

var appendObject = function(obj, toAppend) { 
    Object.keys(toAppend).forEach(function(el) { 
        Object.defineProperty(obj, el, Object.getOwnPropertyDescriptor(toAppend,el)); 
    }); 
    return obj; 
}

这样做非常简单——它遍历toAppend 的属性并使用它们的属性描述符来定义obj 上的新属性。它正在变异obj，但也会返回它，因此您可以在需要时将其链接起来。

有了这个函数，你可以让他们像这样实现frontEndDevFactory -

function frontEndDevFactory (name, age, pullupCount, rockStar){
    var programmer = programmerFactory(name, age); 
    var newDev = Object.create(frontEndProto, {
        pullupCount: {writable: true, enumerable: true, value: pullupCount},
        rockStar: {writable: false, enumerable: true, value: rockStar}
    }); 
    appendObject(newDev, programmer); 
    return newDev; 
}

这是一个 fiddle 修改您的代码来演示这一点。