微信小程序坑-ES6中lambda表达式的this指针

其实这个应该算是es6里面的坑,es6做了不小的改动,添加了许多特性,箭头函数表达式就是其中一种,目前用得最多的就是替代原本的匿名函数,但当中有不少的坑。

这是其中的写法,接下来,让我们看看下面的代码

你或许会认为他们返回的this都是指向test对象,但事实并非如此

匿名函数的指针指向的是test对象,而箭头函数表达式的指针则是指向的window

为何?其实在es6中的箭头函数表达式中已经说明了这点:

不绑定this

在箭头函数出现之前,每个新定义的函数都有它自己的 this值(在构造函数的情况下是一个新对象,在严格模式的函数调用中为 undefined,如果该函数被称为“对象方法”则为基础对象等)。This被证明是令人厌烦的面向对象风格的编程。

 

简单来说,就是箭头函数没有它自己的this指针,它的this指针是指向父级的,这里是window

 

接下来,再来看看在微信小程序开发里面会出现什么样的情况。

因为微信开发工具里面默认是打开了es6转es5的,所以可以对照转换后的代码来查看

瞧,转换后的this指针直接变成undefined

所以要解决这个问题,有两个办法

1.使用原本的匿名函数来编写(编写小程序的话,推荐)

2.在外面使用类似

的方法将this传值进去,不过这在小程序里面不太好用,所以推荐第一种方法。

 

关于箭头函数,可以参考这个说明:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

还可以参考这篇文章:JS中的箭头函数与this

留下评论

biubiubiu~

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据