## 普通函數在不同的執行環境下，this指向 this是什么，是和執行上下文綁定的，也就是說每個執行上下文中都有一個 this。 ### 1、在全局中，指向window ``` js // 普通函數 function fn(){ console.log(this) } fn() // Window?{postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window,?…} ``` ``` js // 箭頭函數 var fn = ()=>{ console.log(this) } fn() // Window?{postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window,?…} ``` 在全局中，指向就沒有什么可說的，都是window對象 ### 2、普通對象下的函數，不同的執行環境 #### 2.1當普通函數被普通對象的屬性（方法）調用 ``` js // 普通函數 var obj = { a: 123, fn: function(){ console.log(this) } } var obj2 = obj.fn obj2() // Window?{postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window,?…} obj.fn() // {a: 123, fn: ?} ``` ``` js // 箭頭函數 var obj = { a: 123, fn: () => { console.log(this) } } var obj2 = obj.fn obj2() // Window?{postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window,?…} obj.fn() // Window?{postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window,?…} ``` 當普通函數被普通對象的屬性（方法）調用，則this執行這個普通對象obj； 當箭頭函數被普通對象的屬性（方法）調用，則this指向window對象。 #### 2.2 注意高階函數，先后執行的環境有所變化時，this執行跟隨變化 注：可通過abc進行改變指向（apply、bind、call） ``` var a = 'window' var obj = { a: 123, fn:function(){ console.log('fn的this:',this,this.a) return function(){ console.log('匿名：',this,this.a) } }, cn:function (){ return ()=>{ console.log('匿名箭頭：',this,this.a) } } } var obj_fn = obj.fn var obj_cn = obj.cn obj_fn()() // 結果如下圖 obj_cn()() obj.fn()() obj.cn()() ```  #### 2.3定義_that指向fn的this ``` // 普通函數 var a = 'window' var obj = { a: 123, fn:function(){ var _that = this console.log('fn的this:',this,',this.a：',this.a) return function(){ console.log('匿名：',',this: ',this,',_that: ',_that) } } } var obj2 = obj.fn obj2()() obj.fn()() ```  ``` js // 箭頭函數 var a = 'window' var obj = { a: 123, fn:function(){ var _that = this console.log('fn的this:',this,',this.a：',this.a) return ()=>{ console.log('匿名：',',this: ',this,',_that: ',_that) } } } var obj2 = obj.fn obj2()() obj.fn()() // _that在這里最容易犯錯了 ```  #### 2.4全局變量累計 ```js var a = 1; window.b = 2 var obj = { a: 2, b: 4, ab:function(){ // 此處換成箭頭函數，會怎么樣呢？ this.a+=5; a+=8 this.b+=5 b+=8 console.log(a,b,this.a,this.b,'a-----b') } } obj.ab(); // 9 10 7 9 "a-----b" console.log('ab:',a,b,this.a,this.b) // ab: 9 10 9 10 var fn = obj.ab; fn() // 22 23 22 23 "a-----b" console.log('ab-fn:',a,b,this.a,this.b) // ab-fn: 22 23 22 23 ``` 分析： 1、`obj.ab(); `時，a和this.a區別就是一個全局window.a(既var a)，一個普通對象obj.a(this.a)； 2、`console.log('ab:',a,b,this.a,this.b) `時，可通過window===this、window.a=a理解，故都是a===this.a理解，記住此時a=9、b=10; 3、`var fn = obj.ab;fn() `時，*fn執行環境時window*，那此時this.a等于什么呢？又等于什么呢？可以這樣理解window.a=this.a=a，故a=9+5+8，b=10+5+8 ab函數換成箭頭函數，則函數內：`var a = window.a=this.a`了。 #### 2.5內層函數不會繼承上層函數this ``` var obj = { ab:function(){ console.log('ab:',this) function fn(){ console.log('fn:',this) } fn() } } obj.ab() // 結果圖下 fn 不會繼承ab()的this var out = obj.ab out() ```  ### 總結： 普通函數this指向，取決于調用時的環境在哪里； 箭頭函數this指向，取決于父級上下文環境在哪里； 注：箭頭函數并不會創建其自身的執行上下文，所以箭頭函數中的 this 取決于它的外部函數。