Javascript和原型制作过程

Question

我正在尝试编写一个执行幻灯片放映的脚本。我可以用函数来做，但我想使用原型方法。我很难弄清楚的是程序。这是我尝试做的事情

var displayVars = {
    slide: '',
    thumb: ''   
}

//setup display
display = function(slide,thumb) {

    displayVars.slide = $(slide);

    displayVars.thumb = $(thumb);

    // set slider width
}

display.prototype.play = function() {

    // move slide to this location

    display.hightlight();
}

display.prototype.hightlight = function() {

    // add border to element
}

$(function() {

    newdis = new display('.show-slide','.window-thumbs');

    displayVars.timer = setTimeout(newdis.play,500);

});

如果你在播放函数中注意到我想调用 highlight 方法。我真正想要的是每次调用 play 函数时都运行 highlight 函数。我无法理解如何做到这一点，因为“显示”或“这个”不会让我访问突出显示功能。

Answer 1

问题不在于原型函数的内部结构，而在于您设置超时处理程序的方式。

displayVars.timer = setTimeout(function() { newdis.play(); }, 500);

然后你就可以在“播放”功能中使用this了：

display.prototype.play = function() {

  // move slide to this location

  this.hightlight();
}

函数和任何类型的对象之间没有内在的“成员关系”。对象属性可以引用函数，但唯一有意义的是通过对象属性引用进行函数调用时。由于您没有调用该函数，而只是获取对它的引用以传递给“setTimeout()”，因此无需设置this 的值。通过将其包装在通过对象引用显式调用“play”的匿名函数中，您可以正确设置this。

另一种方法是使用较新浏览器中可用的“bind()”函数：

displayVars.tinmer = setTimeout(newdis.play.bind(newdis), 500);

这将具有与匿名函数或多或少相同的效果（有一些额外的微妙之处，在大多数情况下并没有太大区别）。