JavaScript和'this'在立即执行的函数中

Question

我一直在阅读JavaScript中关于'this'的复杂内容。鉴于此代码：

$(document).ready(function() {
    console.dir(this);
    (function foo() {
        console.dir(this);
    })();
});

在Chrome中，控制台将第一个'this'显示为'HTMLDocument'（正如我所料），但第二个'this'是'undefined'。有人能指出我对原因的一个很好的解释吗？

Answer 1

调用javascript函数的方式会改变其中this的含义。在这里，您调用了一个与任何对象无关的方法，因此它没有要绑定的this值。

在第一种情况下，回调是通过JQuery调用的，他们正在操纵回调，使this指向document DOM元素。当您使用apply

调用回调时，很容易将其可视化

yourCallback.apply(document, null);

您可以像这样修复第二个版本

$(document).ready(function() {
    console.dir(this);
    var that = this;
    (function foo() {
        console.dir(that);
    })();
});

使用apply

的另一种方式

$(document).ready(function() {
    console.dir(this);
    (function foo() {
        console.dir(this);
    }).apply(this, null);
});

Answer 2

this是调用当前函数的上下文。

• 使用object.method（）语法调用函数时，object成为上下文。
• 使用function（）语法调用函数时，没有上下文：它为null。

jQuery使用document作为上下文调用您的ready函数。并且在没有上下文的情况下调用您立即执行的函数，这就是它为空的原因。

你可以这样做：

// assign `this` to that so you can access `this` through `that`
var that = this; 
(function foo() {
    console.log(that);
}());

或者这个：

// bind the function to `this` and then call it
$.proxy(function() { 
    console.log(this);
}, this)();

请参阅jQuery.proxy。

甚至这个：

// call the function with `this` as context
(function() { 
    console.log(this);
}).call(this);

请参阅Function.call。

Answer 3

如果将该代码放入加载了jQuery的页面的控制台中，则第二个“this”是DOMWindow，这是全局的“this”。 不未定义。

页面上必须有其他内容。

Answer 4

第二个this位于匿名函数中，没有上下文。 this始终是函数级别的隐式变量，因此您的内部函数this正在遮蔽外部this