Javascript 原型继承场景中的jquery绑定/触发器。Can'；t在正确的对象上触发事件

我正在尝试在继承场景中使用bind/trigger。以下是我得到的：

  var MyApp = {};

  MyApp.GrandParent = function (){
      var self = Object.create({}), $self = $(self);

      self.doFoo = function(){
          console.log('Just to asure we can call from child to grandparent');
          $(this).trigger('Happened');
          //$self.trigger('Happened'); //Why doesn't it work this way
      };

      return self;
  }

  MyApp.Parent = function(){
      var self = Object.create(MyApp.GrandParent()), $self = $(self);

      self.doSomething = function(){
          console.log('Just to asure we can call from child to parent');
          $(this).trigger('SomethingHappened');
          //$self.trigger('SomethingHappened'); //Why doesn't it work this way
      };

      return self;
  }

  MyApp.Child = function(){
      var self = Object.create(MyApp.Parent()), $self = $(self);

      $self.bind('SomethingHappened', function(){
          console.log('Client logs: SomethingHappened');
      });

      $self.bind('Happened', function(){
          console.log('Client logs: Happened');
      });

      return self;        
  }

  var foo = new MyApp.Child();
  foo.doSomething();
  foo.doFoo();

工作示例：

正如你所看到的，我们有一个从祖父母到孩子的遗传链。它起作用了。但是，我不明白为什么不能触发$self对象上的事件。用$（这个）来炒掉他们感觉是不对的

我想要归档的是保持原型链工作并在$self对象上触发事件。我想我可能需要使用$.proxy之类的东西，但我真的不知道

---

我知道我也可以这样做，但我更愿意让原型链继续工作…

我认为问题出在你的

对象上。create（）

方法：self！==这看起来self被用作正在创建的实例的原型，而实际上并不是正在返回的同一个实例

看起来这就是发生在孩子身上的事情：

MyApp.GrandParent（）

返回

GrandParent

的一个实例——我们将其称为

a

a

的字段和函数用于发布

Parent

的新实例——我们称之为

b

b

的字段和函数用于发布

Child

--

c

的新实例 因此，

MyApp.GrandParent.doFoo

中的

$self

引用实际上是对原始对象

a

的引用，而

this

是对当前对象

c

的引用。这就是为什么

$（this.trigger（…）

有效而

$self.trigger（…）

无效的原因

---

在这本小册子中，我编写了

Object.create（…）

函数来简单地返回给定的实例，

$self.trigger（…）

工作。

我认为问题出在

Object.create（）

方法：self！==这看起来self被用作正在创建的实例的原型，而实际上并不是正在返回的同一个实例

看起来这就是发生在孩子身上的事情：

MyApp.GrandParent（）

返回

GrandParent

的一个实例——我们将其称为

a

a

的字段和函数用于发布

Parent

的新实例——我们称之为

b

b

的字段和函数用于发布

Child

--

c

的新实例 因此，

MyApp.GrandParent.doFoo

中的

$self

引用实际上是对原始对象

a

的引用，而

this

是对当前对象

c

的引用。这就是为什么

$（this.trigger（…）

有效而

$self.trigger（…）

无效的原因

---

在这篇文章中，我编写了

Object.create（…）

函数来简单地返回给定的实例，

$self.trigger（…）

可以工作。

Andy Edinborough关于var

self！=这是

看起来您希望在对象实例周围存储对jQuery包装器的引用，因此我使用了（避免在对象实例上创建属性来存储jQuery包装器）。你可以在James Padolsey的网站上了解更多

我还清理了您的代码：

(function(window) {

  var flyweight = $([1]);

  /*--------------------------------------------------------------------------*/

  function GrandParent() {
    /* empty constructor */
  }

  function Parent() {
    /* empty constructor */
  }

  function Child() {
    flyweight[0] = this;
    flyweight.bind('SomethingHappened', function(){
      console.log('Client logs: SomethingHappened');
    })
    .bind('Happened', function(){
      console.log('Client logs: Happened');
    });
  }

  /*--------------------------------------------------------------------------*/

  // setup inheritance
  Parent.prototype = Object.create(GrandParent.prototype, {
    'constructor': {
      'configurable': true,
      'writable': true,
      'value': Parent
     }
  });

  Child.prototype = Object.create(Parent.prototype, {
    'constructor': {
      'configurable': true,
      'writable': true,
      'value': Child
     }
  }); 

  // add methods
  GrandParent.prototype.doFoo = function(){
    flyweight[0] = this;
    flyweight.trigger('Happened');
  };

  Parent.prototype.doSomething = function(){
    flyweight[0] = this;
    flyweight.trigger('SomethingHappened');
  };

  /*--------------------------------------------------------------------------*/

  // expose
  window.MyApp = {
    'GrandParent': GrandParent,
    'Parent': Parent,
    'Child': Child
  };
}(this));

使用检查：

var foo = new MyApp.Child;
var bar = new MyApp.Child;

$(bar).bind('SomethingElse', function() {
  console.log('Client logs: SomethingElse');
});

foo.doFoo(); // Client logs: Happened
foo.doSomething(); // Client logs: SomethingHappened

$(bar).trigger('SomethingElse'); // Client logs: SomethingElse
$(foo).trigger('SomethingElse'); // Nothing happens \o/

---

Andy Edinborough关于var

self！=这是

看起来您希望在对象实例周围存储对jQuery包装器的引用，因此我使用了（避免在对象实例上创建属性来存储jQuery包装器）。你可以在James Padolsey的网站上了解更多

我还清理了您的代码：

(function(window) {

  var flyweight = $([1]);

  /*--------------------------------------------------------------------------*/

  function GrandParent() {
    /* empty constructor */
  }

  function Parent() {
    /* empty constructor */
  }

  function Child() {
    flyweight[0] = this;
    flyweight.bind('SomethingHappened', function(){
      console.log('Client logs: SomethingHappened');
    })
    .bind('Happened', function(){
      console.log('Client logs: Happened');
    });
  }

  /*--------------------------------------------------------------------------*/

  // setup inheritance
  Parent.prototype = Object.create(GrandParent.prototype, {
    'constructor': {
      'configurable': true,
      'writable': true,
      'value': Parent
     }
  });

  Child.prototype = Object.create(Parent.prototype, {
    'constructor': {
      'configurable': true,
      'writable': true,
      'value': Child
     }
  }); 

  // add methods
  GrandParent.prototype.doFoo = function(){
    flyweight[0] = this;
    flyweight.trigger('Happened');
  };

  Parent.prototype.doSomething = function(){
    flyweight[0] = this;
    flyweight.trigger('SomethingHappened');
  };

  /*--------------------------------------------------------------------------*/

  // expose
  window.MyApp = {
    'GrandParent': GrandParent,
    'Parent': Parent,
    'Child': Child
  };
}(this));

使用检查：

var foo = new MyApp.Child;
var bar = new MyApp.Child;

$(bar).bind('SomethingElse', function() {
  console.log('Client logs: SomethingElse');
});

foo.doFoo(); // Client logs: Happened
foo.doSomething(); // Client logs: SomethingHappened

$(bar).trigger('SomethingElse'); // Client logs: SomethingElse
$(foo).trigger('SomethingElse'); // Nothing happens \o/

---

这也适用于：。这可能更清楚，因为没有对象引用可以混淆。嗨，安迪，谢谢你的回答。但是，这让我很不满意；-）您的第一个示例被认为是丑陋的（注意：这里没有个人批评家！），这也是我们在ECMA5中使用Object.create（）的原因。请看一下幻灯片16ff：您的第二个示例实际上打破了继承链，因此，如果您检查它，您会注意到所有方法碰巧都在同一个对象上实现：-（我为我对ECMA5的无知表示歉意。：]我发现这篇文章很有帮助：它也很有用：。它可能更清楚，因为没有对象引用可以混淆。嗨，安迪，谢谢你的回答。但是，这让我很不满意；-）你的第一个例子被认为是丑陋的（注意：这里没有个人批评家！）首先，我们在ECMA5中使用Object.create（）的原因。请看一下幻灯片16ff：您的第二个示例实际上打破了继承链，因此，如果您检查它，您会注意到所有方法碰巧都在同一个对象上实现：-（我为我对ECMA5的无知感到抱歉。：]我发现这篇文章很有帮助：嗨，约翰，非常感谢你花时间回答。但是，我仍然不满意；-）你看了幻灯片16ff了吗？我宁愿避免先编写构造函数，然后再实现方法，从而使对象变得杂乱无章。第二件事。我不想在对象范围之外创建的对象之间共享flyweight变量。我宁愿让它像这样，它服务于一切，但原型链。但我宁愿放弃，我想…我实际上不确定我到底需要什么样的原型链？这些物体一定有很多。我能找到的唯一区别是所有方法都将在子实例上实现。除此之外，一切都很好。如果需要，甚至可以扩展基本方法。所以我想知道我到底关心什么原型链？我不认为使用构造函数是“丑陋的”。我展示了一个干净的使用方法