箭头函数表达式的语法比函数表达式更短,并且没有自己的 this
、arguments
、super
和 new.target
。
箭头函数表达式更适用于那些本来需要匿名函数的业务场景,并且它们不能用作构造函数。
箭头函数只能用 赋值式写法,不能用声明式写法。
const fn = () => {// do something};
当只有一个参数时,圆括号是可选的,如果没有参数或者参数多于一个就需要加括号。
const fn1 = (param1) => {// do something};const fn2 = () => {// do something};const fn3 = (param1, param2) => {// do something};
支持剩余参数和默认参数。
const fn = (params1, params2, ...rest) => {// do something};
🌰 代码示例:
const numbers = (...nums) => nums;numbers(1, 2, 3, 4, 5);// [1, 2, 3, 4, 5]const headAndTail = (head, ...tail) => [head, tail];headAndTail(1, 2, 3, 4, 5);// [1, [2, 3, 4, 5]]
const fn = (params1 = default1, params2, ..., paramsN = defaultN) => {// do something}
同样支持参数列表解构
const fn = ([a, b] = [1, 2], { x: c } = { x: a + b }) => a + b + c;fn();// 6
🌰 代码示例
const full = ({ first, last }) => firsr + '' + last;// 等同于function full(person) {return person.first + '' + person.last;}
如果函数体只有一个表达式,可以不加花括号
const fn = (param1, param2) => param1 + param2;
如果函数没有括号,可以不写 return
,箭头函数会帮你 return
const fn = (param1, param2) => param1 + param2;fn(1, 2);
加括号的函数体返回对象字面表达式
const fn = (bar) => ({ foo: bar });
数组方法 map 函数:
// 普通函数写法const result = [1, 2, 3].map(function (x) {return x * x;});// 箭头函数写法const result = [1, 2, 3].map((x) => x * x);
数组方法 sort 函数:
// 普通函数写法const result = values.sort(function (a, b) {return a - b;});// 箭头函数写法const result = values.sort((a, b) => a - b);
this
对象,就是 定义时所在 的对象,而不是使用时所在的对象new
命令,否则会抛出一个错误arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest
参数代替yield
命令,因此箭头函数不能用作 Generator 函数this
this
对象的指向时可变的,但是在箭头函数中,它是固定的。因为箭头函数内部的 this
是 词法作用域,由上下文确定。
function foo() {setTimeout(() => {console.log(this.key);}, 100);}var key = 100;foo.call({ key: 50 });// 50
上面的代码中,setTimeout
的参数一个箭头函数,这个箭头函数的定义生效是在 foo
函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时 this
应该指向全局对象 window
,这时应该输出 100
。但是,箭头函数导致 this
总是指向函数定义生效时所在的对象(本例时 { key: 50 }
),所以输出的是 50
。
箭头函数可以让 setTimeout
里面的 this
,绑定定义时所在的作用域,而不是指向运行时所在的作用域。
下面是另一个例子。
function Timer() {this.num1 = 0;this.num2 = 0;// 箭头函数setInterval(() => this.num1++, 1000);// 普通函数setInterval(function () {this.num2++;}, 1000);}const timer = new Timer();setTimeout(() => console.log('num1', timer.num1), 3000);setTimeout(() => console.log('num2', timer.num2), 3000);// num1: 3// num2: 0
上面的代码中,Timer
函数内部设置了两个定时器,分别使用了箭头函数和普通函数。
前者的 this
绑定 定义时 所在的作用域(即 Timer
函数),后者的 this
指向 运行时 所在的作用域(即全局对象)。所以,3000ms 之后, timer.num1
被更新了 3 次,而 timer.num2
一次都没更新。
箭头函数可以让 this
指向固定化,这种特征很 有利于封装回调函数。
const handler = {id: '123456',init: function () {document.addEventListener('click', (event) => this.doSomething(event.type), false);},doSomething: function (type) {console.log('Handling' + type + ' for ' + this.id);},};
以上的代码的 init
方法中使用了箭头函数,这导致箭头函数里面的 this
总是指向 handler
对象。否则,回调函数运行时,this.doSomething
一行会报错,因为此时 this
指向 document
对象。
⚠️ 注意:this
指向的固定化并不是因为箭头函数内部有绑定 this
的机制,实际原因时箭头函数根本没有自己的 this
,导致内部的 this
就是外层代码块的 this
。正是因为它没有 this
,所以不能用作构造函数。
箭头函数转成 ES5 的代码如下。
// ES6function foo() {setTimeout(() => {console.log('id:', this.id);}, 100);}// ES5function foo() {var _this = this;setTimeout(function () {console.log('id:', _this.id);}, 100);}
上面的代码中,转换后的 ES5 版本清楚地说明了箭头函数里面根本没有自己的 this
,而是引用外层的 this
。
// 请问下面的代码之中有几个this?function foo() {return () => {return () => {return () => {console.log('id:', this.id);};};};}var fn = foo.call({ id: 1 });var res1 = fn.call({ id: 2 })()();// id: 1var res2 = fn().call({ id: 3 })();// id: 1var res3 = fn()().call({ id: 4 });// id: 1
上面的代码中只有一个 this
,就是函数 foo
的 this
,所以 res1
、res2
、res3
都输出同样的结果。因为所有的内层函数都是箭头函数,都没有自己的 this
,它们的 this
其实都是最外层 foo
函数的 this
。
除了 this
外,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:arguments
、super
、new.target
。
function foo() {setTimeout(() => {console.log('args:', arguments);}, 100);}foo(2, 4, 6, 8);// args: [2, 4, 6, 8]
上面代码中,箭头函数内部的变量 arguments
,其实是函数 foo
的 arguments
变量。
另外,由于箭头函数没有自己的this
,所以当然也就不能用call()
、apply()
、bind()
这些方法去改变this
的指向。
(function () {return [(() => this.x).bind({ x: 'inner' })()];}.call({ x: 'outer' }));// ['outer']
上面代码中,箭头函数没有自己的this
,所以bind
方法无效,内部的this
指向外部的this
。
箭头函数内部,还可以再使用箭头函数。下面是一个 ES5 语法的多重嵌套函数。
function insert(value) {return {into: function (array) {return {after: function (afterValue) {array.splice(array.indexOf(afterValue) + 1, 0, value);return array;},};},};}insert(2).into([1, 3]).after(1); // [1, 2, 3]
上面这个函数,可以使用箭头函数改写。
let insert = (value) => ({into: (array) => ({after: (afterValue) => {array.splice(array.indexOf(afterValue) + 1, 0, value);return array;},}),});insert(2).into([1, 3]).after(1); // [1, 2, 3]
下面是一个部署管道机制(pipeline)的例子,即前一个函数的输出是后一个函数的输入。
const pipeline = (...focus) => (val) => focus.reduce((a, b) => b(a), val);const plus1 = (a) => a + 1;const mult2 = (a) => a * 2;const addThenMult = pipeline(plus1, mult2);addTheMult(5);// 12
如果觉得上面的可读性比较差,也可以采用下面的写法。
const plus1 = (a) => a + 1;const mult2 = (a) => a * 2;mult2(plus1(5));// 12