ES6之函数的扩展

函数的参数默认值

• 参数变量是默认声明的，所以不能用let或const再次声明。
  下列代码会报错，并且默认声明用的是let/const而不是var，因为在函数内部再次用let对其声明的时候回报错，Identifier ‘xxx’ has already been declared。

funtion(let x = 0, const y =1){...}

• 使用参数默认值的时候 不能有重复的变量
• 参数默认值是惰性求值的
  也就是说运行的时候才会对其赋值，而不是一开始就赋值

var a = 100;
function f (p = a + 1) {
	console.log(p)
}
a = 1;
f(); // 2

• 与解构参数结合
  下列代码的参数是一个对象，对象里面对真正的参数x，y进行了默认赋值，所以这种情况在调用这个foo函数的时候传入的对象必须也是一个对象，然后这个对象再和{x, y = 5}做解构赋值，如果传入的不是一个对象，则会报错

function foo({x, y = 5}) {
  console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

可以像下面代码这样解决这个问题，下面的代码进行了双重默认值，第一层是传参，如果没有传参进去，参数默认是一个空对象，然后{x, y = 5}和空对象进行解构赋值，因为空对象里面都是undefined，所以x，y再次启动默认值

function foo({x, y = 5} = {}) {
  console.log(x, y);
}

foo() // undefined 5

• 参数默认值的位置须放在最后

// 例一
function f(x = 1, y) {
  return [x, y];
}

f() // [1, undefined]
f(2) // [2, undefined])
f(, 1) // 报错
f(undefined, 1) // [1, 1]

// 例二
function f(x, y = 5, z) {
  return [x, y, z];
}

f() // [undefined, 5, undefined]
f(1) // [1, 5, undefined]
f(1, ,2) // 报错
f(1, undefined, 2) // [1, 5, 2]

• 函数参数的length属性指的是没有指定默认值的剩余参数

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

• 函数参数设置默认值，参数部分形成单独作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2) // 2

上面的代码可以翻译成下面这样，x‘和x‘‘是两个不同的变量，之前在块级作用域那部分说过，参数部分相当于是执行部分的父级作用域，参数作用域里面的x有传值（f（2）），然后y的值等于x的值，他们在本作用域，即传参作用域就找到了值，所以不会沿着作用域链向上找，所以console出来的值是2，而不是1

{
		全局作用域
		x‘:1
	{
		传参作用域
		x‘‘:2, y = x'' //x''的值是调用f（2）的时候传进去的
		{
			执行作用域
			console.log(y);
			}
	}
}

再看下面这样2个代码，为什么第一个代码的结果是1，第二个代码的结果是undefined，第一个代码里面参数只有y，他的值取决于x，而x在本作用域里面没有声明，所以他会沿着作用域链向上到顶层作用域找到x=1；

但是第二个代码的y的值取决的x，是存在与本作用域里面的，不过因为调用的时候没有传值，所以x的值是undefined，所以结果也是undefined。

let x = 1;
function f(y = x) {
  let x = 2;
  console.log(y);
}
f() // 1

let x = 1;
function f(x, y = x) {
  console.log(y);
}
f() // undefined

注意一下，上面两个代码里的console出的y，在执行作用域里面并没有定义，所以console出的值是来自传参作用域里的，所以如果我们在执行作用域里面在定义一个y值，那么console出的值会改变

var x = 1;
function f(y = x) {
	var y = 4
  console.log(y);
}
f() // 4

还需要注意一个问题，如果在执行作用域内定义y用的是let/const，那么会报错，这也说明了在参数使用默认参数的时候用的是let/const这种声明方式来对参数进行声明

VM21933:3 Uncaught SyntaxError: Identifier ‘y’ has already been declared

var x = 1;
function f(y = x) {
	let y = 4
    console.log(y);
}
f() // 4

默认参数是个函数也遵循同样的规则

一个复杂的例子

var x = 1;//第一种x：1
function foo(x, y = function() { x = 2; }) {//第二种x：2
  var x = 3;//第三种x：3
  y();
  console.log(x);
}

foo() // 3
x // 1

上面的代码一共有三种x，第一个全局的x为1，第二个是传参作用域里面的x，并且在y的默认值是一个匿名函数，里面的x也是指向同一个作用域的x，即第一个参数x；第三个x是执行作用域里面的x值为3；

因为三个x在不同的作用域内，各不相干，所以当我们执行y（）的时候，也就是执行 x=2的时候，改变的是传参作用域内的x的值，并没有改变全局和执行作用域的值。所以console的x值取的是最近的作用域，也就是执行作用域的x值3。

把执行作用域里面的var x = 3改一下

var x = 1; //第一种x：1
function foo(x, y = function() { x = 2; }) {//第二种x：2
  x = 3;
  y();
  console.log(x);
}

foo() // 2
x // 1

因为我们把var x = 3改成了x=3，相当于我们把声明一个新的x，改成是改变最近作用域的x的值，即传参作用域的x的值。
所以，在第二个例子里面，我们只有2种x，第一个就是全局的x值为1，第二种x就是传参作用域内的x的值为2。

so，在执行作用域内 我们把传参作用域的x的值改成了3，然后执行y（），相当于又把它值改为了2，所以最后console出来是2。

rest参数

ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

• 传入任意多参数
  传统方法如果要传入任意多的参数，需要使用argument，但是有了扩展运算符就没有这个问题

传统方法
function add(a，b，c，d……) {
	   ....
}
扩展运算符方法
function add(...values) {
	   ....
}

• 方便写法

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.prototype.slice.call先将其转为数组。rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。下面是一个利用 rest 参数改写数组push方法的例子，也可以说是扩展运算符可以把伪数组变成真数组。

• rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

• 函数的length属性，不包括 rest 参数。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

• 严格模式

ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。

这样规定的原因是，函数内部的严格模式，同时适用于函数体和函数参数。但是，函数执行的时候，先执行函数参数，然后再执行函数体。这样就有一个不合理的地方，只有从函数体之中，才能知道参数是否应该以严格模式执行，但是参数却应该先于函数体执行。

另外一种方法是在全局 ‘use strict‘

name属性

• 函数的name属性，返回该函数的函数名。
  需要注意的是，ES6 对这个属性的行为做出了一些修改。如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

如果将一个具名函数赋值给一个变量，则 ES5 和 ES6 的name属性都返回这个具名函数原本的名字。

如果对象的方法使用了取值函数（getter）和存值函数（setter），则name属性不是在该方法上面，而是该方法的属性的描述对象的get和set属性上面，返回值是方法名前加上get和set。

const obj = {
  get foo() {},
  set foo(x) {}
};

obj.foo.name
// TypeError: Cannot read property 'name' of undefined

const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');

descriptor.get.name // "get foo"
descriptor.set.name // "set foo"

有两种特殊情况：bind方法创造的函数，name属性返回bound加上原函数的名字；Function构造函数创造的函数，name属性返回anonymous。

(new Function()).name // "anonymous"

var doSomething = function() {
  // ...
};
doSomething.bind().name // "bound doSomething"

如果对象的方法是一个 Symbol 值，那么name属性返回的是这个 Symbol 值的描述。

const key1 = Symbol('description');
const key2 = Symbol();
let obj = {
  [key1]() {},
  [key2]() {},
};
obj[key1].name // "[description]"
obj[key2].name // ""

上面代码中，key1对应的 Symbol 值有描述，key2没有。

箭头函数见其他博文