使用对象构造器内的“这个”可变(using the 'this' variable

我在调用对象构造的“这个”变量中，当我得到的结果有点混乱。

function Slider(tag){
    this.tag = document.querySelector(tag),
    this.start = function(){
        return this.interval;
    },
    this.interval = setInterval(function(){
        console.log(this.tag); //undefined
        console.log(this); //window object
    }, 2000)
}
var route ={
    init:function(){        
        mySlide = new Slider('slider');
        mySlide.start();
    }
}
document.addEventListener('DOMContentLoaded', route.init);

我记录标签console.log(this.tag)但是它返回undefined并记录时， this里面变量console.log(this)它指的是window对象。

这里是一个演示

问：为什么不console.log(this.tag)返回选定的元素？

Answer 1:

这是因为当你传递一个回调函数setInterval ，这就是所谓的在全球范围内。 这就是为什么this是window 。

您可以使用Function.bind()的功能的情况下设置为您的this对象，让你想要它。

this.interval = setInterval(function(){
    console.log(this.tag);
}.bind(this), 2000);

另外，我只是想指出的是， mySlide.start(); 什么也没做。 当你调用new Slider('slider')当你的间隔设置这。 你mySlide.start(); 仅返回intervalID（其仅用于clearInterval() 事实上，因为你甚至不使用的返回值mySlide.start(); ，称它是无用的。

更新：另一种解决方案是使用var self = this; 在你的构造函数，然后使用self内部setInterval()

function Slider(tag){
    var self = this;

    this.tag = document.querySelector(tag),
    this.interval = setInterval(function(){
        console.log(self.tag);
    }, 2000);
}

更新：如果你是一个支持的浏览器“功能箭” ，那么你可以这样做：

this.interval = setInterval(() => {
    console.log(this.tag);
}, 2000);

Answer 2:

在匿名函数的范围setInterval是窗口。 如果你希望它成为Slider实例，你应该绑定首先它。

function Slider(tag){
this.tag = document.querySelector(tag),
this.start = function(){
    return this.interval;
},
this.interval = setInterval(function(){
    console.log(this.tag); //undefined
    console.log(this); //window object
}.bind(this), 2000)
}

文章来源: using the 'this' variable within object constructor