var self = this？

イベントハンドラのコールバックがの範囲に変更とインスタンスメソッドを使用してthisから、「マイインスタンス」と「ただのコールバックと呼ばれるものは何でもします」。だから私のコードはこのようになります

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

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

機能しますが、それが最善の方法ですか？それは私には奇妙に見えます。

この質問はjQueryに固有のものではなく、JavaScript全般に固有のものです。中心的な問題は、組み込み関数で変数を「チャネル化」する方法です。これは例です：

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。エイリアスによって、同じように処理する必要がある他の疑似変数です。

ええ、これは一般的な基準のようです。一部のコーダーは自己を使用し、他のコーダーは私を使用しています。イベントではなく、「実際の」オブジェクトへの参照として使用されます。

それは本当に得るのに少し時間がかかったものですが、最初は奇妙に見えます。

私は通常、これをオブジェクトの一番上で実行します（デモコードを許してください。これは他の何よりも概念的であり、優れたコーディング手法のレッスンではありません）。

function MyObject(){
  var me = this;

  //Events
  Click = onClick; //Allows user to override onClick event with their own

  //Event Handlers
  onClick = function(args){
    me.MyProperty = args; //Reference me, referencing this refers to onClick
    ...
    //Do other stuff
  }
}

var functionX = function() {
  var self = this;
  var functionY = function(y) {
    // If we call "this" in here, we get a reference to functionY,
    // but if we call "self" (defined earlier), we get a reference to function X.
  }
}

編集：にもかかわらず、オブジェクト内のネストされた関数は、周囲のオブジェクトではなく、グローバルウィンドウオブジェクトを取得します。

ES2015を実行している場合、またはタイプスクリプトとES5を実行している場合は、コードで矢印関数を使用でき、そのエラーに直面することはありません。これは、インスタンスの目的のスコープを参照します。

this.name = 'test'
myObject.doSomething(data => {
  console.log(this.name)  // this should print out 'test'
});

これに対する1つの解決策は、JavaScriptのbindメソッドを使用して、すべてのコールバックをオブジェクトにバインドすることです。

名前付きメソッドでこれを行うことができます

function MyNamedMethod() {
  // You can now call methods on "this" here 
}

doCallBack(MyNamedMethod.bind(this)); 

または匿名のコールバックで

doCallBack(function () {
  // You can now call methods on "this" here
}.bind(this));

代わりにこれらvar self = thisを実行するthisと、JavaScriptでのバインディングの動作が理解され、クロージャー参照に依存しません。

また、ES6のファットアロー演算子は、基本的には.bind(this)無名関数の呼び出しと同じです。

doCallback( () => {
  // You can reference "this" here now
});

私はjQueryを使用していませんが、Prototypeなどのライブラリでは、特定のスコープに関数をバインドできます。そのことを念頭に置くと、コードは次のようになります。

 $('#foobar').ready('click', this.doSomething.bind(this));

bindメソッドは、指定したスコープで元のメソッドを呼び出す新しい関数を返します。

これにES6で追加したのは、矢印関数のため、this値を取得するため、これを実行する必要はありません。

実際には、doSomething関数内で何をするかによって異なります。MyObjectこのキーワードを使用してプロパティにアクセスする場合は、それを使用する必要があります。しかし、object(MyObject)プロパティを使用して特別なことをしていなければ、次のコードフラグメントも機能すると思います。

function doSomething(){
  .........
}

$("#foobar").ready('click', function(){

});