javascript - jQuery/JavaScript "this"指针混淆

Question

调用函数 bar 时“this”的行为让我感到困惑。请参阅下面的代码。当从点击处理程序调用 bar 时，有什么方法可以将“this”安排为普通的旧 js 对象实例，而不是 html 元素？

// a class with a method

function foo() {

    this.bar();  // when called here, "this" is the foo instance

    var barf = this.bar;
    barf();   // when called here, "this" is the global object

    // when called from a click, "this" is the html element
    $("#thing").after($("<div>click me</div>").click(barf));
}

foo.prototype.bar = function() {
    alert(this);
}

Answer 1

欢迎来到 JavaScript 的世界! :D

您已经进入了 javascript 作用域和闭包领域。

简短回答:

this.bar()

在foo范围内执行，(因为this引用foo)

var barf = this.bar;
barf();

在全局范围内执行。

this.bar 基本上意味着:

在this(foo)范围内执行this.bar指向的函数。当你将 this.bar 复制到 barf 并运行 barf 时。 JavaScript 理解为，运行 barf 指向的函数，并且由于没有 this，它只是在全局范围内运行。

要纠正此问题，您可以更改

barf();

像这样:

barf.apply(this);

这告诉 Javascript 在执行之前将 this 的范围绑定(bind)到 barf。

对于 jquery 事件，您需要使用匿名函数，或扩展原型(prototype)中的绑定(bind)函数以支持作用域。

了解更多信息:

• Good explanation on scoping
• Extending jQuery bind to supportscoping