1. ホーム
  2. ジャバスクリプト

[解決済み】このコンテキストを関数に渡すにはどうすればいいですか?

2022-04-05 17:06:07

質問

これは簡単にググれるものだと思っていたのですが、もしかしたら私の質問が間違っていたのかもしれません...。

javascriptの関数で、"this"が指すものを設定するにはどうすればよいですか?

例えば、jQueryのほとんどの関数のような。

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

呼び出されたときに適切な "this" 参照を持つ独自のスタンドアロン関数を書いたり呼び出したりするにはどうしたらよいでしょうか? 私はjQueryを使っているので、jQuery特有の方法があれば理想的です。

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

Javascripts .call().apply() メソッドを使用すると コンテキスト を使用することができます。

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

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

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

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