摘要：基本用法在中允許使用來(lái)定義函數(shù)，如下就等同于從上面可以看出，在箭頭左側(cè)的是代表參數(shù)，若參數(shù)只有一個(gè)，可以省略，箭頭右側(cè)的表示函數(shù)代碼塊，若代碼塊里面是個(gè)返回值，則可以省略不寫無(wú)參數(shù)情況若箭頭函數(shù)不需要參數(shù)，則左側(cè)用代替，如下無(wú)參數(shù)情況無(wú)參數(shù)

在ES6中允許使用 => 來(lái)定義函數(shù)，如下：

 var f = a => a;
    console.log(f(1)); //1

就等同于

 var f = function(a){
         return a;
    }
    console.log(f(1)); //1

從上面可以看出，在箭頭左側(cè)的是代表參數(shù)，若參數(shù)只有一個(gè)，()可以省略，箭頭右側(cè)的表示函數(shù)代碼塊，若代碼塊里面是個(gè)返回值，則{}可以省略不寫

若箭頭函數(shù)不需要參數(shù)，則左側(cè)用()代替，如下：

  var f = () => {
      console.log("無(wú)參數(shù)情況");
   }
    f();//無(wú)參數(shù)情況

  var f = (a, b) => {
        return a+b;
   }
    console.log(f(1,2)); //3

 var f = a => a;
 console.log(f(1)); //1

如果箭頭函數(shù)有參數(shù)，則需要用()括起來(lái)，若只有一個(gè)參數(shù)，括號(hào)可以省略不寫

在這里要注意一個(gè)情況，就是當(dāng)箭頭函數(shù)直接返回一個(gè)對(duì)象的時(shí)候，如下：

    var f = () => {name:"liming", age:22}; //報(bào)錯(cuò)
    console.log(f());

這樣寫肯定是報(bào)錯(cuò)的，因?yàn)閧}執(zhí)行時(shí)變成代碼塊，會(huì)去運(yùn)行代碼，所以要用一個(gè)()括起來(lái)才可以，如下:

var f = () => ({name:"liming", age:22}); 
console.log(f());

執(zhí)行結(jié)果為：

{name: "liming", age: 22}

以上這個(gè)寫法才是正確的

 var a = "全局變量a";
    var obj={
        a:"局部變量a",
        fn1:function(){
            console.log(this.a);
        },
        fn2:()=>{
            console.log(this.a);
        }
    }
    obj.fn1();
    obj.fn2();

輸出結(jié)果為：

局部變量a
全局變量a

普通函數(shù)的this我們知道是指向最近的一個(gè)對(duì)象，而箭頭函數(shù)的this實(shí)際上是指向定義時(shí)的this，比如把上面代碼改為：

 var obj={
        a:"局部變量a",
        fn1:function(){
            console.log(this.a);
        },
        fn2:()=>{
            console.log(this.a);
        }
    }
    obj.fn1();
    obj.fn2();

輸出結(jié)果為：

局部變量a
undefined

此時(shí)因?yàn)榧^函數(shù)是指向全局的，全局沒(méi)有變量a則輸出undefined,這里的fn1和fn2都是全局函數(shù)，所以箭頭函數(shù)this指向的是定義時(shí)的全局，而普通函數(shù)的this指向的是最近的一個(gè)對(duì)象

上面如果那個(gè)例子不太明白，可以再看下如下例子：

    this.a = "全局a";
    function Timer() {
         this.a = "timer中的a";
        // 普通函數(shù)
        setTimeout(function () {
            console.log("普通函數(shù):", this.a);
        });

        // 箭頭函數(shù)
        setTimeout(() => {
            console.log("箭頭函數(shù):",this.a);
    });
    }
   new Timer();

輸出結(jié)果為：

普通函數(shù): 全局a
箭頭函數(shù): timer中的a

這里普通函數(shù)會(huì)指向全局是因?yàn)?，距離普通函數(shù)最近的對(duì)象是setTimeOut,而setTimeOut是掛在全局作用域中，所以普通函數(shù)指向全局，箭頭函數(shù)指向的是定義時(shí)的對(duì)象，箭頭函數(shù)是在Timer中定義的，所以箭頭函數(shù)指向Timer

如果把以上代碼改為如下：

 this.a = "全局a";
    function Timer() {
         this.a = "timer中的a";
        // 普通函數(shù)
        setTimeout(function () {
            console.log("普通函數(shù):", this.a);
        });

        // 箭頭函數(shù)
        setTimeout(() => {
            console.log("箭頭函數(shù):",this.a);
    });
    }
   Timer();

輸出結(jié)果：

普通函數(shù): timer中的a
箭頭函數(shù): timer中的a

這個(gè)是為什么呢，因?yàn)槿绻莕ew Timer相當(dāng)于是構(gòu)造函數(shù)，構(gòu)造了一個(gè)對(duì)象，如果是Timer()就相當(dāng)于是調(diào)用函數(shù)Timer()這兩者還是有區(qū)別的，如果是調(diào)用函數(shù)Timer()，這個(gè)時(shí)候this的指向都是全局，在局部修改this.a會(huì)覆蓋全局的this.a

通過(guò)以上，我們可以知道普通函數(shù)跟箭頭函數(shù)this指向的區(qū)別是：

普通函數(shù)： this指向最靠近的一個(gè)對(duì)象

箭頭函數(shù)： this指向定義時(shí)的對(duì)象，也就是說(shuō)箭頭函數(shù)一旦定義完成，它的指向是固定的，沒(méi)法改變，它的指向是定義時(shí)所在的作用域，而不是執(zhí)行時(shí)的作用域

箭頭函數(shù)不可以當(dāng)做構(gòu)造函數(shù)，也就是不可以new一個(gè)，否則會(huì)報(bào)錯(cuò)，如下：

    var fn = ()=>{
        console.log("123");
    }
    new fn(); //Uncaught TypeError: fn is not a constructor

以上會(huì)報(bào)錯(cuò)，因?yàn)榧^函數(shù)本身沒(méi)有屬于自己的this，所以箭頭函數(shù)不可以當(dāng)做構(gòu)造函數(shù)，也因?yàn)榧^函數(shù)沒(méi)有自己的this，所以call()、apply()、bind()這些方法去改變this的指向?qū)^函數(shù)也是無(wú)效的，如下：

  this.x = "outer";
    (function() {
        console.log([
            (() => this.x).bind({ x: "inner" })()
        ]);
    })();

輸出結(jié)果為：

["outer"]

把箭頭函數(shù)通過(guò)bind綁定可見無(wú)效，箭頭函數(shù)還是指向全局

以上是個(gè)人總結(jié)，有什么不足之處歡迎留言探討！