ECMAScript 6 之箭头函数

在es6中可以使用箭头函数（Arrow Functions）

                                    
var foo = (a) => a;
foo("hello word"); //hello word


                                

等价于

                                    
var foo = function(a){
  return a
}
foo("hello word"); //hello word


                                

以上函数只有一个参数,还可以写成连括号都不需要:

                                    
var foo = a => a;
foo("hello word"); //hello word


                                

如果函数没有参数,就必须要加上括号了:

                                    
var foo = () => {
  alert("hello word");
};


                                

作为事件句柄

                                    
document.addEventListener('click', event => {
    console.log(event)
})


                                

回调

                                    
$("button").hover(
  ()=>{
  //鼠标移入
  console.log("鼠标移入");
},
  ()=>{
  //鼠标移出
  console.log("鼠标移出");
})


                                

---

使用箭头函数之后,this将会继承外围作用域的this,举个例子

                                    
var oImage = new Image()
var oImage2 = new Image()
document.getElementById("button").onclick=() => {

  //没有外围作用域,所以this是undefined
  console.log(this); // 这里的this是undefined

  oImage.src="https://gss0.bdstatic.com/5eR1dDebRNRTm2_p8IuM_a/res/img/richanglogo168_24.png";
  oImage2.src="https://gss0.bdstatic.com/5eR1dDebRNRTm2_p8IuM_a/res/img/richanglogo168_24.png";

  //这里使用了箭头函数,this将会继承外围作用域的this,
  //可是外围的this也是undefined,所以这里还是undefined
  oImage.onload=() => {
    console.log(this)// 这里的this是undefined
  }

  //这里没有用箭头函数
  oImage2.onload=function(){
    console.log(this)// 这里的this 将会是image对象
  }

}


                                

换一种写法,最外层使用传统的function写法

                                    
var oImage = new Image()
var oImage2 = new Image()
document.getElementById("button").onclick=function(){

  //这里没有使用箭头函数,所以this是button
  console.log(this); // 这里的this是button

  oImage.src="https://gss0.bdstatic.com/5eR1dDebRNRTm2_p8IuM_a/res/img/richanglogo168_24.png";
  oImage2.src="https://gss0.bdstatic.com/5eR1dDebRNRTm2_p8IuM_a/res/img/richanglogo168_24.png";

  //这里使用了箭头函数,this将会继承外围作用域的this
  oImage.onload=() => {
    console.log(this)// 这里的this还是button
  }

  //这里没有用箭头函数
  oImage2.onload=function(){
    console.log(this)// 这里的this 将会是image对象
  }

}