箭頭函式與普通函式的區別
阿新 • • 發佈: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
12345678910 | <script> var obj = { say: function () { setTimeout( function () { console.log( this ) }); } } obj.say(); </script> |
結果是:window
匿名函式,定時器中的函式,由於沒有預設的宿主物件,所以預設this指向window
問題: 如果想要在setTimeout中使用這個物件的引用呢?
用一個 變數提前把正確的 this引用儲存 起來, 我們通常使用that = this, 或者 _this = this來儲存我們需要的this指標!
12345678910111213 | <script> var obj = { func: function () {}, say: function () { var that = this ; //此時的this就是obj物件 setTimeout( function () { console.log( this ) that.func() }); } } obj.say(); </script> |
示例2
1234567891011121314 | 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
1234567 | <script> function test() { 'use strict' ; console.log( this ); } test(); </script> |
結果是:undefined
示例4.箭頭函式中的this
12345678910 |