前言

最近小程序在绑定数据中返回dom,发现一个问题:



thirdScriptError

Cannot read property 'setData' of undefined;at pages/index/index page changText function

TypeError: Cannot read property 'setData' of undefined

解决过程

在js文件写的是(es6):

changText: () => {

  // console.log(_this);

  this.setData({

    motto: "dad"

  })

}

但是es5写法是正常的:

changText: (function () {

  console.log(this);

  this.setData({

    motto: "dad"

  });

}),

为什么es5正确显示而es6却不行呢?

总结

对此抱着疑问的态度搜集相关的资料,了解到es6箭头函数的一些坑:

箭头函数表达式的语法比函数表达式更短,并且不绑定自己的this,arguments,super或 new.target。这些函数表达式最适合用于非方法函数,并且它们不能用作构造函数。

这段文字来自MDN Web Doc介绍箭头函数一段文字。

更多的知识可以去查看它的文档:MDN Web Doc

其实说白了es6的箭头函数和es5 function函数看起来差不多,只是写法简化了,其实是不一样的,function声明的函数和箭头函数的作用域不同,这是一个不小心坑的地方。

所以对于这个结果,还是换回es5的function函数去写最好了。

箭头函数和function的区别:

  • 箭头函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象
  • 箭头函数不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误
  • 箭头函数不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替
  • 不可以使用yield命令,因此箭头函数不能用作Generator函数。
分类: 奇淫技巧

淮城一只猫

永远年轻,永远热泪盈眶

发表评论

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