3.3.4 箭头函数_Node.js 12实战-QQ阅读现言女生网

书名：Node.js 12实战
作者名：赵荣娇
本章字数：618字
更新时间：2025-02-25 04:05:54

3.3.4　箭头函数

箭头函数提供了一种更加简洁的函数书写方式。其基本语法是：

参数 => 函数体

例如：

var f = v => v;
//等价于
var f = function(a){
 return a;
}
f(1);  //1

当箭头函数没有参数或者有多个参数时，要使用()：

var f = (a,b) => a+b;
f(6,2);  //8

当箭头函数函数体有多行语句时，用{}包裹起来，表示代码块；当只有一行语句并且需要返回结果时，可以省略{}，结果会自动返回。例如：

var f = (a,b) => {
 let result = a+b;
 return result;
}
f(6,2);  // 8

当箭头函数要返回对象的时候，为了区分于代码块，要用()将对象包裹：

// 报错
var f = (id,name) => {id: id, name: name};
f(6,2);  // SyntaxError: Unexpected token :
// 不报错
var f = (id,name) => ({id: id, name: name});
f(6,2);  // {id: 6, name: 2}

【示例3-9】需要注意的是，箭头函数内部没有this、super、arguments和new.target的引用。

var func = () => {
  // 箭头函数里面没有 this 对象
  // 此时的 this 是外层的 this 对象，即 Window
  console.log(this)
}
func(55)  // Window
var func = () => {
  console.log(arguments)
}
func(55);  // ReferenceError: arguments is not defined

【示例3-10】箭头函数体中的this对象是定义函数时的对象，而不是使用函数时的对象。

不可以作为构造函数，也就是不能使用new命令，否则会报错。

【示例3-11】ES6之前，JavaScript的this对象一直很复杂，回调函数中为了将外部this传递到回调函数中，经常看到var self = this的写法。有了箭头函数之后，就不需要这样做了，直接使用this即可：

因此，当需要维护一个this上下文时，可以使用箭头函数进行处理。

【示例3-12】若定义函数的方法，且该方法中包含this，则不适合使用箭头函数。例如：

需要动态this的时候，也不适合使用箭头函数：

var button = document.getElementById('userClick');
button.addEventListener('click', () => {
     this.classList.toggle('on');
});

button的监听函数是箭头函数，所以监听函数里面的this指向的是定义的时候外层的this对象，即Window，导致无法操作到被单击的按钮对象。