vue中箭头函数与普通函数 this指向

Question

问题描述：
封装了axios方法，getAxios()是成功时的callback
为什么会出现下面代码中的结果

我的想法：
1.()=>{} 等价于 function(){}.bind(this)
2.在严格模式下,没有直接调用者的函数中的this是 undefined
自己隐约知道原因，但又不确定，希望能得到明朗的答案。

  created () {
    this.getBannerList()
  },

  methods: {
    getBannerList () {
      getAxios('/bannerApi', (res) => {
        console.log(this)      //结果：VueComponent对象 
      })  
      
      getAxios('/bannerApi', function (res) {
        console.log(this)      //结果: undefined
      })
    }
  }

Answer 1

箭头函数指向外部，类似于bind(this), 使用vue，babel插件会将其装换成ES5.

Answer 2

普通函数的this指向你可以看一下这篇博文，希望对你有帮助https://segmentfault.com/a/11...

Answer 3

普通方法内部有this的绑定

返回 undefined 是因为这是一个异步的回调 在严格模式下 this 就是 undefined

箭头函数不绑定 this 而且 箭头函数的this在要向上一个作用域链去查找 而且 this 只在定义时确定 不是运行时确定