javascript-objects - jQuery OO 事件绑定

Question

基本上，我有一个对象：

function tomatoe(name, owner) {
    $('<div>').click(this.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name);

    this.name = name;
    this.dead = false;
    this.owner = owner;
    this.squish = function() {
        console.log('Oh my Google, you killed ' + this.name + '!');
        this.dead = true;
        this.owner.sad = true;
    };
}

该功能非常简单。实例化后，创建一个 div，将一个点击处理程序附加到它，然后将它装订到某个东西上。在实例化时，传递了两个参数：名称和所有者。所有者是对另一个对象的引用。

这段代码有两个问题：

squish 函数中的 this 引用被破坏，因为它现在引用了单击的元素。
由于链接，当实际附加事件时，“this”指的是 jQuery 或新创建的 div 元素（还不确定哪个），所以 this.squish 是未定义的并且从未调用过。

如果它有任何帮助，则所有者对象具有对所有西红柿的引用。

score 1 · Accepted Answer

尝试这个：

function tomatoe(name, owner) {

    //make a reference to this with self
    var self = this;

    $('<div>').click(self.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name);

    this.name = name;
    this.dead = false;
    this.owner = owner;
    this.squish = function() {
        console.log('Oh my Google, you killed ' + this.name + '!');
        this.dead = true;
        this.owner.sad = true;
    };
}

如果你想要 chanability 我会怎么做：

var tomato = {
     name: null,
     dead: null,
     owner: null,

     init: function(name, owner){
          var self = this;
          $('<div>').click(self.squish)
                .appendTo(myElement).text('I\'m a happy tomatoe called ' + name);
          this.name = name;
          this.dead = false;
          this.owner = owner;
          return this;
     },

     squish: function(){
          console.log('Oh my Google, you killed ' + this.name + '!');
          this.dead = true;
          this.owner.sad = true;
          return this;
     }

}

//to instantiate it:
tomato.init(name, owner);

score 1 · Accepted Answer

您想重新分配this给另一个变量，以便命名不会发生冲突。在实例化所有变量后创建 div 也是一个好主意。

function tomatoe(name, owner) {
    var that = this;

    that.name = name;
    that.dead = false;
    that.owner = owner;
    that.squish = function() {
        console.log('Oh my Google, you killed ' + that.name + '!');
        that.dead = true;
        that.owner.sad = true;
    };

    $('<div>').click(that.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name);

}

score 1 · Accepted Answer

你必须在赋值之后放置 jQuery 行！this.squish在您为其赋值之前，它显然是未定义的。

function tomatoe(name, owner) {  

    var that = this;

    this.name = name;
    this.dead = false;
    this.owner = owner;
    this.squish = function() {
        console.log('Oh my Google, you killed ' + that.name + '!');
        that.dead = true;
        that.owner.sad = true;
    };

    $('<div>').click(this.squish).appendTo(myElement)
              .text('I\'m a happy tomatoe called ' + name);

}

score 1 · Accepted Answer

好吧，做你想做的最简单的方法是创建一个局部变量来存储对tomatoe对象的引用，如下所示：

function tomatoe(name, owner) {
  var _this = this;
  $('<div>').click(this.squish).appendTo(myElement).text('I\'m a happy tomatoe called ' + name);

  this.name = name;
  this.dead = false;
  this.owner = owner;
  this.squish = function() {
    console.log('Oh my Google, you killed ' + _this.name + '!');
    _this.dead = true;
    _this.owner.sad = true;
  };
}

javascript-objects - jQuery OO 事件绑定

4 回答 4

Related

Reference