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()函数，而不是我的原型函数。

有人可以给我一个如何解决这个问题的建议吗？

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仍然是元素。

Answer 2

查看this是什么

this.navNext.on('click', function (event) {
    console.log(this);
    this.showNext(); //here is the issue
});

当你在日志中查看它时，你会看到＆＃34;这个＆＃34;是你点击的元素。

范围错误，但您可以使用jQuery's proxy()

进行修复

this.navNext.on('click', $.proxy(this.showNext,this));

或者您可以使用Function.prototype.bind()

this.navNext.on('click', this.showNext.bind(this));

Answer 3

您可以在on('click'处理程序中保存对象的引用：

   var thisRef = this;
    this.navNext.on('click', function (event) {
        ...
        thisRef.showNext(); //here is the issue
    });

如何在jQuery的原型函数中使用它？

3 个答案: