簡單理解js的this

2022-03-07 02:31:16 字數 2859 閱讀 5809

js的this是什麼?關於這個東西,裡面有太多的解釋了,不過,本人看了一下,感覺對this解釋的有點複雜了,因此,本人在此給this乙個簡單易於理解的定義。

this其實是js的乙個物件,至於是什麼物件呢?很簡單,this這個物件就是:誰呼叫它它就指向誰。

關於這一點,其實,的文章已經說明了很多了,有的文章也說到了點子上,只不過,他們解釋的還是有點模糊,這裡,我給大家做幾個簡單的對照實驗,根據這幾個對照實驗的結果,大家應該很清楚了。

希望大家根據我的**重複實現下面的實驗。

首先,我們來看下面的**:

//

建立乙個區域性物件a

var a =}//

呼叫a的getname方法

alert(a.getname());

上面的**會輸出什麼呢?沒錯,這裡alert的是····小東····,很簡單,這裡是在a物件的內部呼叫this嘛,肯定是a物件呼叫this,所以根據···········誰呼叫this它就指向誰這個定義···········,那麼這裡的this指向的就是a物件。

接下來,我們再給上面的**新增一行:

//

建立乙個區域性物件a

var a =}//

呼叫a的getname方法

alert(a.getname());

//把區域性物件的屬性函式賦值給外面的變數out

var out =a.getname;

//呼叫out函式

alert(out());

根據上面的實驗結果,我們知道直接呼叫a.getname輸出的是小東,對吧?那麼,我們把a.getname這個屬性函式賦值給out變數之後,再來呼叫out會輸出什麼呢?結果是:undefined的。為什麼會是undefined的?請思考一會。要是你明白這裡為什麼輸出的是undefined的原因,那麼,我想你對this的理解已經很清楚了。但是,如果,你對本文感興趣,你還是可以繼續看下去的。

這裡,我先不解釋為什麼在外面引用a物件的getname函式卻得不到a物件裡面的值,我們轉過彎來講,請看下面的**(其實和上面的**是差不多的,呵呵):

//

建立乙個區域性物件a

var a =}//

呼叫a的getname方法

alert(a.getname());

//把區域性物件的屬性函式賦值給外面的變數out

var out =a.getname;

//呼叫out函式

alert(out());

上面的**很簡單吧,這裡,我們不在a物件的getname屬性函式裡面返回a物件的東西,而是返回···1·····,那麼,此刻你再呼叫out函式,你覺得會輸出什麼呢?沒錯,你得到的不再是····undefined····的,而是乙個實實在在的數字····1······。這就奇怪了,是吧?當a.getname函式返回的是a物件裡面的user屬性時,我們用out來引用a.getname函式時,我們得到的是undefined的結果,而當a.getname函式返回的是1時,我們再用out引用a.getname函式卻可以得到a.getname裡面的東西?這是怎麼回事呢?

原因很簡單,當我們呼叫外面的全域性變數out的時候,this它指向的應該out的物件,而不是a物件,而out的物件是誰呢?我們應該知道,js在全域性中宣告的變數的物件是window物件吧。既然呼叫out時,this指向的是window,那麼函式out=a.getname=function()裡面的this.user我們應該寫出window.user對吧?但是,此刻,全域性變數中有沒有乙個window.user的屬性值呢?沒有吧?既然沒有window.user這個屬性值,那麼我們alert(window.user)肯定是undefined啦。為了證明這一點,我們來做下面的實驗:

//

建立乙個區域性物件a

var a =}//

呼叫a的getname方法

alert(a.getname());

//把區域性物件的屬性函式賦值給外面的變數out

var out =a.getname;

//我們增加乙個window.user的全域性屬性,看看再次呼叫out函式會輸出什麼

var window.user='window"s username';

//呼叫out函式

alert(out());

此刻,當你再執行上面的**時,你會發現,out函式輸出的不再是undefined,而是window's username,這證明了什麼?證明了當out呼叫this時,this確實指向了window,同時也證明了,this確實是:誰呼叫它它就指向誰。

如果你不理解js的全域性變數,那麼,我們可以把上面的**換成下面的**再來呼叫out,你就更加明白了:

//

建立乙個區域性物件a

var a =}//

呼叫a的getname方法

alert(a.getname());

//把區域性物件的屬性函式賦值給外面的變數out

var out =a.getname;

//此刻,我們增加乙個user的變數,看看再次呼叫out函式會輸出什麼

var user='window"s username';

//呼叫out函式

alert(out());

這裡,我們不再啟用window這個物件,對於外面的屬性和函式,我們一律都用var 來宣告,既然都用var來宣告,那麼他們應該都指向同乙個物件吧?此刻,你再執行上面的**,也就是執行out函式,依然可以alert出window's username。行文到此,this的定義已經再明白不過了,它就是:誰呼叫它它就指向誰。

this不難理解,難以理解的是,你要找到那個呼叫它的········物件·····,只有找到呼叫this的物件,你才知道this到底指向誰,因為:this的定義就是:誰呼叫它它就指向誰。

簡單理解js的prototype屬性

prototype屬性是您有能力向物件新增屬性和方法 先介紹乙個下面要用到的函式,json.stringify value 這個函式的作用是 把傳入的引數value 物件或者陣列 變成字串,它有三個引數,第乙個引數是必須的,其餘的兩個引數可填可不填。var ob 超級簡單的空物件 alert jso...

js中defer簡單理解

defer只是載入完成頁面元素後在執行js指令碼。其實就是簡單的利用defer屬性,讓瀏覽器讀js指令碼的時候完全不等指令碼開始讀就開始讀下面的啊,html 了。然後讓js指令碼自己在那裡慢慢讀取完以後再執行。給外鏈的js指令碼新增defer true 像下面這個這樣就可以了 特別是比較大的指令碼,...

js中defer簡單理解

defer只是載入完成頁面元素後在執行js指令碼。其實就是簡單的利用defer屬性,讓瀏覽器讀js指令碼的時候完全不等指令碼開始讀就開始讀下面的啊,html 了。然後讓js指令碼自己在那裡慢慢讀取完以後再執行。給外鏈的js指令碼新增defer true 像下面這個這樣就可以了 特別是比較大的指令碼,...