ES6入门五：箭头函数、函数与ES6新语法

• 箭头函数的基本用法与特点
• 函数与ES6新语法

 一、箭头函数的基本用法与特点

• 声明箭头函数采用声明变量和常量的关键字：var、let、const
• 箭头函数的参数：没有参数用"()"空括号表示、一个参数可以不写括号、多个参数用"(a,b,c)"括号包裹
• 使用箭头“=>”连接参数与执行块"{}"。
• 如果执行块内只有return语句，可以不写大括号“{}”和return关键字。

//ES6箭头函数
const foo = (x,y) => x + y;
//ES5编译结果
var foo = function foo(x, y) {
  return x + y;
};

箭头函数的特点

• 不写function关键字
• 只能作为函数使用，不能使用nwe构建对象，因为没有Function原型
• 箭头函数的参数不能重复名
• 内部arguments、this由定义时外围最近一层的非箭头函数的arguments和this决定值

这里我暂时先不解析箭头函数的特点，而是要说明一点，虽然箭头函数语法被称赞简洁、清晰明了、可读性强，真的如此？先来看下面这个示例：

//ES6的一个箭头函数示例
var dollabillsyall = (strings, ...values) =>
    strings.reduce( (s, v, idx) => {
        if(idx > 0){
            if(idx > 0){
                if(typeof values[idx - 1] == "number"){
                    s += `$${values[idx - 1].toFixed(2)}`;
                }else{
                    s += values[idx - 1];
                }
            }
            return s + v;
        }
    },"");
//ES5的编译结果
var dollabillsyall = function dollabillsyall(strings) {
  for (var _len = arguments.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    values[_key - 1] = arguments[_key];
  }

  return strings.reduce(function (s, v, idx) {
    if (idx > 0) {
      if (idx > 0) {
        if (typeof values[idx - 1] == "number") {
          s += "$".concat(values[idx - 1].toFixed(2));
        } else {
          s += values[idx - 1];
        }
      }

      return s + v;
    }
  }, "");
};

当你看到上面这个示例后你还会觉得箭头函数简洁、清晰明了吗？从代码解构上来说明显可以感觉到编译成ES5反而更清晰。所以箭头函数的简洁、清晰明了、可读性强是有前提的，就是函数比较简短的情况下才能体现出箭头函数的优势。千万不要一味的追求新语法而不作选择的修改代码的编写方式，这明显是不明智的行为。

1.1箭头函数不能被当作构造函数来使用：

let foo = () => {
    this.a = 10;
}
new foo();//foo is not a constructor :foo不是一个构造函数

1.2全局作用域下的箭头函数没有arguments：

let sum = () =>{
    console.log(arguments);
}
sum();//ReferenceError: arguments is not defined at sum :arguments没有定义

1.3全局作用域下的箭头函数的this指向window（非严格模式下）：

//ES6全局作用域下的箭头函数this的指向
var foo = () => {
    console.log(this);
}
foo(); //window --不使用babel编译的执行结果
//ES5的编译的结果
"use strict";
var _this = void 0;
var foo = function foo() {
  console.log(_this);
};
foo(); //undefined--这是因为严格模式下函数自执行this指向undefined

1.4前面两个示例都印证了箭头函数的arguments、this在定义时由外围的最近一层非箭头函数的arguments和this决定，所以在全局上没有arguments和全局函数的this指向window。按照这个说法，如果声明一个对象，然后对象的属性引用了全局定义的函数，采用对象引用执行其this也是指向window。这个毫无疑问，的确时这样，请看示例：

var a = 'outerObj';
var foo = () => {
    console.log(this.a);
}
let obj = {
    a: 'innerObj',
    fn:foo
}
obj.fn();//outerObj : obj.fn引用的时全局的foo箭头函数，其this是定义是就确定的

1.5一定请注意前面的定义，箭头函数的this和arguments由定义时的最近的非箭头函数的arguments和this决定，所以即便在全局的对象上直接写到对象上的箭头函数，其this指向也是window。

var a = 'outerObj';
let obj = {
    a: 'innerObj',
    fn:()=>{
        console.log(this.a);
    }
}
obj.fn();//outerObj : obj是全局对象，obj.fn是箭头函数，所以其this指向了widnow

1.6前面所证明的还是只箭头函数的外层没有函数的情况（全局箭头函数、引用执行全局箭头函数、全局对象上定义的箭头函数），其this指向都是window，接着来看这个示例，证明箭头函数的this指向外层最近的非箭头函数的this。

var a = 'outerObj';
var obj = {
    a:"innerObj",
    fn(){
        return () => {
            console.log(this.a);
        }
    }
}
var obj1 = {
    a:"strObj1"
}
var foo = obj.fn();
obj1.foo = obj.fn();
foo(); //innerObj
obj1.foo(); //innerObj

1.7使用箭头函数修正异步函数执行的this指向（以定时器为例）：

//使用箭头函数的this指向特性修正异步函数执行的this指向
var obj = {
    a:"innerObj",
    fn(){
        setTimeout(() => {
            console.log(this.a);
        },1000);
    }
}
obj.fn(); //innerObj
//ES5中的编译结果（也是我们之前解决异步函数执行this指向的常用方法）
var obj = {
  a: "innerObj",
  fn: function fn() {
    var _this = this; //变量缓存this

    setTimeout(function () {
      console.log(_this.a); //通过函数的作用找到缓存this的变量
    }, 1000);
  }
};
obj.fn();

关于箭头函数使用的小总结：

• 函数中只有唯一语句return某个计算出的值，适应箭头函数；
• 函数内部没有this引用，且没有自生引用（递归、事件绑定、解除绑定），适应箭头函数；（this引用可以用来特殊处理this指向，灵活应用）
• 如果内层函数表达式依赖封装函数中某种像var args = Array.prototype.slice.call(arguments)来保证arguments的词法复制，那么这个内层函数应该可以安全地使用箭头函数。
• 函数声明、较长的多语句函数表达式、需要词法名称标识（递归等）的函数，以及任何不符合以上几个特征的函数——尽量避免使用箭头函数。

 二、函数与ES6新语法

 2.1箭头函数省略return关键字和{}不能适应返回一个对象字面量的值：

//ES6箭头函数返回对象字面量值（错误代码）
let sum = (a, b) => {a:a, b:b};
//被识别成下面这段代码（错误代码）
let sum = (a, b) => {
    a:a, b:b;
    return undefined;
};
//解决方法就是将返回的对象字面量变成一个表达式（正确代码）
let sum = (a, b) => ({a:a, b:b});

2.2使用箭头函数改善高级函数的结构：

//ES5高级函数的场景示例
function foo(x){
    return function(y){
        return function(z){
            return x + y + z;
        }
    }
}
console.log(foo(1)(2)(3));//6
//ES6应用箭头函数简化高级函数结构
let foo = x => y => x => x + y +z;
console.log(foo(1)(2)(3));//6

 2.3默认参数的函数的参数长度--背后说明的默认参数的底层实际是在执行时向arguments上添加的数据：

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

 2.4匿名函数的名称在ES5与ES6中的差异，ES5的name属性不会返回匿名函数所属的变量名称（函数名），而在ES6中则是返回函数所属的变量名称（函数名）看下面的示例。对于具名函数无论被赋值于谁，在ES5和ES6中都是返回具名函数原始的函数声明名称。

var f = function(){}
//ES5
f.name //"",空字符串
//ES6
f.name //"f",函数名