簡單理解js的this


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

  this其實是js的一個對象,至於是什么對象呢?很簡單,this這個對象就是:誰調用它它就指向誰。

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

  希望大家根據我的代碼重復實現下面的實驗。

  首先,我們來看下面的代碼:

//創建一個局部對象a
var a = {
    user:'小東',
    getName:function(){
        return this.user;//返回當前對象的user屬性值
    }
}
//調用a的getName方法
alert(a.getName());

  上面的代碼會輸出什么呢?沒錯,這里alert的是····小東····,很簡單,這里是在a對象的內部調用this嘛,肯定是a對象調用this,所以根據···········誰調用this它就指向誰這個定義···········,那么這里的this指向的就是a對象。

  接下來,我們再給上面的代碼添加一行:

//創建一個局部對象a
var a = {
    user:'小東',
    getName:function(){
        return this.user;//返回當前對象的user屬性值
    }
}
//調用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 = {
    user:'小東',
    getName:function(){
    return 1;//這里我們不返回this,而是返回1
}
}
//調用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(){return this.user;}里面的this.user我們應該寫出window.user對吧?但是,此刻,全局變量中有沒有一個window.user的屬性值呢?沒有吧?既然沒有window.user這個屬性值,那么我們alert(window.user)肯定是undefined啦。為了證明這一點,我們來做下面的實驗:

//創建一個局部對象a
var a = {
    user:'小東',
    getName:function(){
        return this.user;//返回當前對象的user屬性值
    }
}
//調用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 = {
    user:'小東',
    getName:function(){
        return this.user;//返回當前對象的user屬性值
    }
}
//調用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的定義就是:誰調用它它就指向誰。

  

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM