ES6之函数的扩展

1.函数参数的默认值

相比之前

除了简洁，ES6 的写法还有两个好处：
1.阅读代码的人，可以立刻意识到哪些参数是可以省略的，不用查看函数体或文档；
2.有利于将来的代码优化，即使未来的版本在对外接口中，彻底拿掉这个参数，也不会导致以前的代码无法运行。

        function Point(x = 0, y = 0) {
            this.x = x;
            this.y = y;
        }
        const a = new Point();
        const b = new Point(5);
        const c = new Point(5, 6);
        console.log(a) // {x: 0, y: 0}
        console.log(b) // {x: 5, y: 0}
        console.log(c) // {x: 5, y: 6}

参数变量是默认声明的，所以不能用let或const再次声明。

        function foo(x = 5) {
            let x = 1; // error
            const x = 2; // error
        }
        foo()

使用参数默认值时，函数不能有同名参数。

        // 不报错
        function foo1(x, x, y) {
            // ...
        }
        // 报错
        function foo2(x, x, y = 1) {
            // ...
        }
        // SyntaxError: Duplicate parameter name not allowed in this context

参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。

        let x = 99;
        function foo(p = x + 1) {
            console.log(p);
        }
        foo() // 100
        x = 100;
        foo() // 101

参数默认值可以与解构赋值的默认值结合起来。

        function acc(a,{b,c=3}={b:5}){
            console.log(a,b,c)  //1 5 3
        }
        acc(1)

函数acc的参数a是必选参数，{b,c}是可选参数，当不传时，默认值为{b:5}。
{b,c=3}中c是解构赋值中的默认值，当不传时，默认值为3。
下面两个函数中，foo1是用解构赋值，foo2是用参数默认值。

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

        function foo2({x, y}={x :0, y : 0}) {
            console.log(x, y);
        }
        foo1({x: 1, y: 2}) // 1, 2
        foo2({x: 1, y: 2}) // 1, 2
        foo1() //0 ,0
        foo2() //0 ,0
        foo1({x: 1}) // 1, 0
        foo2({x: 1}) // 1, undefined
        foo1({}) // 0, 0
        foo2({}) // undefined, undefined

参数默认值的位置
通常情况下，我们使用参数默认值时，都是把默认值放在最后。
因为如果不将设置了默认值的参数放在最后，这个参数也是无法省略的。

        function foo(x = 3, y) {
            console.log(x, y)
        }
        foo(1) // 1, undefined
        foo(1, 2) // 1, 2
        foo(undefined, 2) // 3, 2
        foo(null , 2) // null 2
        foo(, 1) // 报错

函数的 length 属性 ：该函数预期传入的参数个数
当函数指定了默认值时，函数的length属性，将返回没有指定默认值的参数个数。
如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。

        function foo(x, y, z) {}
        console.log(foo.length) // 3

        function foo1(x=1, y, z) {}
        console.log(foo1.length) // 0

        function foo2(x, y=1, z) {}
        console.log(foo2.length) // 1

        function foo3(x, y, z=1) {}
        console.log(foo3.length) // 2

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

        function f(x, y = function () {
            x = 2;
        }) {
            console.log(x); //5
            y();
            console.log(x); //5
            var x = 3;
            console.log(x); //3
            y();
            console.log(x); //3
        }
        f(5)

        //解析
        function f(x, y = function () {
            x = 2;
        }) {
            //参数形成一个单独的作用域，函数y里的变量x指向的是参数x，而不是下边定义的x
            var x;
            console.log(x); //5   x有值的情况下，var x变量提升不会让x变为undefined
            y();
            console.log(x); //5
            var x = 3;
            console.log(x); //3
            y();
            console.log(x); //3
        }
        f(5)

函数使用了参数默认值之后，改变参数值时，arguments值不会变化

        //会变化
        function foo(x, y) {
            x = 1;
            y = 2;
            console.log(arguments[0]); //1
            console.log(arguments[1]); //2
        }
        foo(3, 4)

        //不会变化
        function foo1(x = 5, y = 6) {
            x = 1;
            y = 2;
            console.log(arguments[0]); //3
            console.log(arguments[1]); //4
        }
        foo1(3, 4)

2.函数的rest参数

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，该变量将多余的参数放入数组中。

        function f(...arg) {
            console.log(arg); //[1, 5, 9]
        }
        f(1, 5, 9);

arguments对象不是数组，而是一个类似数组的对象。所以为了使用数组的方法，必须使用Array.from先将其转为数组。
rest 参数就不存在这个问题，它就是一个真正的数组，数组特有的方法都可以使用。

        function f(a, ...rest) {
            console.log(a.concat(rest)); //[6, 6, 6, 2, 5, 6]
        }
        var a = [6,6,6]
        f(a, 2, 5, 6)

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

        function f(a, ...rest,c) { } //Uncaught SyntaxError: Rest parameter must be last formal parameter

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

        function f(a, ...rest) {}
        console.log(f.length); //1

3.严格模式

ES5之后函数内部可单独设置严格模式
ES6规定只要函数参数使用了默认值、解构赋值、扩展运算符，那么函数内部不能显式设定为严格模式。

4.函数name属性

函数的name属性，返回该函数的函数名。
如果将一个匿名函数赋值给变量，ES5函数name属性会返回空字符串，而ES6则会正常返回实际函数名。
如果将一个具名函数赋值给变量，不论ES5还是ES6都会返回这个具名函数实际的名称。

        var f1 = function () {}
        var f2 = function hahaha() {}
        // ES6
        console.log(f1.name)  //f1
        console.log(f2.name)  //hahaha
        // ES5
        console.log(f1.name)  //''
        console.log(f2.name)  //hahaha

Function构造函数返回的函数实例，name属性的值为anonymous。

        console.log((new Function).name) //anonymous

bind返回的函数，name属性值会加上bound前缀。

    function foo666() {};
    console.log(foo666.bind({}).name) // "bound foo666"

    console.log((function () {}).bind({}).name) // "bound "

5.箭头函数

ES6允许使用“箭头”（=>）定义函数。
其目的是简写函数字面量语法，并且可返回一个单行函数。

    var f = () => 5;
    // 等同于
    var f = function () {
        return 5
    };

    var sum = (num1, num2) => num1 + num2;
    // 等同于
    var sum = function (num1, num2) {
        return num1 + num2;
    };

箭头函数也可以与变量解构结合

    const full = ({
        first,
        last
    }) => first + ' ' + last;

    // 等同于
    function full(person) {
        return person.first + ' ' + person.last;
    }

注意点：
（1）箭头函数没有自己的this对象（详见下文）。

（2）不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

箭头函数的this指向在定义时继承自外层第一个普通函数，并且箭头函数的this不会随外层函数的this变化而变化的
1.所以定义对象方法时，且定义的方法中包含this，不推荐使用箭头函数。
因为对象不具备单独的作用域，所以此时的this是指向全局变量。
2.当需要动态改变函数this指向时，不推荐使用箭头函数。
箭头函数嵌套内层函数时，内层函数的this指向外层函数的this。
箭头函数的this指向在定义时继承自外层第一个普通函数。

6.尾调用优化

就是指某个函数的最后一步是调用另一个函数

    function f(x) {
        return g(x);
    }

我们知道，函数调用会在内存形成一个“调用记录”，又称“调用帧”（call frame），保存调用位置和内部变量等信息。
如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。
等到B运行结束，将结果返回到A，B的调用帧才会消失。
如果函数B内部还调用函数C，那就还有一个C的调用帧，以此类推。
所有的调用帧，就形成一个“调用栈”（call stack）。
尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，只要直接用内层函数的调用帧，取代外层函数的调用帧就可以了。

尾递归：
利用尾调用优化原理，解决递归函数“栈溢出”问题。
尾调用优化只适用于严格模式下，同理尾递归亦是如此
那么我们在正常情况下，可以使用循环来替换递归，这样就不必使用尾递归了。

7.Function.prototype.toString()优化

以前这个方法会省略空格和注释，但ES6会原样返回

8.try...catch结构的优化

以前try...catch结构中的catch必须跟参数，ES6可以省略