this指向问题

Question

这块得this指的是什么，和箭头函数有什么关系？没听懂老师里面讲的什么意思

Answer 1

fishenal 2017-08-09 13:46:26

this是当前组件，箭头函数的意思是这样，如果这么写：

// 这里的this是导出组件对象的this，包含了data, props等等，可以理解为这个组件本身

this.$http.get('xxx').then(function () {

        // 这里的this是匿名函数体里的this，所以如果用this.newsList会发现不存在

        console.log(this)

})

如果用箭头函数

// 这里的this是导出组件对象的this，包含了data, props等等，可以理解为这个组件本身

this.$http.get('xxx').then( (res) => {

        // 现在的this跟匿名函数外面的this保持一致，可以获取到this.newsList

        console.log(this)

})

如果不用箭头函数，需要通过一个变量把外层的this传递进去：

// 这里的this是导出组件对象的this，包含了data, props等等，可以理解为这个组件本身

var me = this

this.$http.get('xxx').then(function () {

        console.log(this.newsList) // undefined

        console.log(me.newsList) // 成功得到组件的属性

})

• 提问者 笨小熊的一天 #1

  非常感谢！

• 提问者 笨小熊的一天 #2

  匿名函数this不会指向上下文，箭头函数this会指向上下文，是这个意思吧