箭头函数中的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()

难道要改成上面这样?不知道是不是这样写了,请教一下朋友们!

阅读 4.9k
评论
    5 个回答
    • 40.6k

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

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

    clipboard.png

      箭头函数没有自己的this,他的this值继承自外部。而这里就是window对象了,所以会报undefined的错误。

        • 2.5k

        这样写

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

          箭头函数的this会指向到定义时的作用域上,而普通函数中的this会指向调用时的函数作用域上,所以p.init中的this指向的实际上是定义p时的作用域,也就是window,所以运行时会报错。我猜作者想要的是函数的简写形式吧:

          var p={
            data:{
              flag:true
            },
            //es6中的简写形式
            init(){
              console.log(this.data.flag)
            }
          }
            撰写回答

            登录后参与交流、获取后续更新提醒