小程序箭头函数

箭头函数（Arrow Function）

刚开始我也不知道js的箭头函数到底是什么东西，用了才发现，这特么就是lambda表达式么。箭头函数简化了函数的写法，但是还是跟普通的function有区别，主要是在作用域上。

比如我们需要请求网络：

wx.request({
 url: 'url', 
 header: {
   'Content-Type': 'application/json'
 },
 success: function(res) {
  console.log(res.data)
 }
});

用函数还是可以简化一定的代码量，哈哈哈。

wx.request({
 url: 'url', 
 header: {
   'Content-Type': 'application/json'
 },
 success: (res) => {
  console.log(res.data)
 }
});

注意到那个success指向的回调函数了么，function关键字没了，被醒目的=>符号取代了。看到这里大家是不是认为以后我们写function就用箭头函数代替呢？答案是不一定，而且要非常小心！

function和箭头函数虽然看似一样，只是写法简化了，其实是不一样的，function声明的函数和箭头函数的作用域不同，这是一个不小心就变坑的地方。

Page({
  data: {
    windowHeight: 0
  },
  onLoad() {
    let _this = this;
    wx.getSystemInfo({
      success: function(res) {
        _this.setData({windowHeight: res.windowHeight});
      }
    });
  }
});

一般我们获取设备的屏幕高度差不多是这样的步骤，在页面刚加载的onLoad方法中通过wx.getSystemInfoAPI来获取设备的屏幕高度，由于success指向的回调函数作用域跟onLoad不一样，所以我们无法像onLoad函数体中直接写this.setData来设置值。我们可以定义一个临时变量指向this，然后再回调函数中调用。

哪箭头函数的写法有什么不一样呢？

Page({
  data: {
    windowHeight: 0
  },
  onLoad() {
    let _this = this;
    wx.getSystemInfo({
      success: (res) => {
        _this.setData({windowHeight: res.windowHeight});
      }
    });
  }
});

运行之后好像感觉没什么区别呀，都能正常执行，结果也一样。确实没什么区别，你甚至这样写都可以：

Page({
  data: {
    windowHeight: 0
  },
  onLoad() {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({windowHeight: res.windowHeight});
      }
    });
  }
});

咦？这样写，this的指向的作用域不是不一样么？其实这就是要说明的，箭头函数是不绑定作用域的，不会改变当前this的作用域，既然这样，在箭头函数中的this就会根据作用域链来指向上一层的作用域，也就是onLoad的作用域，所以他们得到的结果都是一样的。

其实我个人的习惯是无论用普通的函数写法还是箭头函数的写法，都习惯声明临时的_this来指向需要的作用域，因为箭头函数没有绑定作用域，写的层次深了，感觉就会很乱，理解起来比较困难，在后面的案例中，我也会延续这个习惯。