封閉函數中的“ this”

Question

這個里面的封閉。 請務必注意，閉包無法使用this關鍵字訪問外部函數的this變量，因為this變量只能由函數本身訪問，而不能由內部函數訪問。

例如：

 var user = { tournament:"The Masters", data :[ {name:"T. Woods", age:37}, {name:"P. Mickelson", age:43} ], clickHandler:function () { // the use of this.data here is fine, because "this" refers to the user object, and data is a property on the user object. this.data.forEach (function (person) { // But here inside the anonymous function (that we pass to the forEach method), "this" no longer refers to the user object. // This inner function cannot access the outer function's "this" console.log ("What is This referring to? " + this); //[object Window] console.log (person.name + " is playing at " + this.tournament); // T. Woods is playing at undefined // P. Mickelson is playing at undefined }) } } user.clickHandler(); // What is This referring to? [object Window] 

我的問題是：為什么在下面參考jQuery的按鈕對象，而不是窗口對象的一些功能 這一點 。 畢竟，回調函數（某些函數）仍在另一個函數（單擊）中。

$（“ button”）。click（某些功能）；

另外，我看了關於SO的另一個類似問題，但我仍然不明智。 閉包中的“ this”關鍵字

Answer 1

我的問題是：為什么下面的某些功能是指jquery的按鈕對象而不是窗口對象。

因為jQuery調用處理程序中設置的意義this明確，通過Function#call函數 （或者它可能是Function#apply ，我得看看jQuery的源）。

這是一個使用call的簡單示例：

function foo() {
    console.log("this.answer = " + this.answer);
}

var obj = {answer: "42"};
foo.call(obj); // The first argument is used as `this` during the call

那將輸出

this.answer = 42

Answer 2

您擁有正確的關鍵字'this'，該關鍵字指向在其上調用了當前正在執行的方法的對象。 因此，在您的第一個示例中， clickHandler()函數將引用用戶對象。

現在，就jQuery而言，當您在回調函數中時，“ this”是指“ DOM”元素。 據我了解，這樣做的原因是jQuery從其內部“ jQuery”代碼返回一個對象，該對象使用call（）和apply（）維護對上下文中作為“ DOM”元素的元素的引用。 我相信會維持下去。 這樣做還可以完成一系列動作，例如("button").click(somefunction).fadeIn() 。

如果您制作自己的jquery函數，例如$.fn.somefunction = function() {...} ，則此刻指的是jQuery對象。

也許有一個更好的理由來做到這一點，但是我迅速使用call()更改了您的代碼，使之指向您的用戶對象。

var user = {
    tournament:"The Masters",
    data      :[
        {name:"T. Woods", age:37},
        {name:"P. Mickelson", age:43}
    ],

    clickHandler: function () {
    // the use of this.data here is fine, because "this" refers to the user object, 
    // and data is a property on the user object.

    this.data.forEach (function (person) {
        // But here inside the anonymous function (that we pass to the forEach method),
        //"this" no longer refers to the user object.
        // This inner function cannot access the outer function's "this"

        //Use call to make this refer to your user object
        that = Object.call(this, user);

         console.log ("What is This referring to? " + that); //[object Object]

         console.log (person.name + " is playing at " + that.tournament);
         // T. Woods is playing at undefined
         // P. Mickelson is playing at undefined
        })
     }

    }

user.clickHandler(); // What is This referring to? [object Object]

另一件事是在Javascript中， forEach函數采用第二個參數，該參數將用作引用“ this”的對象，因此您可以用另一種方法來實現。 現在，這是指用戶對象。

....

this.data.forEach (function (person) {
    // But here inside the anonymous function (that we pass to the forEach method),
    //"this" no longer refers to the user object.
    // This inner function cannot access the outer function's "this"

    //Use call to make this refer to your user object

     console.log ("What is This referring to? " + this); //[object Object]

     console.log (person.name + " is playing at " + this.tournament);
     // T. Woods is playing at Masters
     // P. Mickelson is playing at Masters
     //pass user as the object the second parameter
    }, user)
 }

}

在jQuery網站上查看有關此內容的說明，這是一個鏈接。

http://learn.jquery.com/javascript-101/this-keyword/