js-function中this的转换

101 阅读 0 评论 67 点赞

我是靠谱客的博主机灵小猫咪，这篇文章主要介绍js-function中this的转换，现在分享给大家，希望可以做个参考。

转自http://www.jianshu.com/p/ebfeb687eb70

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout(function(){
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //undefined says hi

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：
1.第一种是将this传给self,再用self来指代this

复制代码

1
2
3
4
5
6
 says(say){
     var self = this;
     setTimeout(function(){
         console.log(self.type + ' says ' + say)
     }, 1000)

2.第二种方法是用bind(this),即

复制代码

1
2
3
4
5
 says(say){
     setTimeout(function(){
         console.log(self.type + ' says ' + say)
     }.bind(this), 1000)

es6中：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
class Animal {
    constructor(){
        this.type = 'animal'
    }
    says(say){
        setTimeout( () => {
            console.log(this.type + ' says ' + say)
        }, 1000)
    }
}
 var animal = new Animal()
 animal.says('hi')  //animal says hi