ES6中新增了箭頭函數這種語法,箭頭函數以其簡潔性和方便獲取this的特性,俘獲了大批粉絲兒
它也可能是面試中的寵兒, 我們關鍵要搞清楚 箭頭函數和普通函數中的this
一針見血式總結:
普通函數中的this:
1. this總是代表它的直接調用者, 例如 obj.func ,那麼func中的this就是obj
2.在默認情況(非嚴格模式下,未使用 'use strict'),沒找到直接調用者,則this指的是 window
3.在嚴格模式下,沒有直接調用者的函數中的this是 undefined
4.使用call,apply,bind(ES5新增)綁定的,this指的是 綁定的對象
箭頭函數中的this
默認指向在定義它時,它所處的對象(宿主對象),而不是執行時的對象, 定義它的時候,可能環境是window
下面通過一些例子來研究一下 this的一些使用場景[ 使用最新版 chrome測試 ]
要整明白這些, 我們需要首先了解一下作用域鏈:
當在函數中使用一個變量的時候,首先在本函數內部查找該變量,如果找不到則找其父級函數,
最後直到window,全局變量默認掛載在window對象下
1.全局變量默認掛載在window對象下
<script>var aa = 2;alert(window.aa);//2(function () {aa = 3;})();alert(window.aa);//3</script>
我們僅僅聲明瞭一個全局變量aa,但是打印出window.aa卻和aa保持一致,爲什麼呢?
眼見爲實, 我們使用 console.dir(window) 打印 window對象看看
我們可以看到在window屬性中,看到aa屬性了;此外,函數也適用於此情況,全局函數也會掛在在window對象下
我們常見的window的屬性和方法有: alert, location,document,parseInt,setTimeout,setInterval等,window的屬性默認可以省略window前綴!
2.在普通函數中,this指向它的直接調用者;如果找不到直接調用者,則是window
我們來看一些例子
示例1:
<script>function test() {console.log(this);}test();</script>
結果是: window
原因: test()是一個全局函數,也就是說是掛在window對象下的,所以 test()等價於 window.test() ,所以此時的this是window
示例2:
<script>var obj = {say: function () {setTimeout(function () {console.log(this)});}}obj.say();</script>
結果是: window
匿名函數,定時器中的函數,由於沒有默認的宿主對象,所以默認this指向window
問題: 如果想要在setTimeout/setInterval中使用這個對象的this引用呢?
用一個 變量提前把正確的 this引用保存 起來, 我們通常使用that = this, 或者 _this = this來保存我們需要的this指針!
<script>var obj = {func: function() {},say: function () {var that = this; //此時的this就是obj對象setTimeout(function () {console.log(this)that.func()});}}obj.say();</script>
我們也可以使用 func.bind(this) 給回調函數直接綁定宿主對象, bind綁定宿主對象後依然返回這個函數, 這是更優雅的做法
- <span style="font-family:Times New Roman;"><script>
- var obj = {
- func: function() {},
- say: function () {
- // 此時的this就是obj對象
- setTimeout(function () {
- console.log(this)
- this.func()
- }.bind(this));
- }
- }
- obj.say(); // obj
- </script></span>
示例3(改變自360面試題):
window.val = 1;var obj = {val: 2,dbl: function () {this.val *= 2;val *= 2;console.log(val);console.log(this.val);}};// 說出下面的輸出結果obj.dbl(); //2 4var func = obj.dbl;func(); //8 8
結果是: 2 4 8 8
<1> 12行代碼調用
val變量在沒有指定對象前綴,默認從函數中找,找不到則從window中找全局變量
即 val *=2 就是 window.val *= 2
this.val默認指的是 obj.val ;因爲 dbl()第一次被obj直接調用
<2>14行代碼調用
func() 沒有任何前綴,類似於全局函數,即 window.func調用,所以
第二次調用的時候, this指的是window, val指的是window.val
第二次的結果受第一次的影響
3.在嚴格模式下的this
<script>function test() {'use strict';console.log(this);}test();</script>
結果是: undefined
4.箭頭函數中的 this
<script>var obj = {say: function () {setTimeout(() => {console.log(this)});}}obj.say(); // obj</script>
此時的 this指的是定義它的對象, obj,而不是 window!
示例(多層嵌套的箭頭函數):
<script>var obj = {say: function () {var f1 = () => {console.log(this); // objsetTimeout(() => {console.log(this); // obj})}f1();}}obj.say()</script>
因爲f1定義時所處的函數 中的 this是指的 obj, 所以不管有多層嵌套,都是 obj
示例(複雜情況: 普通函數和箭頭函數混雜嵌套)
<script>var obj = {say: function () {var f1 = function () {console.log(this); // window, f1調用時,沒有宿主對象,默認是windowsetTimeout(() => {console.log(this); // window})};f1();}}obj.say()</script>
示例(嚴格模式下的混雜嵌套)
<script>var obj = {say: function () {'use strict';var f1 = function () {console.log(this); // undefinedsetTimeout(() => {console.log(this); // undefined})};f1();}}obj.say()</script>
結果都是undefined
說明: 嚴格模式下,沒有宿主調用的函數中的this是undefined!!!所以箭頭函數中的也是undefined!
總結:
使用箭頭函數,可以讓我們解決一些在匿名函數中 this指向不正確的問題;但是要注意在和普通函數混合的時候,this的指向可能是window !
Y(^o^)Y, 掌握這麼多已經足夠面試絕大部分關於this的內容了,我們在開發中的應用也沒問題了!