JS中箭头函数与this的写法和理解

JS中箭头函数与this的写法和理解是一个非常重要的问题，因为箭头函数的this规则和普通函数有所不同，如果不理解它的具体规则，就容易出现一些令人困惑的问题。下面就是一份关于箭头函数和this的完整攻略。

箭头函数的基本语法

箭头函数是在ES6中引入的一种语法，它是一种特殊的函数，它有以下的形式：

(parameter1, parameter2, ..., parameterN) => { statements }

箭头函数的语法比较简单，它只有一个表达式，并且这个表达式会自动作为函数的返回值。当函数体只有一个表达式的时候，可以省略花括号 {} 和return关键字。

(parameter1, parameter2, ..., parameterN) => expression;

当前只有一个参数的情况下，可以省略掉括号。

parameter => expression;

如果箭头函数没有参数，需要使用一对空的括号。

() => { statements }

this的基本概念

在JavaScript的函数中，this是一个非常关键的概念，它通常用来引用当前的执行上下文。在箭头函数中，this的值也是非常重要的，因为它的值不像普通的函数那样，由函数被调用的方式来决定，而是由定义时的上下文来决定。

在JS中，this可以指向以下几个对象：

• 全局对象
• 当前对象
• 新创建的对象
• 显式指定的对象

在普通函数中，this的值是根据函数的调用方式来确定的。举个例子，下面这个函数将会输出全局对象：

function foo() {
  console.log(this);
}

foo();

而在箭头函数中，this的值是在函数定义时确定，而不是在函数被调用时确定，因为箭头函数没有自己的this，它会继承它的父级上下文的this。

箭头函数中的this

在箭头函数中，this的值是在函数定义时确定的，而不是在函数被调用时确定的。下面是一个例子，可以说明箭头函数中的this：

let person = {
  name: 'Tom',
  sayName: () => {
    console.log(this.name);
  }
}

person.sayName();

上面的代码将会输出 undefined。因为sayName函数的this是在定义时就被确定了，并且它指向了全局对象window，而非person对象。

因此箭头函数是不能被作为构造函数使用的，因为它不会创建一个新的对象。

箭头函数不能使用call、apply、bind方法，因为这些方法在ES5中被用于改变函数执行时期的this值。

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

除了this的不同，箭头函数还有以下与普通函数不同：

1. 没有自己的this对象
2. 不能用作构造函数，不能使用new命令
3. 没有原型
4. 不可以改变this指向，即不能使用call()、apply()、bind()这些方法

那么下面的示例案例，就可以更好的理解普通函数与箭头函数的不同：

// 定义一个对象
let person = {
  age: 25,

  // 普通函数
  sayAge: function() {
    console.log(this.age);
  },

  // 箭头函数
  sayAgeArrow: () => {
    console.log(this.age);
  }
};

// 调用普通函数
person.sayAge(); // 输出25

// 调用箭头函数
person.sayAgeArrow(); // 输出undefined

上面的代码中，普通函数 sayAge 内的 this 指向了当前的对象 person，而箭头函数 sayAgeArrow 的 this 指向了全局对象。因此，当 sayAgeArrow 函数被调用时，它输出的是 undefined。

注意事项

虽然使用箭头函数可以减少一些代码量，但是在实际的开发中，还是需要注意以下几点：

1. 箭头函数不能作为构造函数，可以使用普通函数来作为构造函数。
2. 箭头函数不能被当作方法使用，因为它没有自己的this对象，this指向了上层作用域。
3. 箭头函数中的arguments关键字会继承上层作用域中的arguments。
4. 箭头函数不能使用ES5的call、apply和bind方法给this指向赋值，但可以使用展开操作符或者数组的解构来传递参数。

示例说明

下面是两个示例，用于说明箭头函数和this的规则：

示例一：简单的箭头函数

let person = {
  name: 'Tom',
  sayName: () => {
    console.log(this.name);
  }
}

person.sayName();

上面的代码将会输出 undefined，因为箭头函数中的this指向了全局对象，而非person对象。

示例二：箭头函数作为事件处理程序

<button id="myButton">点击我</button>

let myButton = document.getElementById('myButton');

myButton.addEventListener('click', () => {
  console.log(this); // 输出 Window 对象
});

上面的代码中，箭头函数用作事件处理程序。在事件处理程序中，箭头函数的this值指向了全局对象window，而不是事件的目标元素myButton。