1. ホーム
  2. javascript

[解決済み] var self = this?

2022-02-08 18:08:20

質問

イベントハンドラのコールバックとしてインスタンスメソッドを使用することで、以下のスコープが変更されます。 this から 私のインスタンス" から "今コールバックを呼び出したものは何でも" . だから、私のコードは次のようになります。

function MyObject() {
  this.doSomething = function() {
    ...
  }

  var self = this
  $('#foobar').bind('click', function(){
    self.doSomethng()
    // this.doSomething() would not work here
  })
}

動作はするのですが、その方法がベストなのでしょうか?私には不思議に見えます。

どのように解決するのですか?

この質問はjQueryに特化したものではなく、JavaScript全般に特化したものです。核心的な問題は、埋め込み関数で変数をどのように"channel"するかということです。これはその例です。

var abc = 1; // we want to use this variable in embedded functions

function xyz(){
  console.log(abc); // it is available here!
  function qwe(){
    console.log(abc); // it is available here too!
  }
  ...
};

このテクニックは、クロージャを使うことに依存しています。しかし、これは this なぜなら this は、スコープからスコープへ動的に変化する可能性のある擬似的な変数です。

// we want to use "this" variable in embedded functions

function xyz(){
  // "this" is different here!
  console.log(this); // not what we wanted!
  function qwe(){
    // "this" is different here too!
    console.log(this); // not what we wanted!
  }
  ...
};

どうすればいいのでしょうか?何らかの変数に代入して、エイリアスを介して使用します。

var abc = this; // we want to use this variable in embedded functions

function xyz(){
  // "this" is different here! --- but we don't care!
  console.log(abc); // now it is the right object!
  function qwe(){
    // "this" is different here too! --- but we don't care!
    console.log(abc); // it is the right object here too!
  }
  ...
};

this は、この点ではユニークではない。 arguments は、同じようにエイリアスで処理されるべき他の擬似変数です。