ES6学习3-箭头函数

jiezi

5 年前

ES6 新增了箭头函数，简化了函数声明过程。

var f = value => value;
// 等同于下面函数
var f = function (value) {return value;};

如果不需要要参数或者多个参数，使用圆括号代表参数部分。如果箭头函数的代码块部分多于一条语句，需要使用大括号，并使用 return 返回。如果直接返回一个对象，必须在对象外面加括号。

var f = {} => 1;
var sum = (num1, num2) => {return num1 + num2;};
// 直接返回一个对象
var getName = name => ({name: 'jack'});

箭头函数可以与变量解构结合使用。

let person = ({name, age}) => name + '今年' + age;
let obj = {name: '小王', age: 25};
person(obj); // "小王今年 25"

箭头函数可以使得表达更加简洁。

let arr = [1, 3, 4, 2, 5];
var result = value => value.sort((a, b) => a - b);
result(arr); // [1, 2, 3, 4, 5]

箭头函数的 this 指向 定义时所在对象 ，而不是使用时所在的对象。因此，在箭头函数中 this 对象的指向是固定的。

function foo() {setTimeout(() => {console.log('id:', this.id);
    }, 100);
}

var id = 35;

foo.call({id: 55}); // id: 55

上面代码中，setTimeout 的参数是一个箭头函数，这个箭头函数的定义在 foo 函数生成时才生效，而它真正执行要等到 100ms 后，如果是普通函数，执行时 this 指向全局对象 window，这时应该输出 35。但是箭头函数的 this 总是指向函数定义生效时所在的对象（本例是{id：42}），所以最后输出 42。

箭头函数的 this 指向固化，实际原因是箭头函数根本 没有自己的 this，所以箭头函数内的 this 就是外层代码块的 this。需要注意一点，因为没有 this，所以不能用作构造函数, 也不能使用 call()、apply()、bind()这些方法改变 this 指向。

function foo() {setTimeout(() => {console.log('id', this.id);
  }, 100);
}
// 等同于 ES5 版本
function foo() {
  var _this = this;
  
  setTimeout((function () {console.log('id', _this.id);
  }, 100);
}

上面的代码中，转换后 ES5 版本清楚的说明了箭头函数里面根本没有自己的 this，而是调用外层的 this。

箭头函数内部还可以再使用箭头函数。

let insert = (value) => ({into: (array) => ({after: (afterValue) => {array.splice(array.indexOf(afterValue) + 1, 0, value);
  return array;
}})});

insert(2).into([1, 3]).after(1); // [1, 2, 3]

ps … 参考资料《ES6 标准入门》（第三版）

ES6学习3-箭头函数

1 基本用法

2 this 指向

3 箭头函数的嵌套