javascript - 这里的 'this' 引用是什么？

Question

我正在阅读this chapter in You don't know JS 。

function baz() {
    // call-stack is: `baz`
    // so, our call-site is in the global scope
    console.log("baz");
    bar(); // <-- call-site for `bar`
}


function bar() {
    // call-stack is: `baz` -> `bar`
    // so, our call-site is in `baz`
    console.log("bar");
    foo(); // <-- call-site for `foo`
}

function foo() {
    // call-stack is: `baz` -> `bar` -> `foo`
    // so, our call-site is in `bar`
    console.log("foo");
    console.log(this);
}

baz(); // <-- call-site for `baz`

我期望函数 foo 中的 console.log(this) 打印 bar，因为 bar是调用站点，但它似乎是窗口。

函数foo中如何使用this引用window而不是bar？

Answer 1

正如 Kyle Simpson 精彩地解释的那样，this 的值仅取决于 4 个条件，具体取决于调用站点:

var obj = {
  foo: function() {
    console.log(this);
  }
};

function foo() { console.log(this); }

<强>1。使用对象调用(隐式绑定(bind))

obj.foo();

在这种情况下，使用 obj 调用 foo (始终注意点运算符之前的对象)。因此，this 引用 foo 内的 obj。

<强>2。 “调用”或“应用”(显式绑定(bind))

foo.call(obj);

这里，函数 foo 中的 this 引用了 obj，因为它已被显式绑定(bind)。

<强>3。使用new(新关键字)调用

obj = new foo();

在 foo 内部，this 现在引用新创建的对象。

<强>4。全局对象(默认绑定(bind))

foo();

这里直接调用foo。因此它默认为window。 (这就是你的情况!)

如您所见，在您的情况下，foo 被直接调用(情况 4)。因此，this 指的是window 对象。只要记住这4个案例，你就会好起来的!