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的按钮对象而不是窗口Object。毕竟，回调函数（某个函数）仍在另一个函数内（单击）。

$（“按钮”）。点击（某个功能）;

另外，我在SO上看了另一个类似的问题，但我仍然没有更聪明。 "this" keyword inside closure

Answer 1

我的问题是：为什么下面的某个函数引用了jquery的按钮对象而不是窗口Object。

因为jQuery通过Function#call function（或者它可能是Function#apply）显式调用处理程序设置this的含义，所以我必须查看jQuery源代码。 / p>

以下是使用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/

封闭功能中的“this”

2 个答案: