解析javascript里 setTimeout里 this的指向，并用bind改变其this指向

sol999

于 2021-12-15 18:16:39 发布

阅读量1.3k

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_40024174/article/details/121957179

版权

本文探讨了JavaScript中setTimeout函数中this的指向问题。通过示例代码展示了为何需要使用bind来改变this的指向，以确保能正确访问到对象的属性。解释了不加bind时this默认指向window，而使用bind则可以将this绑定到指定的对象，确保方法的正确执行。

摘要由CSDN通过智能技术生成

参考原文： https://www.jianshu.com/p/ee175cade48b

先来看一段代码：

var lateBloomer = function(){
    this.petalCount = 1;
}
lateBloomer.prototype.bloom = function(){
    setTimeout(this.decaler.bind(this),1000);
}
lateBloomer.prototype.decaler = function(){
    console.log(`I am a flower with ${this.petalCount} petal`);
}

var flower = new lateBloomer();
flower.bloom();   //打印出 I am a flower with 1 petal

奇怪，为啥要这样写： setTimeout(this.decaler.bind(this),1000);

那以下的写法可以实现吗

1.  setTimeout(this.decaler,1000);

2.  setTimeout(this.decaler(),1000);

3.  setTimeout(function(){ 
        this.decaler() 
    }.bind(this),1000);
    
4.  setTimeout(function(){ 
        this.decaler() 
    },1000);

感兴趣的童鞋可以自己试试看哈

下面解析并发布结果：
1.setTimeout(this.decaler,1000);