箭头函数this指向

Posted 2021-02-09 codejoker

1. cat.jumps

1 var cat = {
2       lives: 9,
3       jumps: function() {
4         this.lives--
5       }
6     }
7     cat.jumps()
8     cat.jumps()
9     console.log(cat.lives)

打印结果为： 7

使用箭头函数

1 var cat = {
2       lives: 9,
3       jumps: () => this.lives--
4     }
5     cat.jumps()
6     cat.jumps()
7     console.log(cat.lives)

打印结果为9

2. call apply bind扔不能改变this指向

1  window.color = ‘red‘
2     let color = ‘green‘
3     let obj = {
4       color: ‘blue‘
5     }
6     let sayColor = function() {
7       return this.color
8     }
9     console.log(sayColor.call(obj))

打印结果为blue;

使用箭头函数：

1 window.color = ‘red‘
2     let color = ‘green‘
3     let obj = {
4       color: ‘blue‘
5     }
6     let sayColor = () => this.color
7 
8     console.log(sayColor.call(obj))

打印结果为： red;

由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。