解析 js 中的 this 物件

前言

正文

this物件是在函式執行時，基於函式的執行環境繫結的。

其實這句話的本質就是，誰呼叫了函式，this就指向誰

具體的來說，通常有以下幾種情況：

在全域性環境中，this指向window


//例子1
functiona()
a();
//window

上面的例子很簡單，函式a在全域性環境中執行，也就是全域性物件window呼叫了函式。此時this指向window

作為物件方法呼叫時，this指向呼叫該方法的物件

//例子2
varb =}
b.getthis
()//b

到這裡我們舉的例子都比較簡單易懂，接下來來乙個有意思的：

//例子3
varc =}
}var
cfun =c
.getfunc
()cfun
()//window

這個例子和前乙個例子不一樣，執行c.getfunc()時，首先返回的是乙個匿名函式，我們將這個函式賦值給cfun，接著在全域性環境中呼叫了cfun()，所以此時this指向的還是window。

如果我們一定要讓這裡返回的是c物件呢？在開頭我們說過，this物件是在函式執行時確定的，在例子3中，執行c.getfunc()時，this物件指向的還是c，所以我們只要保持住這個this就好了,對上面的**稍微改動：

//例子4
varc =}
}var
cfun =c
.getfunc
()cfun
()//c

這也就是我們經常可以在一些**中看到var self = this或者var that = this之類的原因了。

此時this物件通常指向函式中指定的this值(注意這裡的通常2字，考試要考的)

fun
.call
(thisarg
,arg1
,arg2
,...)

這個方法怎麼用呢，看下面的例子：

//例子5
vard =}
vare =d
.getthis
.call(e
)//e

在這裡我們就可以看出call函式的意思了:指定乙個物件o1去呼叫其他物件o2的方法，此時this物件指向o1

好了，那為什麼前面我們說通常呢？因為，有2種例外的情況:

thisarg指定為null和undefined時，this指向window。

vard =}

d.getthis

.call

(null

)//windowd.

getthis

.call

(undefined

)//windowd.

getthis

.call(1

)//numberd.

getthis

.call

("hello"

)//stringd.

getthis

.call

(true

)//boolean

番外：基本包裝型別

既然講到包裝型別，那這裡順便補充介紹一下基本包裝型別：基本包裝型別（包括boolean,string,number）是一類特殊的引用型別，它們具有引用型別的基本特徵，還具有對應的基本型別的特殊行為，舉個例子：

//基本包裝型別
varstr 
="hello world"
;var
str2 =s1
.substring(2
);

首先，str是字串，字串是基本資料型別，但是在第二行**中，str.substring(2)呼叫了str的方法，我們知道，基本資料型別不是物件，本來是是不應該有方法的，但是實際上我們知道string，number型別都有對應的方法，因為從記憶體中訪問str時，訪問進入了一種讀取模式，在後台自動做了以下轉換：

建立乙個string型別的例項

在例項上呼叫相應方法

銷毀該例項

特點：自動建立的基本包裝型別的物件只存在於執行**的瞬間，然後立即銷毀。

那麼可以手動建立基本包裝型別嗎？當然可以：

var
str 
=new
string
("hello"
)//注意這裡是new乙個例項，而不是用string型別轉換函式
typeof
(str
)//object
varstr2 
=string
(222
)//如果使用型別轉換函式得到的還是型別
ypeof
(str2
)//string

此時的str就是乙個顯式建立的基本包裝型別物件，只是一般來說很少這樣去使用

es6中的箭頭函式現在也用的比較頻繁，但是有個需要注意的點是：

函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。

其實出現這種情況的根本原因是:箭頭函式沒有this物件，所以箭頭函式的this就是外層**的this

//例子7
varf =}
f.getthis
()//window

這個例子和前面例子2是基本一樣的，只是把普通函式改寫成箭頭函式，但是此時的this物件已經指向了外層的window。

考慮到這一點可能不好理解，我們再看幾個例子:

//例子8
varg =}
}varh =
}g.getthis
()()
//windowh.
getthis
()()
//h

這個例子裡，g的getthis寫法就和之前的例子3一樣，由於函式在全域性環境中執行，所以此時this指向window；h的getthis使用了箭頭函式，所以this指向了外層**塊的this所以，此時this指向的是h。

總結小結一下：

解析 js 中的 this 物件

解析js中的this物件

JS中的arguments物件解析

js中的陣列物件中的方法解析

解析 js 中的 this 物件

解析js中的this物件

JS中的arguments物件解析

js中的陣列物件中的方法解析

相關推薦