javascript - Javascript 中“this”的值

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 对象（我所期望的）。

score 6 · Accepted Answer

在 Javascript 中，OOP 与您在 Java 等语言中所习惯的不同。

基本上，更容易认为没有 OOP，而这this只是函数的“隐藏参数”。

例如，当你看到

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);think var a = f(undefined, x, y, z);（在浏览器环境中，当严格模式未激活时，它是f(window, x, y, z);）

现在应该更容易理解为什么this在您的示例中意味着嵌套范围中的不同事物。

score 5 · Accepted Answer

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

改变上下文：

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

或者

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

进一步阅读：

score 4 · Accepted Answer

this将由上下文决定。

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

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

score 2 · Accepted Answer

jQuery在调用事件处理程序时使用 javascript应用函数。从 mdn 文档中：

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

4 回答 4