ES6 – 函数扩展

一、设置默认参数

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

function sayHello(name){

    //传统的指定默认参数的方式

    var name = name||'lalala';

    document.write('Hello '+name);

} 

//运用ES6的默认参数

function sayHello2(name='lalala'){

    document.write(`Hello ${name}`);

}

sayHello();  //输出：Hello lalala

sayHello('hahahha');  //输出：Hello hahahha

sayHello2();  //输出：Hello lalala

sayHello2('hahahha');  //输出：Hello hahahha
复制代码

二、rest参数

ES6之前，获取函数多余的参数用的是 arguments :

function fn(a) {
    for(var i = 0; i < arguments.length; i ++){
        console.log(arguments[i]);
    }
    console.log(a);   
}
fn(1, 2, 3);
// 1
// 2
// 3
// 1
复制代码

rest参数（形式为“…变量名”）可以称为不定参数，用于获取函数的多余参数，这样就不需要使用arguments对象了。

rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

function add(...values) {

   let sum = 0; 

   for (var val of values) {

      sum += val;

   } 

   return sum;

} 

add(1, 2, 3) // 6
复制代码

注意

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

// 报错
function f(a, ...b, c) {
  // ...
}
复制代码

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

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1
复制代码

三、箭头函数

ES6允许使用箭头( => )来定义函数，这里定义一个最简单的函数:

var sayHi = () => {
    alert('hi');
}

// 等价于

function sayHi() {
    alert('hi');
}
复制代码

需要传参的话把参数写在圆括号里即可:

var add = (a, b) => {
    console.log(a + b);
}

//等同于

function add(a, b){
    console.log(a + b);
}
add(10, 20);   // 20
复制代码

如果参数只有一个，也可以不使用圆括号:

var fn = a => {
    console.log(a);
}
fn(100);   // 100
复制代码

而且如果只有一条语句，甚至花括号也可以省略。

var fn = a => console.log(a);
fn(100);   // 100
复制代码

注意

• 箭头函数中的 this，指的是定义时所在的对象，而不是调用时所在的对象。

• 不可以当做构造函数，也就是说，不可以使用 new 操作符，否则报错。

• 不可以使用 arguments对象。

箭头函数的 this 指向

箭头函数里面没有自己的this，自然而然也就不能作为构造函数，箭头函数是引用外层的this。在箭头函数中 this 指向是固定的。

箭头函数导致this总是指向函数定义生效时所在的对象中的this；

function foo() { 
    setTimeout(() => { console.log(this); }, 100); 
} 
foo()   // global 对象 ，因为箭头函数没有自己的this，foo函数的this就是箭头函数this的指向。foo中this指向是global 所以 箭头函数中的this也是指向global（即外层this）
复制代码