javascript - 如何在 jQuery 的原型(prototype)函数中使用它？

Question

我正在尝试将一些 JavaScript 功能迁移到 OOP JavaScript，如下所示:

function Test(parameters) {

    this.containerID = parameters['containerID'];
    ....
    this.navNext = $('#' + this.containerID + ' #test');
    ...
}

Test.prototype = {
    constructor: Test,
    ...
    init: function () {
        ...
        this.navNext.on('click', function (event) {
            ...
            this.showNext(); //here is the issue
        });
       ...
    },
    showNext: function () {
        ...
    }  
};

然后我像下面这样实例化新实例:

test = new Test({'containerID':'test_id'});
test.init();

但是，当我点击“下一步按钮”或 ($('#test_id '#test' 元素) 时，出现以下错误:

Uncaught ReferenceError: showNext is not defined 

我猜在 on jQuery 函数中 this.showNext() 指向选定的元素 showNext() 函数，而不是我的原型(prototype)函数.

谁能给我建议如何解决这个问题？

Answer 1

在事件处理程序中，this 指的是接收事件的元素。您可以改为对所需的 this 进行外部引用。

var that = this;

this.navNext.on('click', function (event) {
    ...
    that.showNext();
});

---

或者使用 Function.prototype.bind()，它可以在旧浏览器中填充。

this.navNext.on('click', function (event) {
    ...
    this.showNext();
}.bind(this));

---

或者$proxy。

this.navNext.on('click', $.proxy(function (event) {
    ...
    this.showNext();
}, this));

---

或者将对象作为事件数据传递。

this.navNext.on('click', this, function (event) {
    ...
    event.data.showNext();
});

---

请注意，在更改 this 的版本中，您仍然可以通过 event.currentTarget 获取对该元素的引用。或者只使用 event.data 版本，this 仍然是元素。