ES6新特性（一）：箭头函数

语法

箭头函数相当于匿名函数

• 没有参数，单条语句

var f = ()=>{console.log("hello")}
f();

• 只有一个参数，单条语句

var f =  (x)=>{console.log(x)}
f(1);

// 如果只有一个参数，可以省略括号: 
var f =  x =>{console.log(x)}
f(1);

//如果返回值仅仅只有一个表达式(expression), 还可以省略大括号： 
var f =  x => console.log(x)
f(1);

• 多个参数，多条语句

// 可变参数:
   var f =  (x,y,...rest)=>{
          var i,sum = x+y;
          for(i=0;i<rest.length;i++){
              console.log(rest[i]);  // 3,4
              sum += rest[i];
          }
          console.log(sum); // 10
      }
     f(1,2,3,4);

 

箭头函数内部的this是词法作用域，由上下文确定

我们现在希望利用setTimeout来增加num的值，但是输出的结果是NaN。现在我们来思考下这个问题，首先函数setTimeout没有被某个声明的对象调用，也没有使用new关键字，再之没有使用bind, call和apply。setTimeout只是一个普通的函数。它里面的this绑定到全局对象的。this.num++是针对window对象的num，而window.num未定义。（通过new运算符来调用函数时，函数被当做一个构造函数，this指向构造函数创建出来的对象，所以num是绑定到a这个对象上的。）

  function a(){
       this.num = 0;
       console.log(this);  // a
       setTimeout(function add() {
           console.log(this);   //window
           console.log(this.num++);   //NaN
       }, 1000);
   }
   var c = new a();

使用箭头函数！使用箭头函数就可以让this总是指向词法作用域，也就是外层调用者

 function a(){
            this.num = 0;
            console.log(this);  // a
            setTimeout(()=>{
                console.log(this.num++);
            },1000)
        }
        var c = new a();