javascript對象不徹底探索記錄01:this! which?

舒適提示:做者的爬坑記錄,對你等大神徹底沒有價值,別在我這浪費生命javascript

這一切,源於阮大神博文學習Javascript閉包(Closure)- 阮一峯中的一道思考題html

//問題1:
var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    return function(){
      return this.name;
    };
  }
};
alert(object.getNameFunc()());

這道題,出如今了關於閉包的博文之中,而阮大神的一句「若是你能理解下面兩段代碼的運行結果,應該就算理解閉包的運行機制了。」完全激發了個人鬥志。java

乍一看,外面一個變量叫name,對象內還有一個變量是name這就很明顯了,這就是在考察對於做用域鏈的理解了,這裏返回的應該是一個妥妥的「My Object」,
但是運行結果卻狠狠大打了個人臉,可是彈出的一個大大「The Window」讓我不得不從新面對這一段代碼,這裏面的this指獲得底是什麼?
進一步嘗試,將this打印到控制檯上出現的結果是「window」,這下就明白了,問題就出在了this上,它並無按照我所想的去指向了object而是指向了全局對象window這就是爲何會返回「The Window」了segmentfault

//在這裏,把this去掉也會返回「My Object」具體緣由還沒整明白之後補充閉包

再看阮大神給出的第二道題就更懵逼了函數

//問題2:
var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
    var that = this;
    return function(){
      return that.name;
    };
  }
};
alert(object.getNameFunc()());//My Object

按照這幾行代碼的意思,在getNameFuncthis指向的是object而在其內部的函數中,則會指向全局對象,這去哪說理,再次又開始狂搜博文學習

Javascript的this用法 - 阮一峯
完全理解js中this的指向,沒必要硬背。- 追夢子
JS 中 this 關鍵字詳解 - 蘋果小蘿蔔
JavaScript中知而不全的this - Snandythis

看了一圈,內心算是有了普,get到了一個基本的概念
this指向的是調用它的對象
這也就是說,在對象定義的時候this並無一個具體的指向,只有當被調用時,this纔會被賦值給調用他的對象,瞭解了這個概念,再回頭看看第一題,仍是有問題這句object.getNameFunc()()在執行的時候到底發生了什麼,咱們對第一題作一些改變code

var name = "The Window";
var object = {
  name : "My Object",
  getNameFunc : function(){
       console.log(this.name)
       return function(){
        console.log(this.name)
        return this.name;
    };
  }
};
object.getNameFunc()//My Object 執行語句1
object.getNameFunc()()//The Window 執行語句2

在執行語句1中,能夠理解getNameFunc()是被object對象所調用,在函數中的this就指向了object,因此就出現了這個結果,
在執行語句2中,咱們能夠理解爲執行語句1的返回函數,被執行了一次,而執行它的就是咱們的window對象了,爲了便於理解咱們把執行語句2進行改寫htm

var getVal = object.getNameFunc()
getVal()//The Window

實際上,執行語句2就是執行了getVal()而這個函數的執行對象是window,因此就出現了上文中的結果。
咱們再來看問題2就很明白了var that = this;是在object.getNameFunc()執行的過程當中被執行的,因此這裏的this指向的就是object而把他賦值給變量that後實際上就是把object賦值給了that(有不嚴謹之處,領會精神),而因爲that處於內部函數的做用域鏈中,不能被釋放,連同返回的內部函數造成閉包(終於見到你了),因此一直都指向了object,因此題目2的最終結果就是「My Object」了

長出一口氣

這麼看this這個概念非常神奇,而且包含了許多對象方面的知識,使我不由對完全弄明白他的各類應用方法和原理產生了不切實際的幻想,那麼交給寫後文的將來的我去梳理把

能看到這的都是真愛

相關文章
相關標籤/搜索