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

【问题标题】：How to access instance property in an instance method when the method is being passed into an another function?当方法被传递给另一个函数时，如何访问实例方法中的实例属性？
【发布时间】：2011-08-19 19:08:53
【问题描述】：

我知道在下面的代码中，如果我单击按钮，它将打印出undefined，因为this.field 成为按钮的上下文而不是Container。我的问题是当this.func 被传递给另一个函数时，我如何访问this.field 的Container，该函数与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) });
}

【问题讨论】：

标签： javascript jquery oop

【解决方案1】：

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

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/

【讨论】：

啊，这简直太美了。谢谢你。这确实表明我需要真正探索 jQuery API。

【解决方案2】：

传递一个匿名函数怎么样？

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'));

【讨论】：

刚去投票，被告知我只剩下问题投票了...有趣。

【解决方案3】：

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

【讨论】：