如何將 this 上下文傳遞給函數？

Question

我認為這將是我可以輕松谷歌的東西，但也許我沒有問正確的問題......

如何在給定的 javascript 函數中設置“this”所指的內容？

例如，與大多數 jQuery 函數一樣，例如：

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

如何編寫/調用我自己的獨立函數，這些函數在調用時具有適當的“this”引用？ 我使用 jQuery，所以如果有一種特定於 jQuery 的方法，那將是理想的。

Answer 1

Javascript 的.apply() .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 ，傳遞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() 。 這樣我們保證，所有參數都傳遞給原始函數。

Answer 2

使用function.call ：

var f = function () { console.log(this); }
f.call(that, arg1, arg2, etc);

that是您希望this在函數that所在的對象。

Answer 3

另一個基本示例：

不工作：

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) 添加到您的函數中

Answer 4

您可以使用bind函數在函數內設置this的上下文。

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

Answer 5

jQuery 使用.call(...)方法在您作為參數傳遞的函數中將當前節點分配給this 。

編輯：

當您有疑問時，不要害怕查看 jQuery 的代碼，所有內容都在清晰且有據可查的 Javascript 中。

即：這個問題的答案在第 574 行左右，
callback.call( object[ name ], name, object[ name ] ) === false