es6箭头函数

在es6中，推出了一个新语法 箭头函数；

以前定义一个函数，是这么定义的；

let test=function(){

	console.log('我是箭头函数');

};

现在可以简化下，用箭头函数：

let test=()=>{console.log('我是箭头函数')};

然后假如函数体只有一条语句或者是表达式的时候{}可以省略

let test=()=>console.log('我是箭头函数');

加形参情况；

let test2=(a)=>console.log(a);

只有一个形参的时候 ()可以省略 改成：

let test2=a=>console.log(a);

多个形参：

let test3=(x,y)=>console.log(x,y);

test3(10,20);

有返回值情况：

let test5=(x,y)=>{

	console.log(x,y);

	return x+y;

}

console.log(test5(1,3));

关于 箭头函数里的this；（重点） 箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是再定义的时候所在的对象就是它的this 箭头函数的this看外层是否有函数， 如果有，外层函数的this就是内部调用箭头函数的this 如果没有，则this是window

    
    Title


按钮1
按钮2

  let btn1=document.getElementById('btn1');
  let btn2=document.getElementById('btn2');

  btn1.onclick=function(){
    alert(this);
  };
  btn2.onclick=()=>{
    alert(this);
  }

上图可以看出 : 点击 按钮1, 这里的this是调用的时候的btn1对象；

点击按钮2，this是window对象；

再来个复杂点的实例，来深入理解下：

箭头函数搞到定义对象的回调函数里；

    
    Title


按钮1
按钮2

  let btn1=document.getElementById('btn1');
  let btn2=document.getElementById('btn2');

  let person1={
    name:'tom',
    getName:function(){
      btn1.onclick=()=>{
        console.log(this);
      }
    }
  }
  person1.getName();

  let person2={
    name:'xiaozhi',
    getName:function(){
      btn2.onclick=function(){
        console.log(this)
      }
    }
  }
  person2.getName();

上图可以看出 : 因为箭头函数是定义再对象的回调方法里，所以点击按钮1，这里的this是person1； 点击按钮2，这里的this是 调用的时候的btn2对象；