ES6 箭头函数

ES6 引入了箭头函数（Arrow Functions）作为一种新的函数定义方式，它提供了一种更简洁、更灵活的语法，并改变了 this 的绑定机制。

1. 箭头函数的语法

箭头函数使用 => 符号来定义，其语法比传统函数更简洁：

// 传统函数
function add(x, y) {
  return x + y;
}

// 箭头函数
const add = (x, y) => x + y;

简化规则：

• 省略 function 关键字: 箭头函数不需要 function 关键字。
• 单参数省略括号: 如果只有一个参数，可以省略参数列表的花括号。
• 单行函数体省略花括号和 return: 如果函数体只有一行代码，可以省略花括号和 return 关键字，表达式结果将自动返回。

// 单参数省略括号
const square = x => x * x;

// 单行函数体省略花括号和 `return`
const greet = name => `Hello, ${name}!`; 

// 多参数
const sum = (x, y) => x + y;

// 无参数
const logTime = () => console.log(new Date());

2. 箭头函数的 this 绑定

箭头函数的 this 绑定机制与传统函数不同，它没有自己的 this，而是继承了其词法作用域的 this。

传统函数的 this：

• this 的绑定取决于函数的调用方式。
• 在严格模式下，如果函数没有显式绑定 this，则 this 指向全局对象（浏览器中为 window）。
• 在非严格模式下，如果函数没有显式绑定 this，则 this 指向调用函数的对象。

箭头函数的 this：

• 箭头函数的 this 在定义时就确定了，不会随着调用方式的变化而改变。
• 箭头函数的 this 指向的是定义它时的词法作用域的 this。

const obj = {
  name: 'John',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  },
  sayHelloArrow: () => {
    console.log('Hello, ' + this.name); // 这里 `this` 指向全局对象
  }
};

obj.sayHello(); // 输出：Hello, John
obj.sayHelloArrow(); // 输出：Hello, undefined (因为 `this` 指向全局对象，而全局对象没有 `name` 属性)

 this指向的是外层上下文环境的this

const obj = {
  name: 'John',
  sayHello: function() {
    setTimeout(() => {
      console.log('Hello, ' + this.name); // 指向 obj 对象
    }, 1000);
  }
};

obj.sayHello();//Hello,John

使用场景：

• 事件处理程序: 在事件处理程序中，箭头函数可以避免 this 指向 window 对象，简化代码。
• 回调函数: 在回调函数中，箭头函数可以确保 this 指向定义它时的词法作用域，避免 this 绑定问题。
• 方法定义: 在对象方法中，箭头函数可以确保 this 指向对象本身，简化代码。

求点赞！！！求点赞！！！求点赞！！！