javascript對象不完全探索記錄01：this! which？

rubyshen 發布于2019-08-21 17:54 / 2292人閱讀

溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命

這一切，源于阮大神博文學習Javascript閉包（Closure）- 阮一峰中的一道思考題

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

這道題，出現在了關于閉包的博文之中，而阮大神的一句“如果你能理解下面兩段代碼的運行結果，應該就算理解閉包的運行機制了。”徹底激發了我的斗志。

乍一看，外面一個變量叫name，對象內還有一個變量是name這就很明顯了，這就是在考察對于作用域鏈的理解了，這里返回的應該是一個妥妥的“My Object”，
可是運行結果卻狠狠大打了我的臉，但是彈出的一個大大“The Window”讓我不得不重新面對這一段代碼，這里面的this指得到底是什么？
進一步嘗試，將this打印到控制臺上出現的結果是“window”，這下就明白了，問題就出在了this上，它并沒有按照我所想的去指向了object而是指向了全局對象window這就是為什么會返回“The Window”了

//在這里，把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

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

Javascript的this用法 - 阮一峰
徹底理解js中this的指向，不必硬背。- 追夢子
JS 中 this 關鍵字詳解 - 蘋果小蘿卜
JavaScript中知而不全的this - Snandy

看了一圈，心里算是有了普，get到了一個基本的概念
this指向的是調用它的對象
這也就是說，在對象定義的時候this并沒有一個具體的指向，只有當被調用時，this才會被賦值給調用他的對象，了解了這個概念，再回頭看看第一題，還是有問題這句object.getNameFunc()()在執行的時候到底發生了什么，我們對第一題做一些改變

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進行改寫

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這個概念很是神奇，并且包含了許多對象方面的知識，使我不禁對徹底弄明白他的各種應用方法和原理產生了不切實際的幻想，那么交給寫后文的未來的我去梳理把

能看到這的都是真愛

云服務器 GPU云服務器對象名this javascript的this javaScript中的this 不完全

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90182.html

javascript對象不完全探索記錄02：瘋狂打call！給誰打call？打什么call？

摘要：注意該方法的作用和方法類似，只有一個區別，就是方法接受的是若干個參數的列表，而方法接受的是一個包含多個參數的數組。指定的參數列表。返回值返回值是你調用的方法的返回值，若該方法沒有返回值，則返回。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續：打call原本是屬于我們偶像宅文化中的專業名詞，指的是飯們在看live時在臺下配合愛豆演出的節奏喊口號，舉例：超...

Shimmer 2019-08-21 17:58 評論0 收藏0
從-1開始的ES6探索之旅01：顏文字成精的箭頭函數上篇 - 大哥，你指哪呢？

摘要：基礎語法參數參數參數函數聲明參數參數參數表達式單一相當于參數參數參數表達式當只有一個參數時，圓括號是可選的單一參數函數聲明單一參數函數聲明沒有參數的函數應該寫成一對圓括號。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續：你們要非得看，我也攔不住，但是至少得準備個支持ES6的Chrome瀏覽器吧？之前在某些大神的代碼中出現一串神秘符號類似于num =>...

Snailclimb 2019-08-21 18:36 評論0 收藏0
javascript閉包不完全探索記錄01：閉包？啥餡的？

摘要：閉包一詞來源于以下兩者的結合要執行的代碼塊由于自由變量被包含在代碼塊中，這些自由變量以及它們引用的對象沒有被釋放和為自由變量提供綁定的計算環境作用域。在以及及以上等語言中都能找到對閉包不同程度的支持。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命閉包，好吃嗎？第一次聽到這個詞，很不幸是在一次面試中，可想而知結果很細碎，從此閉包和跨域在我匱乏的前端知識中成為了...

TANKING 2019-08-21 17:41 評論0 收藏0
從-1開始的ES6探索之旅02：小伙子，你對象咋來的？續篇 - 你的對象班（class）里來的？

摘要：這是因為子類沒有自己的對象，而是繼承父類的對象，然后對其進行加工。溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續：你們要非得看，我也攔不住，但是至少得準備個支持ES6的Chrome瀏覽器吧？溫馨提示-再續：ES6簡直了，放著不用簡直令人發指！書接上回，即便是程序員，也還是能夠通過自己的努力辛辛苦苦找到合適對象的，見前文《javascript對象不完全...

incredible 2019-08-21 18:41 評論0 收藏0
javascript對象不完全探索記錄05：小伙子，你對象咋來的？下篇 - 啥樣的對象適合你

摘要：溫馨提示作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示續本文內容簡單，發揚了潛入潛出的精神，請謹慎浪費時間溫馨提示再續魔卡少女櫻動畫再開撒花經過前兩篇文章的梳理對象不完全探索記錄小伙子，你對象咋來的上篇對象不完全探索記溫馨提示：作者的爬坑記錄，對你等大神完全沒有價值，別在我這浪費生命溫馨提示-續：本文內容簡單，發揚了潛入潛出的精神，請謹慎浪費時間溫馨提示-再續：《魔...

hlcfan 2019-08-21 18:27 評論0 收藏0