微信小程序的setData报错问题

小程序的setData报错问题，小白很容易遇到。最近小程序在绑定数据中返回dom，发现一个问题：

最近小程序在绑定数据中返回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函数。