箭头函数

箭头函数表达式的语法比函数表达式更短,并且没有自己的 thisargumentssupernew.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 的代码如下。

// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function 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: 1
var res2 = fn().call({ id: 3 })();
// id: 1
var res3 = fn()().call({ id: 4 });
// id: 1

上面的代码中只有一个 this,就是函数 foothis,所以 res1res2res3 都输出同样的结果。因为所有的内层函数都是箭头函数,都没有自己的 this,它们的 this 其实都是最外层 foo 函数的 this

除了 this 外,以下三个变量在箭头函数之中也是不存在的,指向外层函数的对应变量:argumentssupernew.target

function foo() {
setTimeout(() => {
console.log('args:', arguments);
}, 100);
}
foo(2, 4, 6, 8);
// args: [2, 4, 6, 8]

上面代码中,箭头函数内部的变量 arguments ,其实是函数 fooarguments 变量。

另外,由于箭头函数没有自己的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