箭頭函數在對象中的this指向，及適用環境

最近在研究ES6的新特性，箭頭函數。發現了幾個問題，希望跟大家分享一下，也希望能幫助下同樣有此困惑的童鞋們。

正常的箭頭函數是這樣的：

var fn = (a, b) => {
    return a + b
};

fn(1,2)  //3

這樣是沒有問題的。

當然，箭頭函數出現的原因是為了規范化js中的this指向問題，給我們的編程帶來效率。

像以往的var tent = this這種寫法，通過箭頭函數都可以解決。

究其原因，是因為箭頭函數的this指向的是當前的作用域，而非運行時調用函數的對象：

var obj = {
	age:18,
	getAge:function(){
		var b = this.age;
		var fn = () => new Date().getFullYear() - this.age;
		return fn();
	}
}

console.log(obj.getAge());  //1998

通常，在傳統函數中，這里的this.age是指向windows的，但是當我們使用箭頭函數處理時，由於箭頭函數處於obj的作用域中，所以其this指向了obj而非windows。

我們可以驗證一下：

var obj = {
　　age:18,
　　getAge:function(){
　　　　var b = this.age;
　　　　var fn = function(){
       　　new Date().getFullYear() - this.age;
       }
　　　　return fn();
　　}
}

console.log(obj.getAge());  //Uncaught TypeError: Cannot read property 'age' of undefined

 

在傳統函數中，this指向了window。

可是由此出現了一個問題，就是當我們將箭頭函數直接用於對象的方法時，this的指向就發生了變化：

var obj = {
　　age:18,
　　getAge: () => this.age
}

console.log(obj.getAge());  //Uncaught TypeError: Cannot read property 'age' of undefined

這是由於目前為止，箭頭函數還不能夠直接作為對象的方法使用造成的，同理，在類中：

class obj () {
	constructor (name) {
		this.name = name
	}
	sayName = () => this.name
}

console.log(obj.sayName()); //Uncaught TypeError: obj.sayName is not a function

因此，當我們在使用箭頭函數時，需要搞明白我們到底應該用它做什么。建議將一些需要傳參並且不作為對象方法使用的函數寫作箭頭函數會更適合一些。

同時，如果你的對象中有些方法可能需要在上下文轉換時使用到原對象的內容時，一樣可以使用箭頭函數。相信我，它將給你的編程帶來無與倫比的體驗。