结合类和事件监听器：`this` 关键字

Question

我很难回答我的问题，我认为这仅仅是因为“类”和“这个”以及其他此类术语对于有效的谷歌搜索来说过于笼统。

---

考虑以下代码：

function product (name) {
    var _productName;

    this.getProductName = function() {
        return this._productName;
    };

    this.alertProductName = function() {
        // This errors because `this` is a reference to the HTML <input> tag and not the class
        alert(this.getProductName());
    }

    this._productName = name;

    var $productButton = $('<input type="button" value="What is my name?" />');
        $productButton.on('click', this.alertProductName);

    $('body').append($productButton);
}

var widget = new product('Widget');

widget.alertProductName();

jQuery（或者可能是 Javascript 本身）正在重置 this 关键字指向的内容，一旦 product::alertProductName 被调用作为事件的回调。我找不到任何其他方法来从用作回调的函数中访问此类的特定 instance。看起来 Javascript 曾经有 arguments.callee 但已被弃用。

有谁知道我如何以这种方式访问​​类的特定实例？如果没有，有没有更好的方法来写这个，这样我一开始就没有这个问题？

Answer 1

这不是你想的那样。

这很好地回答了它
How does the "this" keyword work?

Answer 2

由于alertProductName方法是由事件处理器调用的，默认情况下，事件处理器方法内部的this指的是触发事件的dom元素。

由于您使用的是构造函数，我首选的解决方案是使用 $.proxy() 将自定义执行上下文传递给 alertProductName 方法 - Function.bind() 执行相同但没有 IE < 9 support

function product(name) {
    var _productName;

    this.getProductName = function () {
        return this._productName;
    };

    this.alertProductName = function () {
        // This errors because `this` is a reference to the HTML <input> tag and not the class
        alert(this.getProductName());
    }

    this._productName = name;

    var $productButton = $('<input type="button" value="What is my name?" />');
    $productButton.on('click', $.proxy(this.alertProductName, this));//here use $.proxy()

    $('body').append($productButton);
}

var widget = new product('Widget');

widget.alertProductName();

演示：Fiddle

另一种解决方案是使用闭包变量来引用小部件元素，例如：fiddle - 如果您打算确保构造函数的原型函数，这将不起作用