javascript中的面向对象设计和'this'指针

时间:2010-11-30 00:21:37

标签: javascript jquery oop this

我在这样的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指针传递给匿名函数的正确方法是什么?

5 个答案:

答案 0 :(得分:4)

有关更新的问题: 问题是在该事件处理程序中,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

答案 1 :(得分:1)

将以下代码添加到代码段末尾并正确运行警告“1”:

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

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

答案 2 :(得分:1)

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

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

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

答案 3 :(得分:0)

这里发生的事情是jQuery在用作click事件处理程序的匿名函数中劫持this的值。这有点令人困惑,但jQuery的行为是将触发事件的DOM元素分配给this。有几种方法可以为回调函数显式设置this的值(“上下文”):

  1. Function.prototype.bind - ECMAScript 5标准的一部分,刚刚开始在浏览器中实现。对于旧版支持,您可以从Prototype库中提取它。
  2. $ .proxy - jQuery与jQuery 1.4中引入的Function.prototype.bind等效。
  3. 我在我的博客上写了几篇文章,如果你有兴趣,可以更详细地解释这些:

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

答案 4 :(得分:0)

其他人在这里做了一个很好的工作来解释这个问题以及如何解决而不添加任何依赖关系,但我个人认为这个插件是一个更好的整体解决方案(如果你不介意依赖):

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