箭头函数 | 一叶凉夏

5.18

1.箭头函数：

==函数声明尽量使用箭头函数的方式==

绝大多数情况下都可以用=> 代替function来声明函数。

=>函数的作用已经完全包围了function，并且this指向清晰。

vue react里 this是一个高频使用的model。

vue里就出现了一种=>代替不了function的情况：在声明data和生命周期函数中如：mounted，created等的情况下，依然要用function或函数名+()的方式来声明函数。

（这个跟vue作者尤雨溪当年在google angular项目组的一个bug有关，他在这里规避掉了箭头函数声明的情况）

更简短的函数并且不绑定this

var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) {
  return element.length;
}); // 返回数组：[8, 6, 7, 9]

// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数只有一个参数时，可以省略参数的圆括号
elements.map(element => {
 return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element => element.length); // [8, 6, 7, 9]

箭头函数可以用于当函数体只有一个return语句的时候，省略return，直接element => element.length

省略了function(element){return}等语句。

this的指向：

构造函数，this指向创建的新对象
严格模式下的函数调用，this指向undefined
对象方法，它的this指向这个对象…

setInterval()方法：创建计时器，函数每次调用会在延迟后进行。

下面是this指向的不同：

function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象,
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}

var p = new Person();

通过将this值分配给封闭的变量，可以解决this问题。将this指向的对象传递给that，而下面的函数是可以获取到that的值的，因此这个方式可以解决this指向不同的问题。

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    // 回调引用的是`that`变量, 其值是预期的对象.
    that.age++;
  }, 1000);
}

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}

var p = new Person();

=> 的用处就显现出来了，他可以继承上一层的this，这样就不需要定义that去做更多不容易理解的操作了。