0

基本的に、私はオブジェクトを持っています：

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を作成し、それにクリックハンドラーをアタッチして、何かにホチキス止めします。インスタンス化されると、名前と所有者の2つのパラメーターが渡されます。所有者は別のオブジェクトへの参照です。

このコードには2つの問題があります。

  1. squish関数のこの参照は、クリックされた要素を参照しているため、壊れています。
  2. 連鎖しているため、実際にイベントをアタッチする場合、「this」はjQueryまたは新しく作成されたdiv要素（どちらかはまだわかりません）のいずれかを指します。したがって、this.squishは未定義であり、呼び出されることはありません。

それが何らかの形で役立つ場合、所有者オブジェクトにはすべてのトマトへの参照があります。

4

4 に答える 4

1

これを試して：

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);
于 2011-04-14T17:04:51.853 に答える
1

割り当ての後に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);

}
于 2011-04-14T17:05:38.720 に答える
1

さて、あなたがやりたいことをする最も簡単な方法は、次のようにトマトオブジェクトへの参照を格納するローカル変数を作成することです。

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;
  };
}
于 2011-04-14T17:05:40.577 に答える
1

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);

}
于 2011-04-14T17:06:10.593 に答える