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不再多变

  

posted @ 2017-07-15 18:07  wlgz  阅读(362)  评论(0编辑  收藏  举报