在显示模块化模式对象上创建继承

Question

我正在尝试在对象之间创建某种继承：

var foo = (function(){

    function doFooStuff(){
        console.log(arguments.callee.name);
    }

    return {
        doFooStuff: doFooStuff
    }

})();

var bar = (function(){

    $.extend(this, foo);

    function doBarStuff(){
        console.log(arguments.callee.name);
        doFooStuff();
    }

    return {
        doBarStuff: doBarStuff,
    }

})();

bar.doBarStuff();
bar.doFooStuff(); //<-- Uncaught TypeError: 
                  //Object #<Object> has no method 'doFooStuff' 

http://jsfiddle.net/wRXTv/

为什么这里不能访问doFooStuff？您会推荐使用 $.extend 以外的其他方法吗？

Answer 1

$.extend(this, foo);

this 不是您从下面的函数返回的对象（事实上它不可能是，因为它是在此调用之后创建的），而是全局对象 - 检查 MDN's introduction to the this keyword。

对于你想做的，有两种方法：

• Copy all properties 从foo 到您的bar 对象创建后：

  var bar = (function() {
      …
      return {…};
  })();
  $.extend(bar, foo);
  

  您也可以直接在返回的对象上执行此操作：

      return $.extend({…}, foo);
  

  此模式的一个变体允许您覆盖foo 属性。将foo 复制到一个空对象中，然后将您的bar 属性写入其中：

      return $.extend({}, foo, {…});
  

• 使用原型继承。 Create 一个从foo 继承其属性的对象，然后将您的bar 属性写入它：

      return $.extend(Object.create(foo), {…});
  

  现在，当foo 之后发生更改时，您仍然可以访问bar 上的这些新属性（除非它们被自己的属性所遮蔽）。请注意，旧环境中可能不支持 Object.create，但您可以轻松地对其进行填充。

---

正如@raina77ow 所指出的，您的doBarStuff 函数也存在缺陷。 doFooStuff 函数不在您的函数范围内，您无法更改它。您将永远无法从 foo 模块访问私有声明的函数和变量，只能访问那些是公共的 - 如果您确实需要它们，请考虑不同的模式或应用程序设计。但是，doFooStuff 是导出的（公共）foo 对象上的一个属性，bar 继承自该对象（不管上述哪种方式）。因此，您也可以将其作为bar 的方法访问，通常使用this.doFooStuff()。

Answer 2

您尝试使用显示模块，就好像它是构造函数一样。因此尝试扩展this，由于许多原因是错误的。我想，最明显的是，该函数既没有用作构造函数（没有new），也没有改变它的上下文。简单来说，this 在这里只是指向一个全局对象。

但这不是唯一的问题。考虑一下你的那部分代码：

function doBarStuff(){
  console.log(arguments.callee.name);
  doFooStuff();
}

即使您设法扩展了this，这里的doFooStuff 也不在范围内。 ) 请记住，范围解析不涉及上下文对象。

那么解决办法是什么？好吧，我经常在类似的情况下使用聚合：

var foo = (function(){
    function doFooStuff(){
        console.log(arguments.callee.name);
    }
    return {
        doFooStuff: doFooStuff
    }
})();

var bar = (function(){
    var _super = foo;
    function doBarStuff(){
        console.log(arguments.callee.name);
        _super.doFooStuff();
    }
    // static parent: further changes on `foo` won't affect `bar`,
    // as $.extend takes the parent's current state
    return $.extend({}, _super, {
        doBarStuff: doBarStuff,
    });
    // dynamic parent: further changes on `foo` will affect `bar`,
    // as extended object now has `foo` in its prototype chain
    return $.extend(Object.create(_super), {
        doBarStuff: doBarStuff,
    });
})();

JS Fiddle.

是的，它是聚合，而不是继承。但那又怎样？我仍然能够获得主要奖励 - 删除代码重复并且我能够控制子模块中父函数的使用。

Answer 3

您的代码的问题在于 $.extend(this,foo) 中的 this 指的是 window 对象，而 不是 foo。匿名函数在窗口的上下文中运行。

我建议在 javascript 中使用 John Resig 实现经典继承。 http://ejohn.org/blog/simple-javascript-inheritance/.

摘录：

var Person = Class.extend({
 init: function(isDancing){
 this.dancing = isDancing;
 },
dance: function(){
 return this.dancing;
 }
});

var Ninja = Person.extend({
 init: function(){
  this._super( false );
 },
dance: function(){
 // Call the inherited version of dance()
 return this._super();
},
 swingSword: function(){
  return true;
 }
});

var p = new Person(true);
p.dance(); // => true

var n = new Ninja();
n.dance(); // => false
n.swingSword(); // => true

// Should all be true
p instanceof Person && p instanceof Class &&
n instanceof Ninja && n instanceof Person && n instanceof Class

Answer 4

这是因为这是一个匿名函数。这部分你的函数减速：

   var foo = (function(){

    function doFooStuff(){
        console.log(arguments.callee.name);
    }

    return {

        doFooStuff: doFooStuff
      }

   })();

您是否看到您正在立即调用此函数调用并且最终无法在您的 return 语句中访问 doFooStuff。

如果你去掉匿名函数减速，它会起作用。