javascript中的面向对象设计和“this”指针答案

【问题标题】：Object oriented design in javascript and 'this' pointerjavascript中的面向对象设计和“this”指针
【发布时间】：2011-05-17 14:29:37
【问题描述】：

我正在像这样在 javascript 中创建一个对象

function myobject() {
   this.myvar1 = 0;
   this.myvar2 = 0;
}

myobject.prototype.a = function(){
    this.myvar1 +=1;
    $('#button').click(function () {  // 'this' is undefined
        alert(this.myvar1)
     })
}

var mything = new myobject();
mything.a()

将this 指针传递给匿名函数的正确方法是什么？

【问题讨论】：

编写的代码应该可以工作。让我们看看你是如何调用 this.b()
为我工作：jsfiddle.net/ygkBP
顺便说一句，考虑将构造函数名称大写：javascript.crockford.com/code.html#names

标签： javascript jquery oop this

【解决方案1】：

更新问题： 问题是在该事件处理程序中，this 指的是您单击的元素，而不是您的 myobject，因此只需保留对它的引用，如下所示：

myobject.prototype.a = function(){
    this.myvar1 +=1;
    var self = this;
    $('#button').click(function () {
        alert(self.myvar1)
    });
}

You can test it out here.

上一个问题： 你所拥有的应该可以工作（正如你所拥有的那样），you can test it here。

【讨论】：

我把这个例子简单化了。我更新了代码。我认为问题与将“this”指针传递给匿名函数有关。
@Alexis - 不是 this 未定义，它只是引用该函数内部的处理程序，只需保持这样的引用：jsfiddle.net/nick_craver/6Ltac

【解决方案2】：

将以下代码添加到您的 sn-p 的末尾并正确运行它会发出警报“1”：

mything.b();
alert(mything.myvar1);

你期待什么？也许您错误地调用了mything.b()？

【讨论】：

你是对的。在示例中，我过度简化了代码。我更新了示例。

【解决方案3】：

这里发生的是 jQuery 劫持了匿名函数中 this 的值，该匿名函数用作单击事件的处理程序。这有点令人困惑，但 jQuery 的行为是将触发事件的 DOM 元素分配给 this。有几种方法可以为回调函数显式设置this 的值（“上下文”）：

Function.prototype.bind - ECMAScript 5 标准的一部分，刚刚开始在浏览器中实现。对于遗留支持，您可以从 Prototype 库中提取它。
$.proxy - jQuery 糟糕的 Function.prototype.bind 等效项，它是在 jQuery 1.4 中引入的。

我在我的博客上写了几篇文章，如果您有兴趣，可以更详细地解释这些：

在这两种情况下，由于this 现在将成为您的对象而不是触发 DOM 元素，您可以通过检查事件对象来获取触发 DOM 元素，这将是回调函数的第二个参数。

【讨论】：

这也是一个非常有用的答案！

【解决方案4】：

要将this 传递给内部函数，请将其“保存”到另一个变量。

myobject.prototype.a = function() {
    var self = this;
    self.myvar1 += 1;

    $('#button').click(function () {
         alert(self.myvar1);
    });
}

【讨论】：

【解决方案5】：

这里的其他人已经很好地解释了这个问题以及如何在不添加任何依赖项的情况下解决问题，但我个人认为这个插件是一个更好的整体解决方案（如果你不介意依赖项的话）：

http://markdalgleish.com/projects/eventralize/

【讨论】：