javascript - 将 'this' 关键字传递给面向对象 Javascript 上的事件

Question

我是 javascript/jQuery 新手。

我正在做一个简单的淡入淡出 slider 以在页面上使用，并且我尝试将尽可能多的内容放入对象内，因此每当我创建对象的新实例时，它都会开箱即用。 在设置导航时，我首先执行了以下操作:

testimonial = new slider($('.testimonials'), $('.testimonials-nav'));
testimonial.nav.on('click', function (e) {
testimonial.setCurrent($(this).data('dir')); // changes the current slider
testimonial.transition(); // what happens when the 'current' changes
testimonial.setHeight(); //because everything is 'position: absolute', I set the parent div height with js
e.preventDefault();
});

但是这样我每次创建 slider 的新实例时都需要重复所有这些代码，所以我尝试了不同的方法，我创建了两种方法:

slider.prototype.init = function () {
    this.numberEls();
    this.setHeight();
    this.activateNav();
};

因此，当我创建新实例时，我可以执行以下操作

testimonial = new slider($('.testimonials'), $('.testimonials-nav'));
testimonial.init();

并创建了这个方法

slider.prototype.activateNav = function () {
    this.nav.on('click', function (e) {        
        this.setCurrent($(this).data('dir'));
        e.preventDefault();
    });
};

但由于事件处理程序内“this”关键字的范围，它显然不起作用，如何使“this.setCurrent”在此上下文中工作？

总的来说，另一个问题是，对于我想要实现的目标来说，这是一个好方法吗？请记住，它可能会在网站的其他部分使用，而不仅仅是在推荐中。

如果要求不太多，我怎样才能让它自动循环呢？我知道它涉及 setTimeOut() 之类的东西，但我不知道到底是怎么做的(我需要诚实地说这是一个懒惰的问题，实际上在问如何做之前我什至没有尝试这样做，但因为我在这里=P)

Heres the fiddle

PS。如果我没有说清楚，我很抱歉，英语不是我的母语，我有时会遇到困难=P

Answer 1

只需保存对 this 的引用并稍后使用即可。

slider.prototype.activateNav = function () {
    var that = this;
    this.nav.on('click', function (e) {        
        that.setCurrent($(this).data('dir'));
        e.preventDefault();
    });
};