ES6之函数的扩展

ES6函数的扩展

1.函数参数的默认值

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

function log( x) {
  x = x || 'Hello';
  console.log( x);
}

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面

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

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

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

！注意，参数变量x是默认声明的，在函数体中不能用let和const再次声明

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

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

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

2.rest参数

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

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}
add(2, 5, 3) // 10

3.严格模式

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

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

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

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

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

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

4.nam属性

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

var f = function () {};

// ES5
f.name // ""

// ES6
f.name // "f"

5.箭头函数

ES6允许使用”箭头“ () => {}定义函数

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

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

只返回一条语句时，可以省略return和大括号{}

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

!注意，如果直接返回一个对象，必须在大括号外面加圆括号

let getTemp = id => ({ id: id, name: "Temp" });

使用注意

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

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

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

（4）一定是匿名函数

第一点尤其值得注意。this对象的指向是可变的，但是在箭头函数中，它是固定的。

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

var id = 21;

foo.call({ id: 42 });
// id: 42

原因是，因为箭头函数自身没有this，箭头函数里面的this是外层代码块的this，他的this不能被call，apply也能证明这一点，也因为没有this，所有不能当作构造函数

适用场合

箭头函数的存在可以省略保存外部this的操作

不适用场合

第一个场合是定义对象的方法，且该方法内部包括this。

const cat = {
  num: 9,
  sum: () => {
    this.num++;
  }
}

调用cat.sum()时，如果是普通函数，该方法内部的this指向cat；如果写成上面那样的箭头函数，使得this指向全局对象，因此不会得到预期结果。这是因为对象不构成单独的作用域，导致sum箭头函数定义时的作用域就是全局作用域

如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。