Question

有人可以解释为什么'this'在下面指向DOM对象而不是Window？

$("a").click(function() {
    console.log(this);
});

这导致：

<a id="first" href="http://jquery.com">

考虑以下应该是相同的情况：

function Foo() {
    this.click = function(f) {
        f();
    }
}

var obj = new Foo();
obj.click(function() {
    console.log(this);
});

我们得到的是Window Object（我所期待的）。

Answer 1

在Javascript中，OOP与您在Java等语言中习以为常的不同。

基本上，更容易认为没有OOP而this只是一个＆＃34;隐藏的参数＆＃34;功能。

例如，当您看到

时

function f(x, y, z) {
    console.log(this, x, y, z);
}

认为在常见的OOP语言（例如Java）中

function f(this, x, y, z) {
    console.log(this, x, y, z);
}

当您看到var a = b.f(x, y, z);时，请考虑var a = f(b, x, y, z)。

当您看到var a = f(x, y, z);想到var a = f(undefined, x, y, z);时（在浏览器环境中，strict mode未激活时，它是f(window, x, y, z);）

现在应该更容易理解为什么示例中的this表示嵌套作用域中的不同内容。

Answer 2

这取决于执行函数的上下文。 jQuery显式更改了回调函数的上下文，而您的函数在全局上下文中执行该函数。

更改上下文：

function Foo() {
    this.click = function(f) {
        f.apply(this);
    }
}

或

function Foo() {
    this.click = function(f) {
        this.f = f
        this.f();
    }
}

进一步阅读：

Answer 3

this将由上下文决定。

如果您将代码更改为以下代码，则this将指向some_other_object。

function Foo() {
    this.click = function(f) {
        f.call(some_other_object);
    }
}

Answer 4

jQuery在调用事件处理程序时使用javascript apply函数。来自mdn文档：

使用给定的值和作为数组提供的参数调用函数。