從settTimeout到匿名函式、箭頭函式之() =＞ {}

1、使用到了setTimeout函式，困惑：為什麼使用() => {}。

setTimeout(() => {  
    if (XXX) 
    	{    this.save();  
        }  
    this.index = null;}, 10);

2、檢視setTimeout()的定義：

declare function setTimeout(handler: TimerHandler, timeout?: number, ...arguments: any[]): number;

第一個引數是TimerHandler，檢視其格式定義

type TimerHandler = string | Function;

發現該引數需要是string或者function。

3、() => {}是js中匿名函式的定義方式

(a,b) => {console.log(a);}

相當於

function(a,b){console.log(a);}

同理

setTimeout(() => {  
    if (XXX) 
    	{    this.save();  
        }  
    this.index = null;}, 10);

可以寫成

setTimeout( 
	function() {  
		if (XXX)
			{    this.save();  }  
		this.index = null;
	}, 10);

但嘗試寫成上面的方式卻報錯了，原因在於:

箭頭函式看上去是匿名函式的一種簡寫，但實際上，箭頭函式和匿名函式有個明顯的區別：箭頭函式內部的this是詞法作用域，由上下文確定。

this的指向：使用function定義的函式，this的指向隨著呼叫環境的變化而變化，而箭頭函式中的this指向是固定不變的，一直指向定義函式的環境。

//使用function定義的函式
function foo(){
    console.log(this);
}
var obj = { aa: foo };
foo(); //Window
obj.aa() //obj { aa: foo }

//使用箭頭函式定義函式
var foo = () => { console.log(this) };
var obj = { aa:foo };
foo(); //Window
obj.aa(); //Window