关于ES6中的箭头函数超详细梳理

箭头函数的概述

ES6中新增的箭头函数，是一种新的函数表达式，可以简化函数的创建过程，提高代码的可读性。它具有以下几个特点：

• 采用箭头符号“=>”作为函数定义符号。
• 函数体中只有一句代码时，可以省略花括号和return。
• 箭头函数没有自己的this，它的this由外部的上下文决定。
• 箭头函数不可以作为构造器使用，也不能使用call()和apply()等函数方法。

箭头函数的基本语法

箭头函数的语法格式如下：

(param1, param2, ..., paramN) => expression

// 或者
(param1, param2, ..., paramN) => {
  // 函数体
  return expression;
}

其中，箭头函数的参数可以是0个、1个、多个参数。如果只有一个参数，则可以省略括号。而当没有参数时，则必须使用空括号。

示例1：箭头函数的基本用法。

// ES6写法
var sum = (a, b) => a + b;

// ES5写法
var sumES5 = function(a, b) {
  return a + b;
}

示例2：箭头函数返回一个对象。

// ES6写法
var getObject = (id, name) => ({ id, name });

// ES5写法
var getObjectES5 = function(id, name) {
  return { id: id, name: name };
}

箭头函数的this指向问题

在ES5中，函数内定义的this指向是函数本身。而在ES6中的箭头函数中，this的指向由箭头函数外部的上下文决定。也就是说，箭头函数中的this指向的是定义时所在的对象，而不是执行时所在的对象。

示例3：箭头函数中的this指向

var person = {
  name: 'Tom',
  age: 20,
  sayHi: function() {
    // ES5中, 函数内定义的this指向是函数本身
    // ES6中，箭头函数中的this指向的是person对象，箭头函数外部的上下文决定
    setTimeout(function() {
      console.log('Name:', this.name, 'Age:', this.age);
    }, 1000);

    // ES6箭头函数中的this指向的是定义时所在的对象
    setTimeout(() => {
      console.log('Name:', this.name, 'Age:', this.age);
    }, 2000);
  },
};

person.sayHi(); 

箭头函数的注意事项

• 箭头函数不能作为构造函数使用，因为它没有自己的this绑定。
• 箭头函数没有自己的this绑定，如调用apply、call、bind方法是无效的。
• 箭头函数不能绑定arguments，可以使用rest参数...来代替。
• 箭头函数不能作为generator函数使用。

箭头函数的高级用法

• 箭头函数表达式可以作为对象中的方法。

示例4：箭头函数表达式作为对象中的方法。

var calculator = {
  operand1: 1,
  operand2: 2,
  add: function() {
    // 作为对象中的方法
    var sum = () => {
      return this.operand1 + this.operand2;
    };
    console.log('Sum:', sum());
  },
};

calculator.add();

• 箭头函数表达式可以使用默认参数。

示例4：箭头函数表达式使用默认参数。

var multiply = (a, b = 1) => a * b;

console.log(multiply(5)); // 5
console.log(multiply(5, 10)); // 50

• 箭头函数表达式可以被当做普通函数使用。

示例5：箭头函数表达式当做普通函数使用。

// 箭头函数表达式可以被当做普通函数使用
var func = () => 'Hello World';
console.log(func()); // Hello World

箭头函数与普通函数的区别

• 箭头函数可以省略function关键字。
• 箭头函数没有arguments对象，可以通过rest参数...来代替。
• 箭头函数的this是静态的，由外部的上下文决定，而非动态的。

总结

箭头函数是ES6中新出现的一种函数表达式，可以简化函数的创建过程，提高代码的可读性。箭头函数具有诸多特点，如this指向问题、不能作为构造函数、不能绑定arguments等。在实际开发中，合理使用箭头函数能够编程效率，提高代码的可读性和可维护性。