微信小程序坑-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