今天寫代碼的時候遇到了一個很有趣的問題，先看看下面這幾行代碼（“//”后的是輸出結(jié)果）

var obj = {
        id: "awesome"，
        cool: function coolFn(){
                console.log( this.id );
        }
};

var id = "not awesome";
obj.cool();  //awesome
setTimeout(obj.cool, 1000);  //not awesome

是不是超級不可思議？按照我們思維，兩行都應(yīng)該輸出awesome才對??！可是為什么第二個調(diào)用輸出的確實(shí)全局變量id的值呢？

這是因?yàn)槲覀冊谑褂?code>setTimeout函數(shù)的時候，所調(diào)用的函數(shù)cool失去了同它自己的this之間的綁定，它使用的是setTimeout()函數(shù)上下文中的this（這里的this指的就是window，當(dāng)前窗口）。
先看看我們常用的解決方法：

var obj = {
    id: "awesome",
    cool: function(){
        console.log(this.id);
    }
};
var id = "not awesome";
setTimeout(obj.cool.apply(obj), 1000); // awesome
setTimeout(obj.cool.call(obj), 1000);  // awesome

就是添加apply或者call函數(shù)綁定對象，但是這樣的方法我們常常會忘記，下面介紹 胖箭頭 的方法：

var obj2 = {
    id: "awesome",
    cool: function coolFn(){
        setTimeout(()=>{
            console.log(this.id);
        }, 100);
    }
};
var id = "not awesome";
obj2.cool(); //awesome

在這個例子中胖箭頭的作用還不是很明顯，看下面這個例子就非常明顯了：

使用胖箭頭之前

function Counter() {
  this.num = 0;
  this.timer = setInterval(function add() {
    this.num++;
    console.log(this.num);
  }, 1000);
}

我們看一下輸出結(jié)果：

var b = new Counter();
// NaN
// NaN
// NaN
// ...

結(jié)果并非我們想要的計(jì)數(shù)器效果，讓我們看看使用胖箭頭會怎樣呢？

使用胖箭頭之后

function Counter() {
  this.num = 0;
  this.timer = setInterval(() => {
    this.num++;
    console.log(this.num);
  }, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...

哇！超棒是不是！
那胖箭頭到底怎么使用呢？又是為什么會有這樣的特點(diǎn)呢？

胖箭頭基礎(chǔ)語法

• 這個函數(shù)有多個參數(shù)，并且函數(shù)里面的表達(dá)式不止一條：
  (param1, param2, …, paramN) => { statements }

• 當(dāng)函數(shù)只有單句表達(dá)式時，可以省略{}
  (param1, param2, …, paramN) => expression
  此時會有一個隱含的返回值，等同于: (param1, param2, …, paramN) => { return expression; }

• 當(dāng)函數(shù)參數(shù)只有一個時，有下面兩種寫法
  (singleParam) => { statements }
  singleParam => { statements }

• 若這個函數(shù)沒有參數(shù)時
  () => { statements }

胖箭頭高級語法

• 若要返回一個對象，就要注意，如果是單表達(dá)式，像下面這樣寫就會報(bào)錯

// SyntaxError
x => { foo: x }

因?yàn)檫@樣和函數(shù)體的{...}有語法沖突，所以要改為：

x => ({ foo: x })

• 若函數(shù)參數(shù)是可變的或者默認(rèn)的，依舊是支持的！
  (param1, param2, ...rest) => { statements }
  (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
  例如：

// 可變參數(shù):
(x, y, ...rest) => {
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
        sum += rest[i];
    }
    return sum;
}

• 函數(shù)參數(shù)列表中的結(jié)構(gòu)（Destructuring）也是支持的！

let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  
// 6

引入胖箭頭有兩個方面的作用：讓我們的函數(shù)變得超級簡短看上去更專業(yè)，而且從一開始的例子看出胖箭頭是不綁定this的！

更短的函數(shù)

var materials = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

materials.map(function(material) { 
  return material.length; 
}); // [8, 6, 7, 9]

materials.map((material) => {
  return material.length;
}); // [8, 6, 7, 9]

materials.map(material => material.length); // [8, 6, 7, 9]

不綁定arguments

下面的例子得在非嚴(yán)格模式下運(yùn)行，才看得到結(jié)果哦！

var arguments = 42;
var arr = () => arguments;

console.log(arr()); // 42

function foo() {
  var f = (i) => arguments[0]+i; 
  // foo函數(shù)的間接參數(shù)綁定
  return f(2);
}

console.log(foo(1)); // 3

這里foo()函數(shù)中的arguments[0]指的是foo()函數(shù)傳進(jìn)來的參數(shù)（這里使用的是我們上面提到的“胖箭頭高級語法”中參數(shù)不定的語法）。
但是我們一般這樣用剩余參數(shù)來使用arguments對象：

function foo() { 
  var f = (...args) => args[0]; 
  return f(2); 
}

foo(1); 
// 2

不綁定this

在胖箭頭出現(xiàn)之前，每個新定義的函數(shù)都有它自己的this值（在構(gòu)造函數(shù)的情況下是一個新對象，在嚴(yán)格模式的函數(shù)調(diào)用中為 undefined，如果該函數(shù)被稱為“對象方法”則為基礎(chǔ)對象），而this實(shí)在是一個討厭的東西，常常讓我頭疼不已^*
讓我們想想開頭提到的例子，由于JavaScript函數(shù)對this綁定的錯誤處理，下面的例子無法得到預(yù)期結(jié)果：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; 
          // this指向window或undefined
        };
        return fn();
    }
};
console.log(obj.getAge());

現(xiàn)在用胖箭頭修改這個例子：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; 
      // this指向obj對象
        return fn();
    }
};
console.log(obj.getAge()); // 27(2017 - 1990 = 27)

胖箭頭完全修復(fù)了this的執(zhí)行，this總是指向詞法作用域，也就是外層調(diào)用者obj。
掃一掃關(guān)注ComputerStudyBar哦
[圖片上傳失敗...(image-a4954a-1512058168001)]