Question

当我尝试使用“this”来调用函数时，发生了一个错误：“this.slideshow action不是函数”。你能告诉我我的错吗？

var class_slider = {
        current_slide: 0, //Starting Slide
        total_slides: 4, //All Slides
        slideshow_action: function(slide_number) {
            $(".slide_text").hide();
            $(".main_navigation_container").removeClass("selected");
            $("#slide_" + slide_number).addClass("selected");
            $("#slide_" + slide_number + "_text").fadeIn("slow");
        },
        slideshow: function() {
            if (this.current_slide === this.total_slides)
                this.current_slide = 0;//Make a new tour
            else
                this.current_slide++;
           this.slideshow_action(this.current_slide);
        },
        reset_timer: function()
        {
            window.clearInterval(this.slideshow_timer);
            this.slideshow_timer = window.setInterval(this.slideshow, 5000);
        },
        icon_action: function(element) {
            this.reset_timer();
            var arr = element.attr("id").split('_'); //Get Last Part of id(slide number)
            this.current_slide = parseInt(arr[1]); //Get slide Number
            this.slideshow_action(this.current_slide);
        }
    };

Answer 1

使用上下文。

setTimeout(function(context){
        context._someMethod();
    }, 5000, this);
}

var timer = setInterval(function(context){
        context._someMethod();
    }, 5000, this);
}

Answer 2

function class_slider(){

  var that = {
    current_slide: 0, //Starting Slide
    total_slides: 4, //All Slides
    slideshow_action: function(slide_number) {
        $(".slide_text").hide();
        $(".main_navigation_container").removeClass("selected");
        $("#slide_" + slide_number).addClass("selected");
        $("#slide_" + slide_number + "_text").fadeIn("slow");
    },
    slideshow: function() {
        if (that.current_slide === that.total_slides)
            that.current_slide = 0;//Make a new tour
        else
            that.current_slide++;
       that.slideshow_action(that.current_slide);
    },
    reset_timer: function()
    {
        window.clearInterval(that.slideshow_timer);
        that.slideshow_timer = window.setInterval(that.slideshow, 5000);
    },
    icon_action: function(element) {
        that.reset_timer();
        var arr = element.attr("id").split('_'); //Get Last Part of id(slide number)
        that.current_slide = parseInt(arr[1]); //Get slide Number
        that.slideshow_action(that.current_slide);
    }
  };

  return that;
};

Answer 3

尝试更改setInterval调用，如下所示：

this.slideshow_timer = window.setInterval(this.slideshow.bind(this), 5000);

Answer 4

您从this.slideshow运行setInterval，这就是上下文错误的原因。您可以bind运行上下文，使用jQuery proxy，使用that = this等。

Answer 5

您之所以看到这一点，是因为您的上下文中的this不是您期望的this。让我解释一下原因。

在JavaScript中有一些叫做执行上下文的东西（或者我喜欢引用它的方式）。调用函数时，会在上下文中调用它。例如，当你有一个对象的实例时，对象就是上下文：

var MyObject = function(){};
MyObject.prototype.myFunction = function() {};
var myObject = new MyObject();
myObject.myFunction();

当您调用myFunction方法时，该方法的上下文为myObject。如果您将此方法传递给setTimeout方法，则不知道哪个对象myFunction属于。在内部，它会像theAssignedVariable.call(this);一样调用它。在这种情况下this是完全不同的（大多数情况下是窗口）。所以你基本上看到的是在slideshow_action（这个）上调用window。

要解决这样的问题，请执行以下操作：

var _this = this;
setTimeout(function() { 
  _this.callSomeFunction();
}, 1000);

在javascript中，bind上还有一个Function方法。在MDN上他们解释了你如何使用它。

你问题的其他答案都是有效的，但没有一个解释为什么它不起作用。

使用“this”调用函数

5 个答案: