javascript - 箭头函数中的this问题

问题描述

问 题

var p= {
   data:{
      flag: true
   },
   init: ()=>{
     console.log(this.data.flag)
   }
}

p.init()

上面的代码会打印出"TypeError: Cannot read property 'flag' of undefined

var p= {
   data:{
      flag: true
   },
   init: function(){
     console.log(this.data.flag)
   }
}

p.init()

这次就可以正常的输出true

我想使用箭头函数的方式来写代码，但是this访问不到了，难道在箭头函数中，想要访问this,我必须再赋值一次

var p= {
   data:{
      flag: true
   },
   init: ()=>{
     console.log(p.data.flag)
   }
}

p.init()

难道要改成上面这样？不知道是不是这样写了，请教一下朋友们！

解决方案

可以简单的理解，JS 每一个 function 有自己独立的运行上下文，而箭头函数不属于普通的 function，所以没有独立的上下文。所以在箭头函数里写的 this 其实是包含该箭头函数最近的一个 function 上下文中的 this（如果没有最近的 function，就是全局）。

看看 typescript（至少这部分语法兼容ES2015，所以不用担心语法的问题，因为可以在线转换，方便，所以用它）的转换结果

这篇关于javascript - 箭头函数中的this问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！