深入理解ES6箭頭函數的this以及各類this面試題總結，深入理解es6

深入理解ES6箭頭函數的this以及各類this面試題總結，深入理解es6

ES6中新增了箭頭函數這種文法,箭頭函數以其簡潔性和方便擷取this的特性,俘獲了大批粉絲兒

它也可能是面試中的寵兒, 我們關鍵要搞清楚 箭頭函數和普通函數中的this

一針見血式總結:

普通函數中的this:

1. this總是代表它的直接調用者(js的this是執行內容), 例如 obj.func ,那麼func中的this就是obj

2.在預設情況(非strict 模式下,未使用 'use strict'),沒找到直接調用者,則this指的是 window (約定俗成)

3.在strict 模式下,沒有直接調用者的函數中的this是 undefined

4.使用call,apply,bind(ES5新增)綁定的,this指的是 綁定的對象

箭頭函數中的this

箭頭函數沒有自己的this, 它的this是繼承而來; 預設指向在定義它時所處的對象(宿主對象),而不是執行時的對象, 定義它的時候,可能環境是window; 箭頭函數可以方便地讓我們在 setTimeout ,setInterval中方便的使用this

下面通過一些例子來研究一下 this的一些使用情境[ 使用最新版 chrome測試 ]

要整明白這些, 我們需要首先瞭解一下範圍鏈:

當在函數中使用一個變數的時候,首先在本函數內部尋找該變數,如果找不到則找其父級函數,

最後直到window,全域變數預設掛載在window對象下

1.全域變數預設掛載在window對象下

1. <script>
2.  var aa = 2;
3.  alert(window.aa);
4.  (function () {
5.    aa = 3;
6.  })();
7.  alert(window.aa);
8. </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:

1. <script>
2.  function test() {
3.    console.log(this);
4.  }
5.  test();
6. </script>

結果是: window 

原因: test()是一個全域函數,也就是說是掛在window對象下的,所以test()等價於 window.test() ,所以此時的this是window

樣本2:

1. <script>
2.  var obj = {
3.    say: function () {
4.      setTimeout(function () {
5.        console.log(this)
6.      });
7.    }
8.  }
9.  obj.say();
10. </script>

結果是: window

匿名函數,定時器中的函數,由於沒有預設的宿主對象,所以預設this指向window

問題: 如果想要在setTimeout/setInterval中使用這個對象的this引用呢?

用一個 變數提前把正確的 this引用儲存 起來, 我們通常使用that = this, 或者 _this = this來儲存我們需要的this指標!

1. <script>
2.  var obj = {
3.    func: function() {},
4.    say: function () {
5.      var that = this;   //此時的this就是obj對象
6.      setTimeout(function () {
7.        console.log(this)
8.        that.func()
9.      });
10.    }
11.  }
12.  obj.say();
13. </script>

我們也可以使用 func.bind(this) 給回呼函數直接綁定宿主對象, bind綁定宿主對象後依然返回這個函數, 這是更優雅的做法

<script>  var obj = {    func: function() {},    say: function () {       // 此時的this就是obj對象      setTimeout(function () {        console.log(this)        this.func()      }.bind(this));    }  }  obj.say(); // obj</script>

樣本3(改變自360面試題):

1.  window.val = 1;
2.  var obj = {
3.    val: 2,
4.    dbl: function () {
5.      this.val *= 2;
6.      val *= 2;
7.      console.log(val);
8.      console.log(this.val);
9.    }
10.  };
11.  // 說出下面的輸出結果
12.  obj.dbl();
13.  var func = obj.dbl;
14.  func();

結果是:  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.在strict 模式下的this

1. <script>
2.  function test() {
3.    'use strict';
4.    console.log(this);
5.  }
6.  test();
7. </script>

結果是: undefined

4.箭頭函數中的 this

1. <script>
2.  var obj = {
3.    say: function () {
4.      setTimeout(() => {
5.        console.log(this)
6.      });
7.    }
8.  }
9.  obj.say(); // obj
10. </script>

此時的 this繼承自obj, 指的是定義它的對象obj, 而不是 window!

樣本(多層嵌套的箭頭函數):

1. <script>
2. var obj = {
3. say: function () {
4.   var f1 = () => {
5.     console.log(this); // obj
6.     setTimeout(() => {
7.       console.log(this); // obj
8.     })
9.   }
10.   f1();
11.   }
12. }
13. obj.say()
14. </script>

因為f1定義時所處的函數 中的 this是指的 obj, setTimeout中的箭頭函數this繼承自f1, 所以不管有多層嵌套,都是 obj

樣本(複雜情況: 普通函數和箭頭函數混雜嵌套)

1. <script>
2. var obj = {
3. say: function () {
4.   var f1 = function () {
5.     console.log(this); // window, f1調用時,沒有宿主對象,預設是window
6.     setTimeout(() => {
7.       console.log(this); // window
8.     })
9.   };
10.   f1();
11.   }
12. }
13. obj.say()
14. </script>

結果: 都是 window,因為 箭頭函數在定義的時候它所處的環境相當於是window, 所以在箭頭函數內部的this函數window

樣本(strict 模式下的混雜嵌套)

1. <script>
2. var obj = {
3. say: function () {
4.   'use strict';
5.   var f1 = function () {
6.   console.log(this); // undefined
7.   setTimeout(() => {
8.     console.log(this); // undefined
9.   })
10.   };
11.   f1();
12.  }
13. }
14. obj.say()
15. </script>

結果都是undefined

說明: strict 模式下,沒有宿主調用的函數中的this是undefined!!!所以箭頭函數中的也是undefined!

總結:

使用箭頭函數,可以讓我們解決一些在匿名函數中 this指向不正確的問題; 但是要注意在和普通函數混合的時候,this的指向可能是window !

Y(^o^)Y, 掌握這麼多已經足夠面試絕大部分關於this的內容了,我們在開發中的應用也沒問題了!

如果對大家有所協助, 我會感到很開心!

推薦閱讀: 

我的新版部落格  http://blog.nodejsx.tech

好用的 react腳手架: http://blog.csdn.net/yangbingbinga/article/details/78770813高效編寫react的捷徑: http://blog.csdn.net/yangbingbinga/article/details/78776843vue v-model的原理實現一個自訂的表單組件

vue項目按需載入之 require.ensure: http://blog.csdn.net/yangbingbinga/article/details/61417689

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。