箭头函数 JavaScript 规则

JavaScript 中的箭头函数是 ES6 标准引入的新特性。箭头函数提供了一种更简洁、更清晰的函数定义语法，使代码更易于阅读和维护。

定义箭头函数

箭头函数使用 => 符号定义，格式如下：

(parameters) => {
  // 函数体
}

其中，parameters 表示函数的参数列表。如果只有一个参数，可以省略括号；如果没有参数，需要保留空括号。

例如，定义一个有两个参数的箭头函数：

let sum = (a, b) => {
  return a + b
}

定义一个有一个参数的箭头函数：

let square = num => {
  return num * num
}

定义一个没有参数的箭头函数：

let getName = () => {
  return 'John Doe'
}

改进箭头函数

箭头函数的语法非常简洁，但它有一些限制，也需要注意一些注意事项。

箭头函数中的 this

箭头函数没有自己的 this，它继承外部作用域的 this。这意味着，箭头函数中的 this 始终指向定义时的作用域，而不是函数被调用时的作用域。

例如，定义在对象中的箭头函数中的 this 指向该对象：

let person = {
  name: 'John Doe',
  getName: () => {
    return this.name
  }
}

console.log(person.getName()) // 输出 undefined

由于箭头函数没有自己的 this，因此 this.name 实际上是取不到值的。如果要访问对象的属性，应该使用对象的引用，而不是箭头函数中的 this：

let person = {
  name: 'John Doe',
  getName: function() {
    return this.name
  }
}

console.log(person.getName()) // 输出 John Doe

箭头函数中的 arguments

箭头函数没有自己的 arguments 对象，它继承外部作用域的 arguments。这意味着，箭头函数中没有对应于参数列表的 arguments 对象。

例如，arguments 对象在普通函数中可用：

function sum(a, b) {
  console.log(arguments.length) // 输出 2
}

sum(1, 2)

而在箭头函数中则不可用：

let sum = (a, b) => {
  console.log(arguments.length) // 报错
}

sum(1, 2)

如果需要使用参数列表，应该使用具名参数或结构：

let sum = (a, b) => {
  console.log(a, b) // 输出 1 2
}

sum(1, 2)

箭头函数不能用作构造函数

箭头函数没有 prototype 属性，因此不能用作构造函数。如果创建一个箭头函数的实例，会抛出一个错误。

例如，下面的代码会抛出错误：

let Person = name => {
  this.name = name
}

let john = new Person('John Doe') // 报错

箭头函数没有 yield 关键字

箭头函数是不能使用 yield 关键字的，因此不能用作生成器函数。

总结

箭头函数是 JavaScript 中的一种新特性，它具有简洁、清晰的语法和较好的可读性。箭头函数的使用需要注意限制，例如不能作为构造函数、不能使用 arguments 对象等。熟练掌握箭头函数的用法可以提高代码的效率和可维护性。