ES6 函数的扩展

(一)与结构赋值的默认值结合使用

//先来看一个例子
function foo({x,y=1}){
        console.log(x,y)
}

当函数参数为一个对象，变量才会通过解构赋值生成

function foo(url,{name="", age=88, other={} }){
        console.log(age);
}

不能省略第二个参数

function foo(url,{name='猫咪是大王'}={}){
        console.log(name);
    }

第二个参数可以省略

对函数的参数设置默认值的两种写法区别

function methods1({x=0,y=0}={}){//设置对象解构赋值，函数参数的默认值为空对象
        return [x,y];
    }
    function methods2({x,y}={x:0,y:0}){//没有设置对象解构赋值，函数参数的默认值是一个有具体属性的函数
        return [x,y];
    }

函数无参数
变量都传值
x传值y不传
x、y都无值

(二)参数默认值的位置

一般定义默认值的参数应该是函数的尾参数，这样比较容易看出省略哪些参数，如果是非尾部的参数设置默认值，则这个参数无法省略

function foo(x=0,y){
        return [x,y];
    }

function foo(x=1,y=66,z){
        return [x,y,z]
    }

undefined触发该参数等于默认值，而null没有

(三)函数的length属性

指定了默认值后，函数的length属性将返回没有指定默认值属性参数个数，即length属性将失真

var f=function (a){console.log(a)}
    console.log(f.length)
    var ff=function (a=0){console.log(a)}
    console.log(ff.length)
    var fff=function (a,b=0,c=0){console.log(a)}
    console.log(fff.length)

特殊情况：如果设置了默认值的参数不是为参数，那么length属性也不再计入后面的参数

var f=function (a=1,b,c){console.log(a)}
    console.log(f.length)

(四)作用域

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

var x=1;
    function foo(x,y=x){
        console.log(y);
    }
//调用函数foo时，参数常量形成一个单独的作用域，在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x

let x=1;
 function foo(y=x){
        let x=88;
        console.log(y)
    }
//函数foo调用时，参数y=x形成一个单独的作用域，在这个作用域里面，变量x本身没有定义，
//所以指向外层的全局变量x，因而函数调用时，函数体内部的局部变量x影响不到默认值变量x

如果此时全局变量x不存在则报错

如果参数默认值为一个函数，该函数的作用域也遵循这个规则

    let foo="out";
    function oFoo(func=x => foo){
        let foo="in";
        console.log(func())
    }

    var x=1;
    function foo(x,y = function(){x=2}){
        var x=3;
        y();
        console.log(x)
    }
//foo的参数形成一个单独的作用域，这个作用域轴线声明了变量x，然后声明了变量y，
//y的默认值是一个匿名函数，这个匿名函数内部的变量x指向同一个作用域的第一个参数写x，
//而foo内部又声明了一个内部变量x，该变量与第一个参数x由于不是同一个作用域，所以不是
//同一个变量。执行y后，内部变量x和外部全局变量x的值都没变

(五)rest参数

rest参数用于获取函数的多与参数，它搭配的变量是一个数组，该变量将多余的参数放入其中

function add(...values){
        let sum=0;
        for(var val of values){
            sum +=val;
        }
        return sum;
    }

注意：
1.函数的length属性不包括rest参数
2.rest参数只能是最后一个参数，它之后不能再有其他参数，否则会报错

(六)name属性

函数的name属性返回该函数的函数名

function foo(){}

构造函数返回的函数实例的name属性
bind返回的函数，name属性值会加上bound前缀

(七)箭头函数

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

var foo = a => a
//上面代码等同于
var foo=function(a){
  return a;
}

//如果箭头函数不需要参数或者需要多个参数，可以使用圆括号来代表参数部分
var foo= () => 666
//等同于
var foo = function(){
  return 66;
}

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

//如果箭头函数的代码部分多于一条语句，则要使用大括号将其括起来，并使用return语句返回
var sum = (a1,a2) => { return a1+a2;}

//由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号
var getArticles = id => ({ id:id, name:"猫咪是大王"});

//箭头函数也可以与变量的解构赋值结合使用
const full = ({ first, last}) => first + ' ' +last;
//等同于
function full(person) {
  return person.first+ ' '+person.last;
}

箭头函数的一个用处就是简化回调函数

[1,2,3].map(x => x * x);
//等同于
[1,2,3].map(function(){
  return x * x;
})

var result = values.sort((a,b) => a-b)
//等同于
var result=values.sort(function(a,b){
  return a - b;
})

rest 参数与箭头函数结合

const num=(...nums) => nums

const headAndfoot=(head,...foot) =>[head,foot]

注意：
1.函数体内的this对象就是定义时所在的对象，而不是使用时所在对象
this对象的指向是可变的，但是在箭头函数中是固定的

    function foo(){
        setTimeout(() => {
            console.log('id', this.id);
        },1000)
    }
    var id=66;
//如果是普通函数，执行this应该指向全局对象window，输出66，但是箭头函数导致this总是指向函数定义生效时所在的对象，所以输出88

//箭头函数可以让setTimeout里面的this绑定定义时所在的作用域而不是指向运行时所在的作用域
    function Timer(){
        this.a1=0;
        this.a2=0;
        // 箭头函数
        setInterval(() => this.a1++, 1000);
        // 普通函数
        setInterval(function(){
            this.a2++;
        },1000);
    }
    var timer = new Timer();
    setInterval(() => console.log('a1:',timer.a1),3100);
    setInterval(() => console.log('a2:',timer.a2),3100);

2.箭头函数不可以当构造函数，不能使用new命令，否则报错

var foo=() => 88;

3.不可以用arguments对象，该对象在函数体不存在，如果要用，可以用rest参数代替

var foo=() => {
        console.log(arguments);
        return 1;
}

4.不可以用yield命令，因此箭头函数不能用作Generator函数

一个Generator函数与普通function的区别就是函数名前面多了一个星号 * 但是执行时有很大不同，
与yield命令配合，可以实现暂停执行的功能

以下代码中有几个this

    function foo(){
        return () =>{
            return () =>{
                return () =>{
                    console.log('id',this.id);
                };
            };
        };
    }
    var f =foo.call({id:1});

    var f1=f.call({id:2})()();
    var f2=f().call({id:3})();
    var f3=f()().call({id:4});
上面的代码只有一个this，就是foo上午this，所以f1,f2,f3都输出同样的结果。因为所有的内层函
数都是箭头函数，都没有自己的this，他们的this都是最外层foo函数的this

除了this外，arguments，super，new.target在箭头函数中也是不存在的
箭头函数没有自己的this，当然也不能用call()、apply()、bind()这些方法去改变this的指向

嵌套的箭头函数

//es5语法
    function insert(value){
        return {into:function (array){
            return {after:function(afterValue){
                array.splice(array.indexOf(afterValue) +1,0,value);
            }};
        }};
    }
    insert(2).into([1,3]).after(1);

//es6语法
    let insert=(value) => ({into:(array) => ({after:(afterValue)=>{
        array.splice(array.indexOf(afterValue) + 1, 0, value);
        return array;
    }})})

(八)绑定this

箭头函数可以绑定this对象，大大减少了显式this对象的写法(call、apply、bind)，但是并非适用于所有场合
函数绑定运算符是并排的双冒号(::),双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象作为上下文环境(即this对象)绑定到右边的函数上。

foo::bar;
//等同于
bar.bind(foo);

foo::bar(...arguments);
//等同于
bar.apply(foo,arguments);

如果双冒号左边为空，右边是一个对象的方法，则等于将该方法绑定在该对象上

var method=obj::obj.foo;
//等同于
var method = ::obj.foo;

let log=::console.log;
//等同于
var log=console.log.bind(console)

由于双冒号运算符返回的还是原对象，因此可以采用链式写法

    import {map, takeWhile,forEach} from "iterlib";
    getPlayers()
    ::map(x=> x.character())
    ::takeWhile(x=> x.strength>100)
    ::forEach(x => console.log(x))
    
    let {find,html}=jake;
    docment.querySelectorAll("div.myClass")
    ::find("p")
    ::html("lalala")

(九)尾调用优化

尾调用是函数式编程的一个重要概念，是指某个函数的最后一步调用另一个函数

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

一些错误的实例

//1.
function f(x){
  let y=g(x);
  return y;
}  //调用函数g之后还有操作

//2.
function f(x){
        return g(x)+1;
    } //调用函数g之后还有操作

//3.
function f(x){
        g(x);
    }
//等同于
function f(x){
        g(x);
        return undefined；
    }

尾调用不一定出现在尾部，只要是最后一步操作即可

function f(x){
        if(x>0){
            return m(x)
        }
        return n(x);
    }//函数m和n都属于尾调用，因为他们都是函数f的最后一步操作

尾调用优化

• 尾调用由于是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，直接用内层函数的调用帧，取代外层函数的调用帧就可以了。

    function f(){
        let m=1;
        let n=2;
        return g(m+n);
    }
    f();

    //等同于
    function f(){
        return g(3);
    }
    f();

    //等同于
    g(3)

尾递归
函数自己调用自己称为递归，尾调用自身就称为尾递归
递归非常耗内存，我在菜鸟题中有提过，因为需要同时保存成百上千个调用帧，所以很容易发生栈溢出，但是对于尾递归来说，只存在一个调用帧，所以永远不会发生栈溢出错误

    function f(n,f1=1,f2=1){
        if(n<=1){
            return f2;
        }
        return f(n-1,f2,f1+f2)
    }

(十)严格模式

ES6的尾调用只在严格模式下开启，正常模式下无效，因为在正常模式下函数内部会有两个变量，可以跟踪函数的调用栈

• func.arguments:返回调用时函数的参数
• fun.caller:返回调用当前函数的那个函数
  尾调用优化发生时，函数的调用栈会改写，因此上面两个变量就会失真。严格模式禁用这两个变量，所以尾调用仅在严格模式下生效