web-dev-qa-db-ja.com

thisコンテキストを関数に渡すにはどうすればよいですか？

これは簡単にグーグルで検索できるものだと思っていましたが、正しい質問をしていないのかもしれません...

特定のjavascript関数で「this」が参照するものを設定するにはどうすればよいですか？

たとえば、次のようなjQueryのほとんどの関数と同様です。

$(selector).each(function() {
   //$(this) gives me access to whatever selector we're on
});

呼び出されたときに適切な「this」参照を持つ独自のスタンドアロン関数を作成/呼び出すにはどうすればよいですか？私はjQueryを使用しているので、jQuery固有の方法があれば理想的です。

javascriptjqueryscopethis
187
user126715

Javascriptの.call()および.apply()メソッドを使用すると、関数にcontextを設定できます。

var myfunc = function(){
    alert(this.name);
};

var obj_a = {
    name:  "FOO"
};

var obj_b = {
    name:  "BAR!!"
};

今、あなたは呼び出すことができます：

myfunc.call(obj_a);

FOOに警告します。別の方法として、obj_bを渡すと、BAR!!にアラートが出されます。 .call()と.apply()の違いは、関数に引数を渡すときに.call()がコンマ区切りのリストを取り、.apply()に配列が必要なことです。

myfunc.call(obj_a, 1, 2, 3);
myfunc.apply(obj_a, [1, 2, 3]);

したがって、apply()メソッドを使用して、関数hookを簡単に記述できます。たとえば、jQueryの.css()メソッドに機能を追加します。元の関数参照を保存し、カスタムコードで関数を上書きして、保存された関数を呼び出すことができます。

var _css = $.fn.css;
$.fn.css = function(){
   alert('hooked!');
   _css.apply(this, arguments);
};

魔法のargumentsオブジェクトはオブジェクトのような配列なので、それをapply()に渡すだけです。これにより、すべてのパラメーターが元の関数に渡されることが保証されます。

275
jAndy

使用 ：

_function.call(that, arg1, arg2, etc);

ここで、thatは、関数内でthisにするオブジェクトです。

42
palswim

jQueryは.call(...)メソッドを使用して、パラメーターとして渡す関数内のthisに現在のノードを割り当てます。

編集：

疑問がある場合は、jQueryのコードの内部を見るのを恐れないでください。すべてが明確で十分に文書化されたJavascriptです。

つまり、この質問に対する答えは574行目あたりです。
callback.call( object[ name ], name, object[ name ] ) === false

16
Mic

bind 関数を使用して、関数内でthisのコンテキストを設定できます。

function myFunc() {
  console.log(this.str)
}
const myContext = {str: "my context"}
const boundFunc = myFunc.bind(myContext);
boundFunc(); // "my context"
9
Scott Jungwirth

別の基本的な例：

動作していません：

var img = new Image;
img.onload = function() {
   this.myGlobalFunction(img);
};
img.src = reader.result;

ワーキング：

var img = new Image;
img.onload = function() {
   this.myGlobalFunction(img);
}.bind(this);
img.src = reader.result;

基本的に：関数に.bind（this）を追加するだけです

5
Joery