变量在函数中设置为未定义[重复]答案

【问题标题】：variable is set to undefined in function [duplicate]变量在函数中设置为未定义[重复]
【发布时间】：2015-11-01 12:29:41
【问题描述】：

我正在尝试创建一个幻灯片放映，在当前幻灯片完成之前加载下一张幻灯片。我有两个原型。一个用于显示当前幻灯片，然后一个用于加载下一张幻灯片。

它运行良好，直到我在幻灯片之间设置了 setTimeout() 以延迟。 NextSlide() 函数在 setTimeout() 之后调用自身，但是即使在 LoadNextSlide() 中成功加载并添加到 this.nextSlide 中，this.nextSlide 也是未定义的。

$(document).ready(function(){
    //Set width and height of canvas
    var width = $(document).width();
    var height = $(document).height();
    $("#MKslide").css({"width":width+"px","height":height+"px"});


    slideShow = new SlideShow(width, height, "2d");
    slideShow.LoadNextSlide(null);
    slideShow.NextSlide();
});

function SlideShow(canvasWidth, canvasHeight, dimension){
    //Creating the slideshow
}

SlideShow.prototype.LoadNextSlide = function(currentSlideNumber){

    var data = $.parseJSON($.ajax({
        type: "POST",
        url: "/cms/php/request.php",
        dataType: "json",
        data: {slideNumber : currentSlideNumber},
        async: false
    }).responseText);
    this.nextSlide = data;
    alert(this.nextSlide.id);
}

SlideShow.prototype.NextSlide = function(){
    alert(this.nextSlide.id);
    this.currentSlide = this.nextSlide; //Swap to next slide.
    if(beginsWithHTTP(this.currentSlide.data)){
        this.image.src = this.currentSlide.data;
    }
    else{
        this.image.src = "http://" + this.currentSlide.data; //Set the current slide.
    }
    this.LoadNextSlide(this.currentSlide.id); //Preload next slide
    window.setTimeout(this.NextSlide,this.currentSlide.duration * 1000);//wait x seconds before swapping
}

【问题讨论】：

标签： javascript

【解决方案1】：

添加bind(this)如下：

window.setTimeout(this.NextSlide.bind(this),this.currentSlide.duration * 1000);

setTimeout 安排函数稍后执行，届时执行它的上下文将始终是全局对象 (window)，而不是您的对象。而这个上下文就是this 所指的。 bind 方法会创建一个对您的方法的新引用，该引用将覆盖此行为，并且始终以设置为您传递给 bind 的内容的 this 运行，与调用它的上下文无关。

另一种但不太优雅的解决方案是传递 setTimeout 一个匿名函数，在该函数中，该方法是从对象的上下文中显式调用的：

var that = this; // keep a reference to your object
window.setTimeout(function () {
    that.NextSlide(); // use the reference to your object
}, this.currentSlide.duration * 1000);

【讨论】：

【解决方案2】：

您可以使用 .bind 或 asign self=this 并使用 self.nextslide 调用匿名函数，它与范围有关。您也可以使用下划线绑定，因为它也可以充当 polyfill。

【讨论】：