《八》ES6+ 中函数的扩展

函数参数的默认值：

ES6 之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

function sum(num1, num2) {
	num1 = num1 || 10
	num2 = num2 || 20
	return num1 + num2
}
console.log(sum()) //30

ES6 允许为函数的参数设置默认值，直接写在参数定义后面。只有不传参数或者传入的参数明确是 undefined，默认值才会生效。

function sum(num1 = 10, num2 = 20) {
	return num1 + num2
}
console.log(sum()) //30

默认参数不会被计算在 length 中，并且它后面的所有参数也都不会被计算在 length 中。

所以，最好将默认参数放在参数的最后。

function sum(num1, num2 = 20) {
	return num1 + num2
}
console.log(sum.length) // 1

function sum(num1 = 10, num2) {
	return num1 + num2
}
console.log(sum.length) // 0

rest 剩余参数：

ES6 引入 rest 剩余参数，形式为...变量名，用于获取函数的多余参数。rest 剩余参数搭配的变量是一个数组，会将多余的参数放入数组中。可以单独只使用剩余参数。剩余参数必须放在函数参数的最后面，否则会报错。

rest 参数可以用来替代 arguments 对象。两者的区别是：

1. 剩余参数只包含那些没有对应形参的实参，而 arguments 对象包含了传给函数的所有参数。
2. 剩余参数是一个真正的数组，可以进行数组的所有操作；而 arguments 对象是一个类数组。

function add(num, ...restArgs) {
	console.log(restArgs) // [5, 3]
}

add(2, 5, 3) // 8

箭头函数（arrow function）：

ES6 允许使用箭头 => 来定义函数。

箭头函数内部没有绑定自己的 arguments 对象。可以使用 ES6 中的 rest 剩余参数来代替。
箭头函数没有自己的 this，只能从上层作用域中来查找。
箭头函数没有显式原型 prototype，因此不能作为构造函数，通过 new 关键字调用来实例化对象。可以使用 ES6 中的 class 类来代替。

const fn = (参数) => {函数体}

// 等同于
const fn = function (参数) {函数体}

如果箭头函数没有参数或者有多个参数时，需要使用小括号将参数部分括起来；但是如果只有一个参数，小括号可以省略。

// 没有参数
const fn = () => {}

// 有多个参数
const fn = (arg1, arg2) => {}

// 只有一个参数
const fn = arg => {}

如果箭头函数的函数体部分多于一条语句，需要使用大括号将它们括起来；如果只有一条语句，那么可以省略大括号，并且这条语句的表达式结果会作为箭头函数的返回值。

// 有多条语句
const sum = (num1, num2) => {
	if (num1 > num2) {
		return num1 - num2
	}
	return num1 + num2
}

// 只有一条语句
const sum = (num1, num2) => num1 + num2

// 只有一条语句，并且返回的是一个对象时，必须加上小括号。因为此时 JS 引擎无法区分此处的大括号到底是函数体的大括号还是对象的大括号
const getObj = id => ({id, name: 'Lee'})

箭头函数中的 this:

箭头函数没有绑定自己的 this。在箭头函数中访问 this 时，只会沿着作用域链一层一层向上查找。

const fn = () => console.log(this) // 箭头函数没有绑定自己的 this，向上在全局作用域中查找到了 window

fn() // window
fn.call({name: 'Lee'}) // window