【ES6复习笔记】箭头函数（5）

简介

本教程将介绍如何在 JavaScript 中使用箭头函数，包括箭头函数的基本语法、特点以及在实际开发中的应用。通过本教程，你将学会如何使用箭头函数来简化代码，提高代码的可读性和简洁性。

箭头函数的基本语法

箭头函数是 ES6 引入的一种新的函数定义方式，它使用箭头 => 来定义函数。箭头函数的基本语法如下：

(param1, param2,..., paramN) => {
  // 函数体
}

参数

箭头函数可以接受任意数量的参数，参数之间使用逗号分隔。如果函数只有一个参数，则可以省略参数列表的括号。例如：

let add = n => {
  return n + n;
}

函数体

箭头函数的函数体可以是一个表达式，也可以是一个代码块。如果函数体是一个表达式，则可以省略花括号和 return 关键字，此时表达式的结果就是函数的返回值。例如：

let pow = n => n * n;

如果函数体是一个代码块，则需要使用花括号将代码块包围起来，并且需要使用 return 关键字来返回函数的结果。例如：

let add = (n, m) => {
  return n + m;
}

箭头函数的特点

1. this 是静态的

箭头函数的 this 是静态的，它始终指向函数声明时所在作用域下的 this 的值。这意味着箭头函数不会创建自己的 this 上下文，而是继承外层函数的 this。例如：

function getName() {
  console.log(this.name);
}

let getName2 = () => {
  console.log(this.name);
}

window.name = '尚硅谷';
const school = {
  name: "ATGUIGU"
}

getName(); // 输出: 尚硅谷
getName2(); // 输出: 尚硅谷

getName.call(school); // 输出: ATGUIGU
getName2.call(school); // 输出: 尚硅谷

2. 不能作为构造函数

箭头函数不能作为构造函数，因此不能使用 new 关键字来实例化对象。例如：

let Person = (name, age) => {
  this.name = name;
  this.age = age;
}

let me = new Person('xiao', 30); // 报错: Person is not a constructor

3. 不能使用 arguments 变量

箭头函数内部没有自己的 arguments 对象，因此不能使用 arguments 变量。如果需要访问函数的参数，可以使用剩余参数 ... 来获取。例如：

let fn = () => {
  console.log(arguments); // 报错: arguments is not defined
}

fn(1, 2, 3);

4. 箭头函数的简写

省略小括号

当箭头函数只有一个参数时，可以省略参数列表的括号。例如：

let add = n => {
  return n + n;
}

省略花括号和 return 关键字

当箭头函数的函数体只有一条语句时，可以省略花括号和 return 关键字，此时语句的执行结果就是函数的返回值。例如：

let pow = n => n * n;

箭头函数的应用场景

箭头函数适用于以下场景：

1. 回调函数：箭头函数非常适合作为回调函数，特别是在事件处理、定时器和数组方法中。
2. 简洁的函数表达式：箭头函数可以使代码更加简洁，特别是在函数体很简单的情况下。
3. 避免 this 指向问题 ：由于箭头函数的 this 是静态的，因此可以避免在回调函数中使用 this 时出现的指向问题。

let school = {
    name: '尚硅谷',
    getName() {
        let fn5 = () => {
            console.log(this); // 此处的this指向school对象
        }
        fn5();
    }
};
school.getName(); // 输出: 学校对象

箭头函数的注意事项

1. 箭头函数没有自己的 this ：箭头函数的 this 是继承自外层函数的，因此在使用箭头函数时，需要注意 this 的指向。
2. 箭头函数不能作为构造函数 ：箭头函数不能使用 new 关键字来实例化对象。
3. 箭头函数没有 arguments 对象 ：箭头函数内部没有自己的 arguments 对象，因此不能使用 arguments 变量。
4. 箭头函数的简写：在使用箭头函数的简写形式时，需要注意函数体的复杂性，避免代码过于晦涩难懂。

总结

箭头函数是 ES6 引入的一种新的函数定义方式，它具有简洁的语法和一些特殊的特性。箭头函数的 this 是静态的，它不会创建自己的 this 上下文，而是继承外层函数的 this。箭头函数不能作为构造函数，也没有自己的 arguments 对象。在实际开发中，箭头函数适用于回调函数、简洁的函数表达式以及避免 this 指向问题的场景。在使用箭头函数时，需要注意其特点和注意事项，以确保代码的正确性和可读性。