微信小程序坑-ES6中lambda表达式的this指针
其实这个应该算是es6里面的坑,es6做了不小的改动,添加了许多特性,箭头函数表达式就是其中一种,目前用得最多的就是替代原本的匿名函数,但当中有不少的坑。
// ES5 callback: function(e) { // balabala... } //ES6 callback: e => { // balabala... }
这是其中的写法,接下来,让我们看看下面的代码
var test = new Object(); test.getThis = function() { return this; } test.getLambdaThis = () => { return this; } console.log(test.getThis()); console.log(test.getLambdaThis());
你或许会认为他们返回的this都是指向test对象,但事实并非如此
匿名函数的指针指向的是test对象,而箭头函数表达式的指针则是指向的window
为何?其实在es6中的箭头函数表达式中已经说明了这点:
不绑定
this
在箭头函数出现之前,每个新定义的函数都有它自己的 this
值(在构造函数的情况下是一个新对象,在严格模式的函数调用中为 undefined,如果该函数被称为“对象方法”则为基础对象等)。This
被证明是令人厌烦的面向对象风格的编程。
简单来说,就是箭头函数没有它自己的this指针,它的this指针是指向父级的,这里是window
接下来,再来看看在微信小程序开发里面会出现什么样的情况。
因为微信开发工具里面默认是打开了es6转es5的,所以可以对照转换后的代码来查看
瞧,转换后的this指针直接变成undefined
所以要解决这个问题,有两个办法
1.使用原本的匿名函数来编写(编写小程序的话,推荐)
2.在外面使用类似
var _that = this;
的方法将this传值进去,不过这在小程序里面不太好用,所以推荐第一种方法。
关于箭头函数,可以参考这个说明:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
还可以参考这篇文章:JS中的箭头函数与this