es6箭头函数this问题

最近做vue的项目，发现中用了很多es6中的新特性，随后开始恶补es6，发现箭头函数这一简洁的函数写法，不过还是感觉不习惯，箭头函数的格式；

  //有参数
  var foo = n => console.log(n);
  var foo = function (n) {
      console.log(n);
  }
//  没有参数
  var foo = () => 1;
  var foo = function () {
      return 1;
  }
//  多个参数
  var foo = (n1,n2) => n1+n2;
  var foo = function (n1,n2) {
      return n1+n2;
  }

//返回值多行要用 {}
  var foo = (n) => {
        if(typeof n == 'number') {
            return n+=1;
        }
    }
  var foo = function (n) {
        if(typeof n == 'number') {
            return n+=1;
        }
    }

//总结：返回值为单行的时候，可以省去return；

 　

 　箭头函数中this是一个空对象，在node.js中测试可发现:

    let foo = ()=> {
        console.log(this)    //    {}
    }

　

　箭头函数上层还是箭头函数，那么就仍然没有找到，最终都没有找到的话，那就是window对象了。

var number = 100,
    log = console.log.bind("console");        

var obj = {
      number: 10,
      print: ()=> {
             return ()=> {
                   log(this);                     //window    
                   log(this.number);              //100
             }
      }    
};

obj.print()();
    

　　

如果上层是function格式的函数，那么就会绑定到箭头函数的this

var number = 100,
      log = console.log.bind("console");

var obj = {
       number:10,
       print: function () {
           return () => {
                    log(this);                   //obj
                    log(this.number);            //10
           } 
       }  

}

obj.print()();

　　

　　并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，它的this是继承外面的，因此内部的this就是外层代码块的this。

　

　　产生箭头函数的绑定，箭头函数的this不再多变，（根据声明时，所绑定的执行，而不是运行时的对象）　

function函数this运行时绑定的理解：

//代码段1
var number = 10;
function foo () {
     console.log(this.number);
};

var obj = {
         number:100,
         foo: foo  
};


obj.foo();     //100


//代码段2
var number = 10;
var obj = {
         number:100,
         foo: function () {
             console.log(this.number)
         }
}
obj.foo()    //100

　　function函数this是再代码运行时期绑定而不是在声明时期绑定的，而箭头函数是根据声明时绑定执行的，箭头函数的this不再多变

　　

转载于:https://www.cnblogs.com/wlgz/p/7183729.html