Question

我知道在下面的代码中，如果我点击按钮，它将打印undefined，因为this.field变为按钮的上下文而不是Container。我的问题是，当this.field传递到另一个函数时，我如何才能访问Container this.func，这是与Container不同的上下文范围。

function Container(){
    this.field = 'field';

    $('button').click(this.func);
}

Container.prototype.func = function(){
   console.log(this.field);
}

我知道我可以做到这一点，但有更好的方法吗？因为我宁愿在构造函数之外定义方法，所以我不会混淆它。

function Container(){
    var thisObj = this;
    this.field = 'field';

    $('button').click(function(){ console.log(thisObj.field) });
}

Answer 1

传递匿名函数怎么样？

function Container(){
    this.field = 'field';
    var self = this;

    $('button').click(function() {
        self.func()
    });
}

你在这里没有多少选择......

jQuery让您更轻松，并提供$.proxy：

 $('button').click($.proxy(this.func, this));
 // or
 $('button').click($.proxy(this, 'func'));

Answer 2

将对象引用作为事件数据传递：

function Container(){
    this.field = 'field';

    $('button').click(this, this.func);
}

Container.prototype.func = function(e){
   console.log(e.data.field);
}

见这里：http://jsfiddle.net/gilly3/nwtqJ/

Answer 3

我只想指出，一般来说，你应该避免将'this'变量视为与java中的变量有任何相似之处。你清楚地了解这一点，但它总是重复。由于javascript总是指向您调用该函数的对象，因此将实例函数传递给另一个对象以用作其onclick会导致混淆。我不知道你打算在实例方法本身做什么，但是没有理由为什么onclick处理程序应该是另一个对象的实例方法。如果它可以访问您想要的成员，那么它们是公共的，因此不需要将它作为实例方法。如果要完成的工作仅与Container对象相关，则onclick应该是一个单独的函数，它将引用容器并调用实例方法。

当方法传递给另一个函数时，如何在实例方法中访问实例属性？

3 个答案: