謎之走向 this指向

2021-10-07 22:08:03 字數 3615 閱讀 6931

(一):this指向常見誤區

(二):this到底是什麼

(三):this指向四條繫結規則

①:預設繫結

②:隱式繫結

③:顯示繫結

④:new繫結

(四):this指向的優先順序及其判斷

(五):特殊例子

因為this本身英文的含義,很多初學者會把this理解為指向函式自身

比如下面例子

你會發現結果並不是你想的那樣,指向foo函式自身屬性count=1,而是指向全域性中的count=2

例子

var count="2";

function foo()

function bar()

foo();

如果你根據詞法作用域來分析,你應該得到1這個結果,但是結果為2。可見this並不是認為的那樣,指向詞法作用域。

this是在執行時繫結的,並不是編寫時繫結的,它的上下文取決於函式呼叫時的各種條件。this的繫結和函式宣告的位置沒有任何關係,只取決於函式的呼叫方式(呼叫位置)

比如如果乙個函式被呼叫時,那麼它會建立乙個活動記錄(執行上下文),這個記錄會包含函式在**被呼叫(呼叫棧)、函式的呼叫方法、傳入的引數等資訊。this就是記錄中的乙個屬性,會在函式執行的過程中用到

在說四條規則之前,先來了解一下什麼是呼叫位置(函式呼叫位置)、呼叫棧、函式宣告。

例子

function parent()

上面了解完之後,接著四條繫結規則

可以看出缺省繫結是最為基礎的繫結,就是在沒有辦法應用其他規則繫結的時候選取預設的規則。

以(this指向常見誤區——指向自己本身)為例

var count=2;

function foo()

foo();//2

你會發現結果為2。這是因為呼叫函式時,this使用的是預設繫結從而指向了全域性物件,然後全域性物件中有count這個屬性,最後的結果為2。

如何判斷應用的是預設繫結吶?觀察呼叫位置函式foo(),你會發現前面沒有任何修飾符(比如new),以為沒有任何的限定,所以選擇的預設的繫結。

注:如果使用嚴格模式,那麼this會繫結到undefined

例子

function son()

上面為隱式繫結,通過前面學習的知識,可以分析知道obj是呼叫棧,當son呼叫時,this指向obj。可以知道結果是2.但是需要一種隱式繫結丟失的情況。例子如下

var a=5;

function son()

var obj=

let bar=obj.son;//這樣賦值會導致隱式繫結丟失。

bar();

為什麼會丟失吶?看了下面的圖會一目了然

上圖可以看出,當使用隱式繫結,而且呼叫位置在obj內,呼叫棧為obj,可知this指向obj。而如果賦值給bar那麼指標直接指向了son,並不通過obj。並且son的呼叫位置在全域性物件內,所以this指向全域性物件,最後結果為5。

對於隱式繫結丟失的情況可是通過顯示繫結來實現從新繫結

例如

var a=5;

function son()

var obj=

let bar=obj.son;//這樣賦值會導致隱式繫結丟失。

js中,new的機制和物件導向語言完全不一樣。在js中建構函式只是一些使用new操作符時被呼叫的函式。它們既不屬於某個類,也不會例項化類。它們只是被new操作符呼叫的普通函式而已。

使用new來呼叫函式,會執行一下操作

1.建立乙個全新物件

2.這個新物件會被執行原型連線

3.這個新物件會繫結到函式呼叫的this

4.如果函式沒有返回其他物件,那麼new表示式中的函式呼叫會自動返回這個新物件

例子

function foo(a)

根據規則可以發現,new建立了乙個全新的物件,並且新物件被執行了原型連線(__proto__),這個新物件繫結到了bar呼叫的this,所以最後結果a為2,tip因為沒有通過this繫結所以為undefined

顯示繫結》new繫結》隱式繫結》預設繫結

如果你把null或者undefined作為this的繫結物件進行顯示繫結的話,那麼null/undefined會被忽略掉,並應用預設繫結

例子

var value=1;

箭頭函式是es6語法內容,它不使用this的四種標準規則,而是根據外層函式或全域性作用域來決定this的

例子

ript>

參考文獻:

你不知道的js(上);

謎之自信(西點軍規)

作為當代大學生的我們,不知道哪找的自信,深信自己不用努力,不幹活,不學習,大學就是來享受的,過好自己想要的每一天,早上12點起床,晚上一兩點睡覺,起來呼朋喚友打打遊戲,快快快,下路 開學第一周每天都在說,我要好好學習了,看看人家那誰誰誰,四級過了,六級過了,八級不敢想象。結果呢,日復一日的墮落,其實...

提醒 曾經犯的謎之錯誤

1.n,m輸入反了。2.lct的access和cut操作後忘記pushup。3.splay的del操作後忘記pushup。4.過程名太像呼叫錯了過程自己還以為是對的qaq 5.寫了過程沒呼叫。6.注意二分答案到最後的答案到底是什麼 7.滾動陣列時,for i 1 i n i now i 1 now處...

js謎之正規表示式

好久之前就說要寫一篇正規表示式的文章,正規表示式總是記了又忘,忘了再記,記了再忘,卒。言歸正傳,今天終於要研究一下這個謎一樣的正規表示式了。其實正規表示式並不難 真的嗎?orz 本文 本人部落格 在學習之前,我們需要弄明白,到底什麼時候需要用到正規表示式,正規表示式的用途究竟是什麼?比如說,你正在搜...