解析js中的this物件

2021-09-14 03:16:28 字數 3602 閱讀 6770

進入正題,this物件在js中是很常見,但是在這裡也經常會出錯,本文將對常見的this物件的情況做一些總結

this物件是在函式執行時,基於函式的執行環境繫結的。
其實這句話的本質就是,誰呼叫了函式,this就指向誰

具體的來說,通常有以下幾種情況:

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

//例子1

function a()

a();//window

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

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

//例子2

var b =

}b.getthis()//b

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

//例子3

var c =

}} var cfun = c.getfunc()

cfun()//window

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

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

//例子4

var c =

}} var cfun = c.getfunc()

cfun()//c

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

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

fun.call(thisarg, arg1, arg2, ...)
這個方法怎麼用呢,看下面的例子:

//例子5

var d =

}var e =

d.getthis.call(e)//e

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

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

thisarg指定為nullundefined時,this指向window

//例子6

var d =

} d.getthis.call(null)//window

d.getthis.call(undefined)//window

d.getthis.call(1) //number

d.getthis.call("hello") //string

d.getthis.call(true) //boolean

番外:基本包裝型別

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

//基本包裝型別

var str = "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

var str2 = string(222)//如果使用型別轉換函式得到的還是型別

ypeof(str2)//string

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

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

函式體內的this物件,就是定義時所在的物件,而不是使用時所在的物件。
其實出現這種情況的根本原因是:箭頭函式沒有this物件,所以箭頭函式的this就是外層**的this

//例子7

var f =

} f.getthis()//window

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

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

//例子8

var g =

}} var h =

} g.getthis()()//window

h.getthis()()//h

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

小結一下,

解析 js 中的 this 物件

前言 正文this物件是在函式執行時,基於函式的執行環境繫結的。其實這句話的本質就是,誰呼叫了函式,this就指向誰 具體的來說,通常有以下幾種情況 在全域性環境中,this指向window 例子1 functiona a window上面的例子很簡單,函式a在全域性環境中執行,也就是全域性物件wi...

JS中的arguments物件解析

在函式體內。識別符號arguments是指向實參物件的引用,實參物件是乙個類陣列物件 arguments 0 arguments.lengtharguments是什麼?答 1 arguments是收到的實參副本 在詞法分析中,首先按形參形成ao的屬性,值為undefined 當實參傳來時,再改動ao...

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

concat 方法 合併兩個陣列,返回新物件的結果 join 方法 把陣列內的所有元素加入到乙個字串中,傳入的分隔符就是指定的分隔符 pop 方法 刪除陣列並返回陣列的最後乙個元素。push 方法 向陣列的未尾加入新的元素,並返回新的長度。reverse 方法 把陣列中的新有元素進行倒序。sort ...