ECMScript6之函数

函数参数的扩展

默认参数

基本用法：

function fn(name,age=17) {
    console.log(name+","+age);
}

fn("Echeverra",18);  // Echeverra,18
fn("Echeverra","");  // Echeverra,
fn("Echeverra");     // Echeverra,17

使用函数默认参数时，不允许有同名参数。

//不报错
function fn(name, name) {
}

//报错 Duplicate parameter name not allowed in this context
function fn(name, name, age=17) {
    console.log(name+","+age)
}

只有在未传递参数，或者参数为undefined时，才会使用默认参数，null值被认为是有效的值传递。

function fn(name,age=17) {
    console.log(name+","+age);
}
fn("Echeverra",null); // Amy,null

函数参数默认值存在暂时性死区，在函数参数默认值表达式中，还未初始化赋值的参数值无法作为其他参数的默认值。

function fn(x,y=x) {
    console.log(x,y);
}
fn(1);  // 1 1
 
function fn(x=y) {
    console.log(x);
}
fn();  //报错 y is not defined

不定参数

不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。具名参数只能放在参数组的最后，并且有且只有一个不定参数。

基本用法：

function fn(...values){
    console.log(values.length);
}
fn(1,2);      //2
fn(1,2,3,4);  //4

箭头函数

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

基本语法：参数=>函数体

• 无参数：() => {}
• 单个参数：x => {}
• 多个参数：(x, y) => {}
• 解构参数：({x, y}) => {}

基本用法：

var fn = a => a;

//等价于
var fn = function(a) {
    return a;
}

fn(1);  //1

当箭头函数没有参数或者有多个参数，要用()括起来。

var f = () => 5; 

var fn = (a,b) => a+b;
fn(6,2);  //8

当箭头函数函数体有多行语句，用{}包裹起来，表示代码块。当只有一行语句，并且需要返回结果时，可以省略{}, 结果会自动返回。

var fn = (a,b) => {
    let result = a+b;
    return result;
}
fn(6,2);  // 8

当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来。

// 报错
var fn = (id,name) => {id: id, name: name};
fn(6,2);  // 报错 Unexpected token :

// 不报错
var fn = (id,name) => ({id: id, name: name});
fn(6,2);  // {id: 6, name: 2}

箭头函数的一个用处是简化回调函数。

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

// 正常函数写法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭头函数写法
var result = values.sort((a, b) => a - b);

没有 this、super、arguments 和 new.target 绑定。

var func = () => {
  // 箭头函数里面没有 this 对象，
  // 此时的 this 是外层的 this 对象，即 Window 
  console.log(this)
}
func(55)  // Window 
 
var func = () => {    
  console.log(arguments)
}
func(55);  // 报错 arguments is not defined

箭头函数需注意以下几点：

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

尤其需注意第一点，this对象的指向是可变的，但是在箭头函数中，它是固定的，下面我们深入理解下箭头函数中的this。

• 箭头函数内部的this是词法作用域，由上下文确定。
• 箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。
• 由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()、bind()调用箭头函数时，无法对this进行绑定（无法使用call()或者apply()、bind()改变this的指向），即传入的第一个参数被忽略。内部的this指向父执行上下文里面的this。
• 箭头函数中，this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。
• 箭头函数中的this是在定义函数的时候绑定。

示例：

var x = 11;
var obj = {
    x: 22,
    say: ()=>{
        console.log(this.x);
    }
}
obj.say();  // 11

所谓的定义时候绑定，就是this是继承自父执行上下文中的this，比如这里的箭头函数中的this.x，箭头函数本身与say平级以key:value的形式，也就是箭头函数本身所在的对象为obj，而obj的父执行上下文就是window，因此这里的this.x实际上表示的是window.x，因此输出的是11。

另一个例子：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};

obj.getAge(); // 28

例子中箭头函数本身是在getAge方法中定义的，因此，getAge方法的父执行上下文是obj，因此这里的this指向则为obj对象。

参考文章：

• ES6 函数
• 函数的扩展
• 深入理解ES6箭头函数中的this