函数的扩展

文章编写参考 阮一峰《ECMAScript 6 入门》

---

1. 函数参数的默认值

1.1 基本用法

在ES6之前如果要给函数赋值一般采用以下这样的方式

function fun(x, y) {
    y = y || "Blue";
    console.log(x, y);
}
fun("Hi")   //Hi Blue
fun("Hi", "Lucky")  //Hi Lucky

上面代码中为参数【y】指定了默认值，但是这样的写法在遇到【y】如果是布尔类型的值的时候，加入我为【y】赋值为false，那么会发现没法赋值成功。

为了避免上面的问题，我们将上面的函数进行改写

function fun(x, y) {
    if (typeof y === 'undefined') {
        y = y || "Blue";
    }
    console.log(x, y);
}

有了ES6之后就方便，我们可以直接在函数参数列表中进行参数默认值的定义

function fun(x, y = 'Blue') {
    console.log(x, y);
}
fun("Hi")   //Hi Blue
fun("Hi", "Lucky")  //Hi Lucky

上面的例子看出ES6的写法比ES5的简洁了很多，而且不存在布尔值的问题，下面是另外一个【构造函数】的例子

function fun(x = 'Hi', y = 'Blue') {
    this.x = x;
    this.y = y;
}
var foo = new fun();    //{ x: 'Hi', y: 'Blue' }

【注意】：函数的参数是默认声明的，所以在函数作用域中不能存在与参数相同名称的变量声明

function fun(x = 'Blue') {
  let x = 'Crazy'; // error
  const x = 'Jack'; // error
}

上面代码片段中，x 为参数变量，在该函数作用域中进行再次声明引起报错。

函数参数的默认值可以使用表达式，但是表达式是【惰性求值】的，也就是说在函数调用的时候重新计算默认值。

let x = 10;
function fun(r = x + 1) {
    console.log(r);
}
fun();  //11
x = 100;
fun();  //101

上面代码中函数默认值是一个【简单表达式】，可以看出表达式在赋值的时候是在应用的时候才进行的。

let add = (x, y) => x + y;
let sub = (x, y) => x - y;
let fun = (r = add(1, 2)) => console.log(r);
fun();  //3
fun(sub(4, 2)); //2

上面代码中函数默认值使用的是【函数赋值】,可以更加清晰的看出函数默认值的赋值时【惰性求值】的。

1.2 函数默认值与解构赋值结合使用

既然函数参数实际上也是一个变量声明的过程，那么函数默认值也可以使用【解构赋值】

let fun = ({ x, y = 'Blue' }) => console.log(x, y);

fun({});    //undefined Blue

fun({ x: "Hi" });   //Hi Blue

fun({ x: 'Hi', y: 'Crazy' });   //Hi Crazy

fun();   TypeError: Cannot read property 'x' of undefined

上面解构赋值代码中，只有当fun参数是一个对象时，默认值的解构赋值才会生效，最后一行代码没有传参就报错了。

我们看看对上面例子的改造

let fun = ({ x, y = 'Blue' } = {}) => console.log(x, y);

fun();  //undefined 'Blue'

上面代码中函数未给予参数仍然能够正常的运行。

【注意】看一看下面两种写法的差别，就明白上面两个例子的差异在哪儿了

//写法一
let fun = ({ x = 'Hi', y = 'Blue' } = {}) => console.log(x, y);

//写法二
let fun1 = ({ x, y } = { x: 'Hi', y: 'Blue' }) => console.log(x, y);

上面两种写法都对函数参数设定了默认值，区别是写法一函数参数的默认值是空对象，但是设置了对象解构赋值的默认值，写法二函数参数的默认值是一个有具体属性的对象，但是没有设置对象解构赋值的默认值。

let fun = ({ x = 'Hi', y = 'Blue' } = {}) => console.log(x, y);

let fun1 = ({ x, y } = { x: 'Hi', y: 'Blue' }) => console.log(x, y);
//都没有参数的情况
fun();  //Hi Blue
fun1(); //Hi Blue

//一样参数的情况
fun({x: 'Hello', y: 'Crazy'});  //Hello Crazy
fun1({x: 'Hello', y: 'Crazy'}); //Hello Crazy

//缺失值得情况
fun({x: 'Hello'});  //Hello Blue
fun1({x: 'Hello'}); //Hello undefined

//都无值得情况
fun({});    //Hi Blue
fun1({});   //undefined undefined

看出区别了吗？函数在传入参数的时候，会替换原有=右边的对象，如果我们将默认值放在=右边的对象属性中进行默认解构，那么当函数传入参数的时候这个对象就被替换掉了。

1.3 参数默认值的位置

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

let fun = (x, y = 'Blue', z) => console.log(x, y, z);

fun();  //undefined 'Blue' undefined

fun('Hi', 'Crazy', 'Nice')  //Hi Crazy Nice

f('Hi',, 'Nice') // 报错

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

let fun = (x, y = 'Blue', z) => console.log(x, y, z);

fun('Hi', undefined, 'Nice');   //Hi Blue Nice

上面代码中y传入undefined参数，根据解构赋值的规则会触发默认值

1.4 函数的length属性

函数的【length】属性返回的是没有默认值的参数个数，也就是说指定了默认值的参数就不会计入length属性的计数中。

(x => x).length //1

((x='Blue') => x).length    //0

((x, y, z = 'Blue') => x).length    //2

上面代码中第二段和第三段都设置了参数默认值，可以看出设置了默认值的参数不计入length计算。

((x = 'Blue', y, z) => x).length;   //0

((x, y = 'Blue', z) => x).length;   //1

((x, y, z = 'Blue') => x).length;   //2

上面代码中参数默认值的位置不同导致了【length】属性的不同，其实是，【如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了。】

1.5 作用域

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

let x = 'Blue';

let fun = (x, y = x) => console.log(x, y);

fun('Crazy');   //Crazy Crazy

上面代码中，参数y的默认值等于变量x。调用函数f时，参数形成一个单独的作用域。在这个作用域里面，默认值变量x指向第一个参数x，而不是全局变量x，所以输出是Crazy Crazy。

let x = 'Blue';
let fun = (y = x) => {
    let x = 'Crazy';
    console.log(y);
}
fun();  //Blue

上面代码中，函数调用时，参数y = x形成一个单独的作用域。这个作用域里面，变量x本身没有定义，所以指向外层的全局变量x。函数调用时，由于块级作用域，所以函数体内部的局部变量x影响不到默认值变量x。

上面例子中因为默认值赋值的X变量是指向外层的全局x，所以如果全局没有x则会报错

let fun = (y = x) => {
    let x = 'Crazy';
    console.log(y);
}
fun();  // 'ReferenceError: x is not defined'

下面这样子写也会报错

var x = 1;

function foo(x = x) {
  // ...
}

foo() // ReferenceError: x is not defined

上面代码中，参数x = x形成一个单独作用域。实际执行的是let x = x，由于暂时性死区的原因，这行代码会报错”x 未定义“。

1.6 默认值应用

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

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

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

foo()
// Error: Missing parameter

上面代码中参数默认值设置为一个函数，由于是【惰性求值】，所以foo在运行时，如果没有传入参数则执行函数抛出错误。

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

function foo(optional = undefined) { ··· }

---

2.rest参数

什么事rest参数，形式为（…变量名）这样子的函数参数我们称之为rest参数，rest参数将多余的组合成一个数组。

function fun(...values) {
    console.log(values);
}
fun(1, 2, 3, 4)
//[ 1, 2, 3, 4 ]

上面代码中rest参数将所有传入的参数都放入了values数组中，这样就完全取代了arguments对象，并且拥有更多的属性。

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

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

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

(function(a) {}).length  // 1

(function(...a) {}).length  // 0

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

---

3.严格模式

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

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

// 报错
const doSomething = function ({a, b}) {
  'use strict';
  // code
};

// 报错
const doSomething = (...a) => {
  'use strict';
  // code
};

const obj = {
  // 报错
  doSomething({a, b}) {
    'use strict';
    // code
  }
};

---

4.name属性

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

function foo() {}

foo.name // "foo"

这个属性是在ES5中就有的，但是ES6对其做了一些修改，如果将一个匿名函数赋值给一个变量，ES5 的name属性，会返回空字符串，而 ES6 的name属性会返回实际的函数名。

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

上面代码中，变量f等于一个匿名函数，ES5 和 ES6 的name属性返回的值不一样。

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

const bar = function baz() {};

// ES5
bar.name // "baz"

// ES6
bar.name // "baz"

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

(new Function).name // "anonymous"

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

function foo() {};
foo.bind({}).name // "bound foo"

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

---

5.箭头函数

5.1 基本用法

以前的函数定义就是function，ES6使得这一切更加简单清晰

let f = x => x;

上面代码翻译跟ES5就是下面这样子

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

和if语句一样，代码库多余一条语句，就要使用大括号将它们括起来，并且要返回值时使用return语句

let f = x => {
    if (typeof x === undefined) {
        x = 'Blue';
    }
    return x;
};

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

var getTempItem = id => ({ id: id, name: "Temp" });

既然箭头函数也是函数，那么参数同样可以与变量解构结合使用

let fun = ({ x, y }) => console.log(x + y);

fun({ x: 1, y: 2 });    //3

上面代码为对象的解构赋值和箭头函数的应用

let fun = ([x, y]) => console.log(x + y);

fun([1, 2]);    //3

上面代码为数组的解构赋值和箭头函数的应用

如果参数列表只有一个参数，则可以省略参数列表的括号

[1, 2, 3, 4].map(x => x * 10);
//[ 10, 20, 30, 40 ]

如果箭头函数不需要参数或者需要多个参数，则必须使用圆括号代表安琥是列表

let fun = () => 'Blue';

let fun = (x, y, z) => x + y + z;

既然正常函数可以与rest参数联合使用，那么箭头函数也可以

const mkArr = (...arr) => arr;
mkArr(1, 2, 3, 4);  //[1, 2, 3, 4]

const mkArr = (first,...arr) => [first,arr];
mkArr(1, 2, 3, 4);
//[1, [2, 3, 4]]

5.2 使用箭头函数的注意点

1. 函数体内的this对象，就是【定义时所在的对象】，而不是使用时所在的对象。
2. 【不可以当作构造函数】，也就是说，不可以使用new命令，否则会抛出一个错误。
3. 【不可以使用arguments对象】，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
4. 【不可以使用yield命令】，因此箭头函数不能用作 Generator 函数。

function fun() {
    setTimeout(() => {
        console.log('name:', this.name);
    }, 100);
}

var name = 'Crazy';

fun.call({ name: 'Blue' }); //name: Blue

上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在fun函数生成时，而它的真正执行要等到100毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出Crazy。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{ name: ‘Blue’ }），所以输出的是Blue。

箭头函数可以让setTimeout里面的this，绑定定义时所在的作用域，而不是指向运行时所在的作用域。下面是另一个例子。

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);

  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。所以，3100毫秒之后，timer.s1被更新了3次，而timer.s2一次都没更新。