ES6 函数扩展

参数默认值

如果没有向某个形参传入对应的实参(即实参为undefined)，该参数就会取值为定义好的默认值(如果有的话)。
null被认为是有效的值传递。

function foo(name, age) {
  console.log(name, age);
}
foo();  // undefined undefined

function bar(name="无名氏", age=18) {
  console.log(name, age);
}
bar();  // 无名氏 18

不定参数

当不确定参数个数时，可以使用不定参数。
不定参数由...加上一个具名参数标识符组成。
在函数的参数列表中，如果有不定参数，则只能放在最后一个位置。
参数列表中最多只能有一个不定参数。

function foo(...bar) {
  console.log(Array.isArray(bar));
}
foo();  // true
// 不定参数中的参数列表会被封装成一个数组对象传入函数中。

function sum(...values) {
  let result = 0;
  for (var i = 0; i < values.length; i++) {
    result += values[i];
  }
  return result;
}
console.log(sum());         // 0
console.log(sum(1));        // 1
console.log(sum(1, 2));     // 3
console.log(sum(1, 2, 3));  // 6

函数自调用

这是函数的一个特性，但在ES6之前就有了。

function foo(name) {console.log("hello", name);}
foo("张三");  // hello 张三
// 这是有名函数，可多次调用。

// 如果某个函数只执行一次
(function bar(name) {console.log("你好", name);})("哈哈哈");  // hello 张三

格式：
func 是一个函数定义
(func) 表示函数|函数名
(func)(argsList) 表示函数自调用一次

箭头函数表达式

箭头函数提供了一种更简洁的函数书写方式。

详细语法见：箭头函数表达式

几个注意点：

• 箭头函数需要返回对象是，为与代码块区分，用()把对象包起来。

  var foo = (name) => {user:name};
  foo("张三")   // undefined
  var foo = (name) => ({user:name});  // 用()把返回的对象包起来
  foo("张三")   // {user: "张三"}
  

• 没有new.target绑定，所以箭头函数不能作为构造函数使用，不能用new关键字。

  function foo() {}
  new foo()   // foo {}
  var bar = function() {}
  new bar()   // bar {}
  

• 箭头函数中没有定义隐式的arguments。即为undefined。

  (function() {console.log(arguments);})()
  // Arguments [callee: ƒ, Symbol(Symbol.iterator): ƒ]
  
  (() => {console.log(arguments);})()
  // Uncaught ReferenceError: arguments is not defined
  

• 箭头函数表达式不支持使用Function对象的方法call, apply, bind等换绑定函数运行时内部的this对象。
  箭头函数内部的this对象，是定义函数时的对象，而不是调用时动态传入的thisArg对象。

  ES6之前，经常有var that = this或var self = this等操作，
  指向this对象，以在内部函数调用中使用想用的this对象。现在使用箭头函数比较方便。

  var person = {
    name: "内部",
    foo: function() {
      setTimeout(function() {
        // 这里的this指向全局对象window。
        console.log(this.name);
      });
    }
  }
  var name = "外部";
  person.foo();   // 外部
  
  // 使用箭头函数
  var person = {
    name: "内部",
    foo: function() {
      setTimeout(() => {
        // 箭头函数内部的this和上下文相关。
        console.log(this.name);
      });
    }
  }
  var name = "外部";
  person.foo();   // 内部
  

不适合使用箭头函数的场景

• 定义对象的成员方法，其中含有this(需要指向对象)。

  var person = {
    foo: () => {console.log(this);},      // window
    bar: function() {console.log(this);}  // {foo: ƒ, bar: ƒ}
  };
  person.foo();
  person.bar();
  

• 需要动态this时

  var btn = document.getElementById("xxx");
  btn.addEventListener("click", () => {
    this.classList.toggle("on");
  });
  

btn的监听函数时箭头函数，所以其中的this指向的是定义的时候，外层的this对象，即Window对象，导致无法操作被点击的按钮对象。