函数参数的默认值
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。
ES6 之前：
function makeRequest(url, timeout, callback) {
timeout = typeof timeout !== 'undefined' ? timeout : 2000;
callback = typeof callback !== 'undefined' ? callback : function() {};
// 函数的剩余部分
}
2
3
4
5
//ES6
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello'); // Hello World
log('Hello', 'China'); // Hello China
log('Hello', ''); // Hello
2
3
4
5
6
7
8
参数变量是默认声明的，所以不能用 let 或 const 再次声明。
function foo(x = 5) {
let x = 1; // error
const x = 2; // error
}
2
3
4
使用参数默认值时，函数不能有同名参数。
// 不报错
function foo(x, x, y) {
// ...
}
// 报错
function foo(x, x, y = 1) {
// ...
}
// SyntaxError: Duplicate parameter name not allowed in this context
2
3
4
5
6
7
8
9
10
参数默认值不是传值的，而是每次都重新计算默认值表达式的值。也就是说，参数默认值是惰性求值的。
let x = 99;
function foo(p = x + 1) {
console.log(p);
}
foo(); // 100
x = 100;
foo(); // 101
2
3
4
5
6
7
8
9
在函数声明中能指定任意一个参数的默认值，即使该参数排在未指定默认值的参数之前也是可以的。
function makeRequest（ur1，timeout=2000，callback）{
//函数的剩余部分
}
// 使用默认的 timeout
makeRequest("/foo", undefined, function(body) {
doSomething(body);
});
// 使用默认的 timeout
makeRequest("/foo");
// 不使用默认值
makeRequest("/foo", null, function(body) {
doSomething(body);
});
2
3
4
5
6
7
8
9
10
11
12
13
在本例中，只有在未传递第二个参数、或明确将第二个参数值指定为 undefined 时，timeout 的默认值才会被使用。
与解构赋值默认值结合使用
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
2
3
4
5
6
7
8
上面代码只使用了对象的解构赋值默认值，没有使用函数参数的默认值。只有当函数 foo 的参数是一个对象时，变量 x 和 y 才会通过解构赋值生成。如果函数 foo 调用时没提供参数，变量 x 和 y 就不会生成，从而报错。通过提供函数参数的默认值，就可以避免这种情况。
function foo({ x, y = 5 } = {}) {
console.log(x, y);
}
foo(); // undefined 5
function fetch(url, { body = '', method = 'GET', headers = {} }) {
console.log(method);
}
fetch('http://example.com', {});
// "GET"
fetch('http://example.com');
// 报错
function fetch(url, { body = '', method = 'GET', headers = {} } = {}) {
console.log(method);
}
fetch('http://example.com');
// "GET"
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
会影响函数的 length 属性
指定了默认值以后，函数的 length 属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length 属性将失真。
(function(a) {}
.length(
// 1
function(a = 5) {}
)
.length(
// 0
function(a, b, c = 5) {}
).length); // 2
2
3
4
5
6
7
8
9
上面代码中，length 属性的返回值，等于函数的参数个数减去指定了默认值的参数个数。比如，上面最后一个函数，定义了 3 个参数，其中有一个参数 c 指定了默认值，因此 length 属性等于 3 减去 1，最后得到 2。
这是因为 length 属性的含义是，该函数预期传入的参数个数。某个参数指定默认值以后，预期传入的参数个数就不包括这个参数了。同理，后文的 rest 参数也不会计入 length 属性。
(function(...args) {}.length); // 0
如果设置了默认值的参数不是尾参数，那么 length 属性也不再计入后面的参数了
(function(a = 0, b, c) {}.length(
// 0
function(a, b = 1, c) {}
).length); // 1
2
3
4
参数默认值的作用域
一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域（context）。等到初始化结束，这个作用域就会消失。这种语法行为，在不设置参数默认值时，是不会出现的。
var x = 1;
function f(x, y = x) {
console.log(y);
}
f(2); // 2
2
3
4
5
let x = 1;
function f(y = x) {
let x = 2;
console.log(y);
}
f(); // 1
2
3
4
5
6
7
8
参数初始化会在函数被调用时进行，无论是给参数传递了一个值、还是使用了参数的默认值。
上面代码中，函数 f 调用时，参数 y = x 形成一个单独的作用域。这个作用域里面，变量 x 本身没有定义，所以指向外层的全局变量 x。函数调用时，函数体内部的局部变量 x 影响不到默认值变量 x。如果此时，全局变量 x 不存在，就会报错。
var x = 1;
function foo(
x,
y = function() {
x = 2;
}
) {
var x = 3;
y();
console.log(x);
}
foo(); // 3
x; // 1
2
3
4
5
6
7
8
9
10
11
12
13
14
上面代码中，函数 foo 的参数形成一个单独作用域。这个作用域里面，首先声明了变量 x，然后声明了变量 y，y 的默认值是一个匿名函数。这个匿名函数内部的变量 x，指向同一个作用域的第一个参数 x。函数 foo 内部又声明了一个内部变量 x，该变量与第一个参数 x 由于不是同一个作用域，所以不是同一个变量，因此执行 y 后，内部变量 x 和外部全局变量 x 的值都没变。
如果将 var x =3 的 var 去除，函数 foo 的内部变量 x 就指向第一个参数 x，与匿名函数内部的 x 是一致的，所以最后输出的就是 2，而外层的全局变量 x 依然不受影响。
var x = 1;
function foo(
x,
y = function() {
x = 2;
}
) {
x = 3;
y();
console.log(x);
}
foo(); // 2
x; // 1
2
3
4
5
6
7
8
9
10
11
12
13
14
参数默认值的暂时性死区
与 1et 声明相似，函数每个参数都会创建一个新的标识符绑定，它在初始化之前不允许被访问，否则会抛出错误。参数初始化会在函数被调用时进行，无论是给参数传递了一个值、还是使用了参数的默认值。
function getValue(value) {
return value + 5;
}
function add(first, second = getValue(first)) {
return first + second;
}
console.log(add(1, 1)); // 2
console.log(add(1)); // 7
2
3
4
5
6
7
8
调用 add(1, 1)和 add(1)事实上执行了以下代码来创建 first 与 second 的参数值：
//JS调用add(1,1)可表示为
let first = 1;
let second = 1;
//JS调用add(1)可表示为
let first = 1;
let second = getValue(first);
2
3
4
5
6
改写一下
function add(first = second, second) {
return first + second;
}
console.log(add(1, 1)); // 2
console.log(add(undefined, 1)); // 抛出错误
2
3
4
5
6
本例中调用 add(1, 1) 与 add(undefined, 1) 对应着以下的后台代码：
// JS 调用 add(1, 1) 可表示为
let first = 1;
let second = 1;
// JS 调用 add(1) 可表示为
let first = second;
let second = 1;
2
3
4
5
6
7
本例中调用 add（undefined，1）抛出了错误，是因为在 first 被初始化时 second 尚未被初始化。此处的 second 存在于暂时性死区内，对于 second 的引用就抛出了错误。
函数参数拥有各自的作用域和暂时性死区，与函数体的作用域相分离，这意味着参数的默认值不允许访问在函数体内部声明的任意变量。
应用
利用参数默认值，可以指定某一个参数不得省略，如果省略就抛出一个错误。
function throwIfMissing() {
throw new Error('Missing parameter');
}
function foo(mustBeProvided = throwIfMissing()) {
return mustBeProvided;
}
foo();
// Error: Missing parameter
2
3
4
5
6
7
8
rest 参数
ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用 arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。rest 参数就是一个真正的数组，数组特有的方法都可以使用。
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3); // 10
2
3
4
5
6
7
8
// arguments变量的写法
function sortNumbers() {
return Array.prototype.slice.call(arguments).sort();
}
// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();
2
3
4
5
6
rest 参数的限制条件
一是函数只能有一个剩余参数，并且它必须被放在最后。
// 报错
function f(a, ...b, c) {
// ...
}
2
3
4
第二个限制是剩余参数不能在对象字面量的 setter 属性中使用，这意味着如下代码同样会导致语法错误：
1et object={
//语法错误：不能在setter中使用剩余参数
set name（...value）{
//一些操作
}；
2
3
4
5
存在此限制的原因是：对象字面量的 setter 被限定只能使用单个参数；而剩余参数按照定义是不限制参数数量的，因此它在此处不被许可。
前面有讲函数的 length 属性，不包括 rest 参数。
(function(a) {}
.length(
// 1
function(...a) {}
)
.length(
// 0
function(a, ...b) {}
).length); // 1
2
3
4
5
6
7
8
9
严格模式
从 ES5 开始，函数内部可以设定为严格模式。
function doSomething(a, b) {
'use strict';
// code
}
2
3
4
ES2016 做了一点修改，规定只要函数参数使用了默认值、解构赋值、或者扩展运算符，那么函数内部就不能显式设定为严格模式，否则会报错。
// 报错
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
}
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
这样规定的原因是，函数内部的严格模式，同时适用于函数体和函数参数。但是，函数执行的时候，先执行函数参数，然后再执行函数体。这样就有一个不合理的地方，只有从函数体之中，才能知道参数是否应该以严格模式执行，但是参数却应该先于函数体执行。
把函数包在一个无参数的立即执行函数里面可以规避这种限制。
const doSomething = (function() {
'use strict';
return function(value = 42) {
return value;
};
})();
2
3
4
5
6
在代码块中声明函数
在 ES3 或更早版本中，在代码块中声明函数（即块级函数）严格来说应当是一个语法错误，但所有的浏览器却都支持该语法。可惜的是，每个支持该语法的浏览器都有轻微的行为差异，所以最佳实践就是不要在代码块中声明函数（更好的选择是使用函数表达式）。
严格模式下
为了控制这种不兼容行为，ES5 的严格模式为代码块内部的函数声明引入了一个错误。
然而 ES6 会将 doSomething()函数视为块级声明，并允许它在定义所在的代码块内部被访问。块级函数与 let 函数表达式相似，在执行流跳出定义所在的代码块之后，函数定义就会被移除。关键区别在于：块级函数会被提升到所在代码块的顶部；而使用 let 的函数表达式则不会 。
'use strict';
if (true) {
console.log(typeof doSomething); //"function"
function doSomething() {
// ...
}
doSomething();
}
console.log(typeof doSomething); // "undefined
2
3
4
5
6
7
8
9
非严格模式下
ES6 在非严格模式下同样允许使用块级函数，但行为有细微不同。块级函数的作用域会被提升到所在函数或全局环境的顶部，而不是代码块的顶部。
// ES6 behavior
if (true) {
console.log(typeof doSomething); //"function"
function doSomething() {
// ...
}
doSomething();
}
console.log(typeof doSomething); // "function"
2
3
4
5
6
7
8
9
name 属性
函数的 name 属性，返回该函数的函数名。
function foo() {}
foo.name; // "foo"
2
getter 函数，因此它的名称是 "get firstName" ，以标明它的特征；同样，setter 函数也会带有"set"的前缀（getter 与 setter 函数都必须用 Object.getOwnPropertyDescriptor()来检索）。另外，使用 bind（）创建的函数会在名称属性值之前带有"bound”前缀；而使用 Function 构造器创建的函数，其名称属性则会有“anonymous”前缀，如果将一个匿名函数赋值给一个变量，ES5 的 name 属性，会返回空字符串，而 ES6 的 name 属性会返回实际的函数名。
var f = function() {};
// ES5
f.name; // ""
// ES6
f.name; // "f"
2
3
4
5
6
7
new.target 元属性
JS 为函数提供了两个不同的内部方法：[[Call]]与[[Construct]]。当函数未使用 new 进行调用时，[[Call]]方法会被执行，运行的是代码中显示的函数体。而当函数使用 new 进行调用时，[[Construct]]方法则会被执行，负责创建一个被称为新目标的新的对象，并且使用该新目标作为 this 去执行函数体。拥有[[Construct]] 方法的函数被称为构造器。记住并不是所有函数都拥有[[Construct]]方法，因此不是所有函数都可以用 new 来调用。
在 ES5 中判断函数如何被调用
在 ES5 中判断函数是不是使用了 new 来调用（即作为构造器），最流行的方式是使用 instanceof，例如：
function Person(name) {
if (this instanceof Person) {
this.name = name;// 使用new
} else {
throw new Error("You must use new with Person
}
}
var person = new Person("Nicholas");
var notAPerson = Person("Nicholas");//抛出错误
2
3
4
5
6
7
8
9
10
可惜的是，该方法并不绝对可靠，因为在不使用 new 的情况下 this 仍然可能是 Person 的实例。
var notAPerson = Person.call(person, 'Michael'); // 奏效了！
在 ES6 中判断函数如何被调用
为了解决这个问题，ES6 引入了 new.target 元属性。元属性指的是“非对象”（例如 new）上的一个属性，并提供关联到它的目标的附加信息。当函数的[[Construct]]方法被调用时，new.target 会被填入 new 运算符的作用目标，该目标通常是新创建的对象实例的构造器，并且会成为函数体内部的 this 值。而若[[Call]]被执行，new.target 的值则会是 undefined。
通过检查 new.target 是否被定义，这个新的元属性就让你能安全地判断函数是否被使用 new 进行了调用。
function Person(name) {
if (typeof new.target !== "undefined") {
this.name = name;// 使用new
} else {
throw new Error("You must use new with Person
}
}
var person = new Person("Nicholas");
var notAPerson = Person("Nicholas");//抛出错误
2
3
4
5
6
7
8
9
警告：在函数之外使用 new.target 会有语法错误。
箭头函数
ES6 允许使用“箭头”（=>）定义函数。但它的行为在很多重要方面与传统的 JS 函数不同：
区别
- 没有 this、super、arguments，也没有 new.target 绑定：this、super、arguments、以及函数内部的 new.target 的值由所在的、最靠近的非箭头函数来决定。
- 不能被使用 new 调用：箭头函数没有[[Construct]]方法，因此不能被用为构造函数，使用 new 调用箭头函数会抛出错误。
- 没有原型：既然不能对箭头函数使用 new，那么它也不需要原型，也就是没有 prototype 属性。
- 不能更改 this：this 的值在函数内部不能被修改，在函数的整个生命周期内其值会保持不变。
- 没有 arguments 对象：既然箭头函数没有 arguments 绑定，你必须依赖于具名参数或剩余参数来访问函数的参数。
- 不允许重复的具名参数：箭头函数不允许拥有重复的具名参数，无论是否在严格模式下；而相对来说，传统函数只有在严格模式下才禁止这种重复。
- 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
var f = () => 5;
// 等同于
var f = function() {
return 5;
};
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
2
3
4
5
6
7
8
9
10
11
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用 return 语句返回。
var sum = (num1, num2) => {
return num1 + num2;
};
2
3
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
// 报错
let getTempItem = id => { id: id, name: "Temp" };
// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });
2
3
4
5
下面是一种特殊情况，虽然可以运行，但会得到错误的结果。
let foo = () => {
a: 1;
};
foo(); // undefined
2
3
4
上面代码中，原始意图是返回一个对象{a:1}，但是由于引擎认为大括号是代码块，所以执行了一行语句 a: 1。这时，a 可以被解释为语句的标签，因此实际执行的语句是 1;，然后函数就结束了，没有返回值。
如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。
let fn = () => void doesNotReturn();
this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因是箭头函数根本没有自己的 this，导致内部的 this 就是外层代码块的 this。正是因为它没有 this，所以也就不能用作构造函数。
所以，箭头函数转成 ES5 的代码如下。
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function() {
console.log('id:', _this.id);
}, 100);
}
2
3
4
5
6
7
8
9
10
11
12
13
14
箭头函数的 this 看外层的是否有函数
如果有，外层函数的 this 就是内部箭头函数的 this。
function Person() {
this.obj = {
showThis: () => {
console.log(this); //person
}
};
}
let fun5 = new Person();
fun5.obj.showThis();
2
3
4
5
6
7
8
9
如果没有，this 值就会是全局对象（在浏览器中是 window，在 nodejs 中是 global）。
let obj = {
name: 'kobe',
age: 39,
getName: () => {
btn2.onclick = () => {
console.log(this); //window
};
}
};
obj.getName();
2
3
4
5
6
7
8
9
10
不适用的场合
由于箭头函数使得 this 从“动态”变成“静态”，下面两个场合不应该使用箭头函数。
第一个场合是定义函数的方法，且该方法内部包括 this。
const cat = {
lives: 9,
jumps: () => {
this.lives--;
}
};
2
3
4
5
6
第二个场合是需要动态 this 的时候，也不应使用箭头函数。
var button = document.getElementById('press');
button.addEventListener('click', () => {
this.classList.toggle('on');
});
2
3
4
上面代码运行时，点击按钮会报错，因为 button 的监听函数是一个箭头函数，导致里面的 this 就是全局对象。如果改成普通函数，this 就会动态指向被点击的按钮对象。
另外，如果函数体很复杂，有许多行，或者函数内部有大量的读写操作，不单纯是为了计算值，这时也不应该使用箭头函数，而是要使用普通函数，这样可以提高代码可读性。
双冒号运算符
箭头函数可以绑定 this 对象，大大减少了显式绑定 this 对象的写法（call、apply、bind）。但是，箭头函数并不适用于所有场合，所以现在有一个提案，提出了“函数绑定”（function bind）运算符，用来取代 call、apply、bind 调用。
函数绑定运算符是并排的两个冒号（::），双冒号左边是一个对象，右边是一个函数。该运算符会自动将左边的对象，作为上下文环境（即 this 对象），绑定到右边的函数上面。
foo::bar;
// 等同于
bar.bind(foo);
foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);
const hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn(obj, key) {
return obj::hasOwnProperty(key);
}
2
3
4
5
6
7
8
9
10
11
12
如果双冒号左边为空，右边是一个对象的方法，则等于将该方法绑定在该对象上面。
var method = obj::obj.foo;
// 等同于
var method = ::obj.foo;
let log = ::console.log;
// 等同于
var log = console.log.bind(console);
2
3
4
5
6
7
参考文章：ECMAScript6 入门