箭頭函式與普通函式的區別
阿新 • • 發佈：2018-12-31
普通函式中的this:
1. this總是代表它的直接呼叫者, 例如 obj.func ,那麼func中的this就是obj2.在預設情況(非嚴格模式下,未使用 'use strict'),沒找到直接呼叫者,則this指的是 window
3.在嚴格模式下,沒有直接呼叫者的函式中的this是 undefined
4.使用call,apply,bind(ES5新增)繫結的,this指的是 繫結的物件
箭頭函式中的this:
預設指向在定義它時,它所處的物件,而不是執行時的物件, 定義它的時候,可能環境是window（即繼承父級的this）;
示例1
1 2 3 4 5 6 7 8 9 10 | <script>var obj = {say: function () {setTimeout(function () {console.log(this)});}}obj.say();</script> |
結果是：window
匿名函式,定時器中的函式,由於沒有預設的宿主物件,所以預設this指向window
問題: 如果想要在setTimeout中使用這個物件的引用呢?
用一個 變數提前把正確的 this引用儲存 起來, 我們通常使用that = this, 或者 _this = this來儲存我們需要的this指標!
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script>var obj = {func: function() {},say: function () {var that = this; //此時的this就是obj物件setTimeout(function () {console.log(this)that.func()});}}obj.say();</script> |
示例2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | window.val = 1;var obj = {val: 2,dbl: function () {this.val *= 2;val *= 2;console.log(val);console.log(this.val);}};// 說出下面的輸出結果obj.dbl();var func = obj.dbl;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.在嚴格模式下的this
1 2 3 4 5 6 7 | <script>function test() {'use strict';console.log(this);}test();</script> |
結果是：undefined
示例4.箭頭函式中的this
1 2 3 4 5 6 7 8 9 10 |