2. 箭头函数(Arrow Functions)

ES6 中,箭头函数就是函数的一种简写形式,使用括号包裹参数,跟随一个 =>,紧接着是函数体:

  1. var getPrice = function() {
  2. return 4.55;
  3. };
  4. // Implementation with Arrow Function
  5. var getPrice = () => 4.55;

需要注意的是,上面栗子中的 getPrice 箭头函数采用了简洁函数体,它不需要 reture 语句,下面这个栗子使用的是正常函数体:

  1. let arr = ['apple', 'banana', 'orange'];
  2. let breakfast = arr.map(fruit => {
  3. return fruit + 's';
  4. });
  5. console.log(breakfast); // apples bananas oranges

当然,箭头函数不仅仅是让代码变得简洁,函数中 this 总是绑定总是指向对象自身。具体可以看看下面几个栗子:

  1. function Person() {
  2. this.age = 0;
  3. setInterval(function growUp() {
  4. // 在非严格模式下,growUp() 函数的 this 指向 window 对象
  5. this.age++;
  6. }, 1000);
  7. }
  8. var person = new Person();

我们经常需要使用一个变量来保存 this,然后在 growUp 函数中引用:

  1. function Person() {
  2. var self = this;
  3. self.age = 0;
  4. setInterval(function growUp() {
  5. self.age++;
  6. }, 1000);
  7. }

而使用箭头函数可以省却这个麻烦:

  1. function Person(){
  2. this.age = 0;
  3. setInterval(() => {
  4. // |this| 指向 person 对象
  5. this.age++;
  6. }, 1000);
  7. }
  8. var person = new Person();

这里 可以阅读更多 this 在箭头函数中的词法特性。