對JavaScript的'this'仍然感到困惑

Question

在使用JavaScript對象時，我一直在閱讀關於'this'關鍵字的很多文章，但我仍然有些困惑。我很高興編寫面向對象的Javascript，並且通過引用完整的對象路徑來解決'this'問題，但我不喜歡這個事實，我仍然覺得'this'混亂。

我找到了一個很好的答案here幫助我，但我仍然不是100％確定。所以，在這個例子上。下面的腳本是從test.html的鏈接與<script src="js/test.js"></script>

if (!nick) { 
    var nick = {}; 
} 

nick.name= function(){ 
    var helloA = 'Hello A'; 
    console.log('1.',this, this.helloA); 

    var init = function(){ 
     var helloB = 'Hello B'; 
     console.log('2.',this, this.helloB); 
    } 

    return { 
     init: init 
    } 
}(); 

nick.name.init(); 

什麼樣的期望看到的是

1. Object {} nick.name, 'Hello A' 
2. Object {} init, 'Hello B' 

但是我所得到的是什麼？

1. Window test.html, undefined 
2. Object {} init, undefined 

我想我明白了一些什麼發生的事情，但如果有人在那裏它解釋了我，我不會介意。

此外，我不完全確定爲什麼第一個'console.log'被調用？如果我刪除調用init函數//nick.name.init()螢火蟲仍然輸出1. Window test.html, undefined。這是爲什麼？爲什麼在html頁面加載時，由窗口對象調用nick.name（）？

非常感謝

Answer 1

而且，我不完全知道爲什麼第一「的console.log」被調用呢？

nick.name = function(){ 
    // ... 
}(); 

在這裏定義一個函數，立即（因此()）調用它，它的返回值（{init: init}）分配給nick.name

所以執行是：

1. 創建一個變量nick如果沒有一個非虛假值已經
2. 創建一個匿名函數針對這樣...
3. （因爲該函數是在全球範圍內爲方法執行，而不是window）使用console.logthis在它自己的範圍稱爲helloA
4. 輸出數據的可變含有「1」（原樣）， ，並且this.helloA（window.helloA，它不存在。
5. 定義了一個名爲init
6. 函數會返回一個被分配到nick.name
7. 然後調用nick.name.init()其執行的name背景下init函數的對象。
8. 這定義helloB
9. 然後console.logs 「2」（這是），this（name）和this.helloB（nick.name.helloB - 這不存在）

所以你得到的第一個輸出從console.log('1.',this, this.helloA);

我認爲你的主要問題是你很容易混淆this.foo（在調用方法的對象上的屬性）與變量作用域（函數可用的變量）

Answer 2

1. this是基於每個功能的基礎當函數調用時定義。當你調用一個函數o.f(),this將是o內的函數，並且當你調用它爲f(),this將是全局對象（對於瀏覽器來說，這是窗口）。 您寫的nick.name = function(){...}();和右手部分的形式爲f()，因此Window。

2. var foo = bar;定義了一個局部變量。它可能不會被作爲this.foo訪問（當然，除非在全球範圍內，但這很愚蠢）。要定義一個成員，你通常會寫this.foo = bar;。

Answer 3

如果您將this作爲函數而不是變量來考慮，這會簡單得多。本質上，this是一個返回當前「執行上下文」的函數，也就是當前函數被「應用」到的對象。例如，請考慮以下

function t() { console.log(this)} 

這將返回不同的結果，這取決於你怎麼稱呼它

t() // print window 

bar = { func: t } 
bar.func() // print bar 

foo = { x: 123 } 
t.apply(foo) // print foo 

Answer 4

這是你的代碼做什麼：

• 它創建一個對象，分配給變量nick。
• 它創建一個匿名函數。
• 它調用函數（在窗口範圍內）。
• 它將返回值（包含init屬性的對象）分配給對象的name屬性。
• 它從init屬性（它是一個方法委託）中獲取值，並調用該方法。

匿名函數做到這一點：

• 它聲明瞭一個名爲helloA一個局部變量和一個字符串分配給它。 （創建局部變量不會將其作爲屬性添加到當前對象。）
• 它記錄了this（窗口）和helloA屬性（不存在）。
• 它創建一個匿名函數並分配給本地變量init。
• 它使用屬性init和本地變量init創建一個對象。

分配給init屬性的匿名函數做到這一點：

• 它聲明瞭一個名爲helloB一個局部變量和一個字符串分配給它。 （創建本地變量不將其添加爲屬性設置爲當前對象。）
• 它記錄this（從name屬性，而不是nick變量的對象），並且helloB屬性（它不存在） 。