8.1 函数参数的默认值

8.1.1 基本用法

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

function log(x , y){
    y = y || 'World';
    console.log(x, y)
}

log('Hello', '')  // Hello World

上面做法的问题在于，如果y本身就是一个空值，那么就会自动将其变成'World'，但是我们需要的是展示这个空值

为避免这种问题，可以这样做：

if( typeof y == 'undefined' ){
    y = 'World';
}

ES6的写法
function log(x, y = 'World'){
    console.log(x, y)
}

log('Hello', '')  // Hello

8.1.2 与解构赋值默认值结合使用

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

为防止foo()调用时报错，可以设置默认值

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

foo()  

//写法一
function m1( {x = 0, y = 0} = {} ){
   console.log([x,y])
}
//写法二
function m2( {x,y} = {x:0, y:0} ){
   console.log([x,y])
}
//函数没有参数情况下
m1()  //[0,0]
m2()  //[0,0]

// x 和 y 都有值的情况
m1({x: 3, y: 8}) // [3, 8]
m2({x: 3, y: 8}) // [3, 8]

// x 有值，y 无值的情况
m1({x: 3}) // [3, 0]
m2({x: 3}) // [3, undefined]

// x 和 y 都无值的情况
m1({}) // [0, 0];
m2({}) // [undefined, undefined]

m1({z: 3}) // [0, 0]
m2({z: 3}) // [undefined, undefined]

8.1.3 参数默认值的位置

通常情况下，定义了默认值的参数，应该是函数的尾参数。因为这样比较容易看出来，到底省略了哪些参数。如果非尾部的参数设置默认值，实际上这个参数是没法省略的

function f(x, y = 5, z){
   console.log([x,y,z])
}

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

上面代码中，有默认值的参数都不是尾参数。这时，无法只省略该参数，而不省略它后面的参数，除非显式输入undefined。

8.1.4 函数的length属性

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

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

为什么呢？
因为length属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。

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

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

8.1.5 作用域

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

var x = 1;

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

f(2)  // 2

再看下面的例子
let x = 1;

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

f() // 1

8.1.6 应用

利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误

function throwIfMissing(){
    throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()){
    return mustBeProvided;
}

foo()  //Uncaught Error: Missing parameter

另外，可以将参数默认值设为undefined，表明这个参数是可以省略的。

function foo(options = undefined){
    ...
}

8.2 rest参数

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

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

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

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

function push(array, ...items){
    items.forEach(function(item){
         array.push(item);
         console.log(item)
    })
}

var a = [];
push(a, 1,2,3,4)

注意：rest参数之后不能再有其他参数(即只能是最后一个参数)，否则会报错

//报错

function f(a, ...b, c){
    // ...
}

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

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

8.3 严格模式

从ES5开始，函数内部可以设定为严格模式

function doSomething(a, b){
    'use strict';
    // code
}

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

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

有两种方法可以规避这种限制，第一种是设定全局性的严格模式，这是合法的

'use strict';

function doSomething(a, b = a){
    // code
}

第二种是把函数包在一个无参数的立即执行函数里面

const doSomething = (function(){
    'use strict';
    return function(value = 42){
      return value
    }
}());

8.4 name属性

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

function foo(){}
foo.name

如果将一个匿名函数赋值给一个变量

var f = function(){};

// ES5
f.name // ''

// ES6
f.name // 'f'
const bar = function baz() {};

// ES5 
bar.name // 'baz'

//ES6
bar.name // 'baz'

8.5 箭头函数(重点)

8.5.1 基本用法

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

var f = v => v;

上面的箭头函数等同于

var f = function(v){
    return v;   
}

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分

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

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

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回

var sum = (num1, num2) => { return num1 + num2 }

重点：由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

//报错
let getTempItem = id => { id: id, name: 'Temp'};

//不报错
let getTempItem = id => ({ id: id, name: 'Temp'});

如果箭头函数只有一行语句，且不需要返回值，则：

let fn = () => void doesNotReturn();

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

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

//等同于

function full(person){
    return person.first + ' ' + person.last;
}

箭头函数使得表达更加简洁

const isEvent = n => n % 2 == 0;

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

[1,2,3].map(function(x){
    return x * x;
})

//箭头函数写法

[1,2,3].map(x => x * x);

另一个例子：

var result = values.sort(function(a,b){
    return a - b;
})

//箭头函数写法

var result = values.sort((a,b) => a - b);

8.5.2 使用注意点

箭头函数可以让this指向固定化，这种特性很有利于封装回调函数

var handler = {
    id: '123456',

    init: function(){
        document.addEventListener('click',
           event => this.doSomething(event.type), false);
    },

    doSomething: function(){
         console.log('Handling' + type + 'for' + this.id);
    }
}

上面代码的init方法中，使用了箭头函数，这导致这个箭头函数里面的this，总是指向handler对象。否则，回调函数运行时，this.doSomething这一行会报错，因为此时this指向document对象。

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

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

var f = foo.call({id: 1});

var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1

上面代码之中，只有一个this，就是函数foo的this

除了this，以下三个变量在箭头函数之中也是不存在的，指向最外层函数的对应变量

arguments, super, new.target

另外，由于箭头函数没有自己的this，所以当然也就不能用call()、apply()、bind()这些方法来改变this的指向

8.5.3 嵌套的箭头函数

8.6 双冒号运算符

函数绑定运算符是并排的两个冒号( :: )，双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，做为上下文环境(即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()

8.7 尾调用优化

8.7.1 什么是尾调用？

概念：就是指某个函数的最后一步是调用另一个函数。

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

以下三种情况，都不属于尾调用：

//情况一
function f(x){
    let y = g(x);
    return y;
}

//情况二
function f(x){
    return g(x) + 1;
}

//情况三
function f(x){
    g(x);
}

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

function f(x){
    if( x > 0 ){
        return m(x);
    }
    return n(x);
}

8.7.2 尾调用优化

尾调用之所以与其它调用不同，就在于它的特殊的调用位置。

我们知道，函数调用会在内存形成一个调用帧，保存调用位置和内部变量等信息。如果在函数A的内部调用函数B，那么在A的调用帧上方，还会形成一个B的调用帧。等到B运行结束，将结果返回到A，B的调用帧才会消失。如果函数B内部还调用函数C，那么就还有一个C的调用帧，以此类推。所有的调用帧，就会形成一个调用栈。

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

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

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

//等同于
g(3)

上面的g(3)，就叫做尾调用优化，可以大大节省内存。

注意，只有不再用到外层函数的内部变量，内层函数的调用帧才会取代外层函数的调用帧，否则就无法进行“尾调用优化”。

function addOne(a){
    var one = 1;
    function inner(b){
        return b + one;
    }
    return inner(a);
}

上面的函数不会进行尾调用优化，因为内层函数inner用到了外层函数addOne的内部变量one。

8.7.3 尾递归

函数调用自身，称为递归。如果尾调用自身，就称为尾递归。

递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易发生“栈溢出”错误（stack overflow）。但对于尾递归来说，由于只存在一个调用帧，所以永远不会发生“栈溢出”错误。

function factorial(n){
    if (n === 1) return 1;
    return n * factorial(n - 1)
}

将其改为尾递归：
function factorial(n, total){
    if (n === 1) return total;
    return factorial(n - 1, n * total);
}
factorial(5, 1)

8.7.4 递归函数的改写

8.7.5 尾递归优化的实现

8.7.6 函数尾部的尾逗号

ES7 允许函数的最后一个参数有尾逗号

function clownsEverywhere(
  param1,
  param2
) { /* ... */ }
clownsEverywhere(
  'foo',
  'bar'
);


function clownsEverywhere(
  param1,
  param2,
) { /* ... */ }
clownsEverywhere(
  'foo',
  'bar',
);

这样的规定也使得，函数参数与数组和对象的尾逗号规则，保持一致了。