1. 程式人生 > >箭頭函式與普通函式的區別

箭頭函式與普通函式的區別

普通函式中的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);

示例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

1234567891011121314window.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