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

问题描述:
封装了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
      })
    }
  }

回答:

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

回答:

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

回答:

普通方法内部有this的绑定

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注