js中箭頭函式和普通函式this的區別

2022-03-06 12:53:17 字數 1416 閱讀 6648

最近在學習angularjs的時候由於裡面涉及到了箭頭函式,箭頭函式除了宣告上有點區別以外,和普通函式最主要的區別還是在this的問題上。

js中函式中巢狀的函式this不會 「繼承」。比如說以下**:

1

var o =

5function

outer()

7 !function

inner()();10}

11 outer.call(o);

上面**我們理想的輸出是應該都是o,但是很遺憾,inner中的this已經是指向全域性的window了。也可以這麼理解,」this「關鍵字通常指當前正在執行的函式所在的物件,然而,如果函式並沒有在物件上被呼叫,比如在內部函式中,」this「就被設定為全域性物件(window)。以前我們想在inner中使用outer中的this,只能在outer中定義乙個變數去儲存this,一般是 var that = this;然後在inner中使用that來代替this。

用function定義的函式的this是呼叫的時候去獲取的,是不固定的。而箭頭函式中的this是箭頭函式定義的時候就定義的,並且在函式銷毀之前的this都不會隨之改變。箭頭函式的this

指的就是函式宣告時候作用域的this。用一下**來說明區別:

1             name = "cm";

2 age = 15;

3var o =

10};

11o.sayname();//輸出cm

12 o.sayage();//輸出13

這裡輸出的13是沒有任何問題的,但是這裡為什麼是輸出cm而不是xwt呢?這個回答可以用上面的原理來解答。因為函式sayage是在宣告物件o的時候宣告的。此時o是在全域性中宣告的

1

function

aa()9};

10o.sayname();//輸出bb

11o.sayage();//輸出1312}

13var bb =

17 aa.call(bb);

如上面的**是通過call改變宣告了o物件時候的作用域中的this,所以sayname繫結的this就是aa函式中的this,也就是bb。所有sayname輸出的就是'bb';

這裡差不多就解釋完了箭頭函式中this和普通function中this的區別了。還有如果這裡有朋友不是在遊覽器上執行,而是用node.js來執行的話,node裡面的全域性指的是global,但是this

不是指向global的,他是指向module.exports(預設也是exports指向的物件)所指向的物件的。所以exports.name = 'xwt'也可以用this.name = 'xwt'來代替。這也是題外話了···

參考:

Js普通函式中this和箭頭函式中this

this的意思是 我的 如我的名字叫張三,我的名字叫李四。每個人都可以用 我的 張三說我的,那麼 我的 就代表張三,李四說我的,那麼 我的 就代表李四 var name 張三 function a a 完整寫法,windows.a this指向的是windows物件,列印的為張三 var name ...

js中箭頭函式

console.log fn 1 undefind var fn function a console.log fn 1 1 function fn2 a console.log fn 2 2 let fn3 v v let fn3 v 0 let fn4 console.log fn3 5 1,2...

箭頭函式中的this和普通函式中的this對比

es6中新增了箭頭函式這種語法,箭頭函式以其簡潔性和方便獲取this的特性。下面來總結一下他們之間的區別 普通函式下的this 箭頭函式中的this 看下面這段 function a a 因為a是乙個全域性函式,也就是掛載在window物件下的,所以a 等價於window.a var obj obj...