ES6笔记② 箭头函数

特性介绍

箭头函数是ES6新增的特性之一，它为JS这门语言提供了一种全新的书写函数的语法。

//ES5 
   function fun(x,y){
       return x+y;
   }
   console.log(fun(5,10));//15


//ES6
   var fun6 = (x,y) => {return x+y;}
   console.log(fun6(6,10));//16

ES6简化了声明函数，不需要再写 function .

好像除了简化代码，并没有什么新奇的对不对，那我们往下慢慢看。

——————————————————————————————————————————————————————————

箭头函数支持两种模式的函数体写法，我们姑且叫他简洁函数体和块级函数体。

// 简洁函数体
var fn = x => x * x;

// 块级函数体
var fn = (x, y) => {return x + y;};

简介函数体默认会把表达式的结果返回，块级函数体需要手动 return 。

this指向

用function生成的函数会定义一个自己的 this ，而箭头函数没有自己的 this，而是会和上一层的作用域共享 this 。

//es5中,内层函数如果想用外层函数的this属性，必须先将this赋值self变量中，然后通过self取值。
function Person(){
            this.a = 10;
            var self= this;
            return function(){
                return self.a++;
            }            
        }
        var closure = Person();
        console.log(closure());//10
        console.log(closure());//11

如果使用箭头函数则省事很多，代码如下：

//会和上一层的作用域共享 this 　　　　　　　　　　　　　　　　　　　　　　　　　　//再多套一层
function Person (){　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//function Person (){
            this.a = 10;　　                                                this.a = 10;
            return () => {                                                  return () => {      
                return this.a++;                　　　　　　　　　　　　　　　　　return () =>{
            }    　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　return this.a++;
        }　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}
        var closure = Person();　　　　　　　　　　　　　　　　　　　　　　　　　　}　
        console.log(closure());//10　　　　　　　　　　　　　　　　　　　　　　}
        console.log(closure());//11　　　　　　　　　　　　　　　　　　　　　　 var closure = Person();
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 console.log(closure()());//10
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 console.log(closure()());//11

apply & call

由于箭头函数已经绑定了 this 的值，即使使用 apply 或者 call 也不能，只能起到传参数的作用，并不能强行改变箭头函数里的 this 。

var adder = {
          x: 1,
          add1: function (y) {
              var fn = v => v + this.x;
              return fn(y);
          },
          add2: function (y) {
              var fn = v => v + this.x;
              var whatever = {
                  x: 2
              };
              return fn.call(whatever, y);//this并不是whatever

} };
 console.log(adder.add1(1)); // 2 
console.log(adder.add1(10)); // 11

 ps:this指向的问题js的this比较诡异，谁执行就指向谁

arguments

var fn = (...rest) => rest[2];
       console.log(fn(2,0,5));  //5

...rest 也是 ES6 的一个新特性，之后会介绍。
我们知道JS函数内部有个arguments对象，可以拿到全部实参。现在ES6给我们带来了一个新的对象，可以拿到除开始参数外的参数，即剩余参数
这个新的对象和arguments不一样，它是程序员自定义的一个普通标识符，只是需要在前面加上三个点：...

 es6函数中剩余参数 原文地址：http://www.cnblogs.com/snandy/p/4482463.html

不能被new

箭头函数不能与 new 关键字一起使用，会报错

var Fn = () => {
           this.a = 1;
    };
var f = new Fn();    // Error