JavaScript(JS)箭头函数详解

上一节我们详细介绍了JS中的函数表达式，本节我们将深入探讨ES6引入的重要特性——箭头函数。什么是箭头函数？它是一种使用“=>”语法定义函数的简洁方式，就像给函数装上了"箭头"，让函数定义更加简洁、直观。

我们先来看看箭头函数长什么样子：

/* 箭头函数提供了一种更简洁的函数定义方式 */
// 传统函数表达式
const oldf = function(a, b) {
    return a + b;
};
// 箭头函数
const newf = (a, b) => {
    return a + b;
};
console.log(oldf(0, 1)); // 1
console.log(newf(0, 1)); // 1

对比传统的函数表达式，我们使用“=>”形象地表达了函数（function）的声明，使得我们的函数定义更加简洁直观！

箭头函数能够很好地简化函数声明操作：

/* 箭头函数提供了一种更简洁的函数定义方式 */
/*1. 单独参数*/
const f1 = n =>{return n}
const f2 = n => n
console.log(f1(0));
console.log(f2(0));//打印2个0
/*2. 无参或多参需要括号*/
const f3 = () =>{return 0}
const f4 = (a,b,c,d,e) => 0
console.log(f3(0));
console.log(f4(0));//打印2个0
/*3. 单行可以简写，多行必须有花括号和return*/
const f5 = a =>0//单行
const f6 = (n1,n2) => //多行
{
  let a=1
  let b=1
  let c=1
  return 0
}
console.log(f5(0));
console.log(f6(0));//打印2个0

箭头函数有自己的特点，分别是没有this绑定、不能作为构造函数和没有arguments对象：

/*箭头函数没有this绑定、不能作为构造函数和没有arguments对象*/
/*1. 没有this绑定*/
const f1=a=>{
  console.log(this);//this指向window而不是f1函数！
  /*Window {window: Window, self: Window, document: document, name: '', location: Location, …}*/
}
f1(0)

/*2. 不能作为构造函数*/
function f2(course,address)
{
  this.course = course;
  this.address=address;
}
const web1 = new f2('数据结构教程','https://www.dotcpp.com/course/ds/')//这里可以通过普通函数构造
const f3=(course ,address)=>{
   this.course = course;
  this.address=address;
}
const web2 = new f3('算法竞赛教程','https://www.dotcpp.com/course/algorithm/')//这里不可以通过箭头函数构造
console.log(web1);
console.log(web2);//报错信息为：Uncaught TypeError: f3 is not a constructor

/* 箭头函数没有自己的arguments */
function f4() {
    console.log(arguments[0]); // 1
}

const f5 = () => {
    // console.log(arguments[0]); // 报错
    console.log("没有arguments对象");
};

f4(1, 2, 3); // 输出：1
f5(1, 2, 3); // 输出：没有arguments对象

总结：箭头函数能够简化函数操作，但是在使用箭头函数时需要知道箭头函数的使用方法和功能局限，避免箭头函数的乱用。