01 ES6的箭头函数

箭头函数是 ECMAScript 6 (ES6) 引入的一种新的函数书写方式，它提供了更简洁的语法和一些独特的行为。以下是箭头函数的一些关键点：

1. 语法简洁：
   箭头函数使用 => 语法，左边是参数列表，右边是函数体。如果只有一个参数，可以省略括号；如果函数体只有一条语句，可以省略花括号。

   // 传统函数写法
   function sum(a, b) {
     return a + b;
   }
   
   // 箭头函数写法
   const sum = (a, b) => a + b;
   

2. 函数声明式与赋值式：
   箭头函数通常用于函数赋值，而不是函数声明。这意味着你不能使用 function 关键字，而是使用 const 或 let 来赋值箭头函数。

   // 函数赋值式
   const greet = () => console.log('Hello!');
   

3. 调用方式：
   箭头函数的调用方式与传统函数相同，根据其赋值的变量名进行调用。

   sum(5, 3); // 输出 8
   greet();   // 输出 Hello!
   

4. this 的行为：
   箭头函数没有自己的 this 绑定，它会捕获其所在上下文的 this 值，作为自己的 this。

   function Person() {
     this.age = 0;
     setInterval(() => {
       this.age++; // 正确使用 this
     }, 1000);
   }
   

5. 没有 arguments 对象：
   箭头函数中没有 arguments 对象，如果需要使用类似的功能，可以使用剩余参数（rest parameters）。

   const sumAll = (...args) => args.reduce((total, num) => total + num, 0);
   

6. 不适用场景：
   由于箭头函数没有自己的 this，它们不适合用于需要动态 this 的方法，如对象的方法或需要使用 call、apply、bind 的场景。

7. 构造函数：
   箭头函数不能用作构造函数，即不能使用 new 关键字。

   const Person = () => {};
   // 下面的调用会抛出错误
   // new Person();
   

箭头函数提供了一种更简洁、更易于理解的方式来编写函数，特别是在那些不需要完整函数体的简单场景中。然而，它们也有一些限制，需要根据具体的使用场景来选择是否使用箭头函数。

原文地址：https://blog.csdn.net/gt8011/article/details/140562544

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！