1. 程式人生 > >徹底理解JavaScript中this的指向

徹底理解JavaScript中this的指向

在網上,大部分文章都會出現下面這段話:

this的指向在函式定義的時候是確定不了的,只有在函式執行的時候才能確定this到底指向誰,實際上this最終指向的是那個呼叫他的物件

這句話總是讓人有哦一種琢磨不透的感覺。

為什麼要理解this?如果已經學過了面向物件,那麼就應該指導this的重要性!

1.我們來看一個例子:

function fun(){
    var userName = "lzh";
    console.log(this.userName); //undefined
    console.log(this); //Window
}
fun();

按照上面加粗的字型所說的 this最終指向的是那個呼叫他的物件。上述程式碼中的函式fun,實際上是屬於window這個大物件下的一個方法,下shutdown程式碼便可證明:

function fun(){
    var userName = "lzh";
    console.log(this.userName); //undefined
    console.log(this); //Window
}
window.fun();

2.我們來看下面的例子2:

var obj = {
    userName:"lzh",
    fun:function(){
        console.log(this.userName);  //lzh
    }
}
obj.fun();

在這個例子裡,this的指向是物件obj,呼叫的fun是通過obj.fun實現的,那麼this的指向自然就是obj這個物件;

再次強調一下:this的指向在函式建立的時候是決定不了的,在呼叫的時候才能決定,哪個物件呼叫,this就指向誰

3.我們來看第三個例子:

var obj = {
    userName:"lzh",
    fun:function(){
        console.log(this.userName);  //lzh
    }
}
window.obj.fun();

例2和例3兩段程式碼,只有在呼叫時候的寫法不一樣;

但是,例3 裡面的this為什麼不指向window?

我們首先要知道window是js中的全域性物件,我們建立的變數市級上就是給window這個大物件新增屬性,

接著我們來看程式碼段4
var obj = {
    a:6,
    b:{
        a:12,
        fun:function(){
            console.log(this.a); //12
        }
    }
}
obj.b.fun();

程式碼4中的fun是由物件obj ”.“出來的,同樣this並沒有指向obj;所以本文最開始那一段黑體字說的難道有錯誤嗎?

應該算是說的並不準確(我覺得說的很彆扭,就當他不對)

來看下面三短話(百度了好多資料覺得這幾句寫的非常好):

1. 如果一個函式中有this,但是他沒有被上一級的物件所呼叫,那麼this的指向就是window
2. 如果一個函式中有this,這個函式有被上一級物件所呼叫,那麼this的指向就是上衣及物件
3. 如果一個函式中有this,這個函式中包含了多個物件,儘管這個哈哈哈書是被最外層的物件所呼叫,this的指向也只是他上一級的物件

對於第三段話 我們來看下面這段程式碼:

var obj = {
    a:6,
    b:{
       
      // a:12, 物件b中的 a 已經被隱掉
fun:function(){ console.log(this.a); //undefined } }}obj.b.fun();

儘管物件b中沒有屬性a,但是這個this僅指向物件b,並不會向上一級尋找。

但是(萬事萬物都有但是,哈哈哈):

我們來看一個特殊的例子:

var obj = {
    a:6,
    b:{
        a:12,
        fun:function(){
            console.log(this.a); //undefined
            console.log(this); //window
        }
    }
}
var fun1 = obj.b.fun;
fun1();

在這裡 this的指向就變成了 window,奇怪嗎?不奇怪!原因是因為:

this永遠指向的是最後呼叫他的物件;這句話的意思就是說:看他執行的時候是誰呼叫的,上面的例子中,雖然函式fun是被物件b引用的,但是將fun賦值給變數fun1的時候並沒有執行,而是有fun1執行的,所以this最終的指向是window,而例子3中是直接執行了fun;