Javascript模塊控件

Question

我目前正在使用模塊，但我的困惑是，當我在函數中編寫return對象時，它可以調用外部函數範圍，但是當我編寫像var obj = {some: something}這樣的標準對象時，則不能在函數範圍外調用。爲什麼和如何？

// Return Object 
 
var ray = (function(){ 
 
    return { 
 
     speak: function(){ 
 
      console.log("Haseeb"); 
 
     } 
 
    }; 
 
})(); 
 
ray.speak(); 
 

 
// Standard Object 
 
var ray = (function(){ 
 
     var obj = { 
 
      speak: function(){ 
 
      console.log("Haseeb"); 
 
     }   
 
    } 
 
})(); 
 

 
obj.speak();

Answer 1

假設你的意思是寫ray.speak();而不是obj.speak();;

// Standard Object 
var ray = (function(){ 
    var obj = { 
    speak: function(){ 
     console.log("Haseeb"); 
    }   
    } 
})(); 

在這個片段中，當執行匿名函數返回什麼回ray變量，所以當你嘗試從ray訪問speak()方法，它拋出一個錯誤說Cannot read property 'speak' of undefined。

但是在您的第一個片段中，匿名函數確實會使用speak方法返回一個對象，因此您可以撥打ray.speak()。

Answer 2

// Standard Object 
var ray = (function(){ 
     var obj = { 
      speak: function(){ 
      console.log("Haseeb"); 
     }   
    } 
})(); 

obj.speak(); 

由於詞法範圍的工作原理，這不起作用。外部的Obj沒有與函數內部定義的內容相關的上下文，因爲obj是在函數的塊範圍內聲明的。但是，如果obj被聲明在同一範圍內，它將按預期工作。

var obj; 
// Standard Object 
var ray = (function(){ 
     obj = { 
      speak: function(){ 
      console.log("Haseeb"); 
     }   
    } 
})(); 

obj.speak(); 

ray.speak()將不起作用，因爲它沒有綁定到obj。 return obj={...}將成爲這個問題的解決方案。

Answer 3

瞭解JavaScript變量範圍將有所幫助： http://www.w3schools.com/js/js_scope.asp

現在來到你的代碼。 在第一個片段中，變量'ray'被賦值爲自執行函數返回的值，這是返回的對象。它類似於此：

var ray = { 
     speak: function(){ 
      console.log("Haseeb"); 
     } 
    }; 

所以現在下面的語句是「雷」的有效有一個屬性「說話」

ray.speak(); 

然而，在片段的第二部分，不會返回任何通過自我執行的功能，因此，它類似於：

var ray = undefined; 

現在的聲明「ray.speak()」是等同於執行「undefined.speak()」，這將拋出一個錯誤，很明顯。

此外，執行obj.speak與執行'undefined.speak()'相同，因爲變量'obj'僅在該自執行功能內可用。在函數之外，'obj'沒有被定義。

希望這會有所幫助。:)

編輯：

說明你對return語句的問題：

return語句返回無論是在它前面的代碼/語句的輸出。

例子：

var a = 2; 
return a; // will return a's value, i.e. '2' 

var obj = { x:1 }; 
return obj; // will return the obj variable's value i.e. { x:1 } 

var a = 1; 
return a > 1; // will return false i.e. what 'a > 1' outputs after execution 

所以，如果你寫

return obj = { x:1 }; 

這將返回什麼分配 '的obj = {x：1}' 的輸出，這是OBJ分配的值。

現在來到你的代碼

var ray = (function(){ 
     return obj = { 
      speak: function(){ 
      console.log("Haseeb"); 
     }   
    } 
})(); 

這裏return語句不作OBJ提供給函數之外的範圍，它只是返回obj的值，然後將其分配給「雷」。 之所以能夠做到obj.speak()而沒有得到任何異常，是因爲您已經使用了變量obj，而沒有在函數中使用'var'關鍵字聲明它，導致'obj'在全局範圍內自動聲明。這就是爲什麼你可以在函數之外訪問'obj'的原因。

如果你改變你的代碼如下：

var ray = (function(){ 
    var obj; 
    return obj = { 
      speak: function(){ 
      console.log("Haseeb"); 
     }   
    } 
})(); 

您將獲得異常，而試圖執行obj.speak()功能之外。因爲'obj'現在只在函數內聲明並可用。

我建議閱讀一些關於JavaScript中變量作用域的教程，並在控制檯上播放一下。 :)

希望這會有所幫助:)