javascript中的全局函數

Question

我是 js 的新手，並試圖了解全局和私有函數。 我了解全局和局部變量。 但是，如果我有一個名為test.html的 html 和一個名為test1.js和test2.js js 文件。 現在，我包括test1.js和test2.js中test.html並調用寫在功能test2.js內test1.js和test.html 。

我在test2.js中寫的函數都是這種形式

function abc(){...}

function pqr(){...} etc.

以上這些功能是全局的嗎？ 如果是，我怎么能不讓它們成為全局的並且仍然在test1.js和test.html訪問它們？

正如我讀過的全局函數或全局變量是壞的對嗎？

Answer 1

JS 中的所有內容都綁定到包含范圍。 因此，如果直接在文件中定義一個function ，它將綁定到window對象，即它是全局的。

要使其“私有”，您必須創建一個包含這些功能的對象。 你是正確的，亂扔全局范圍是不好的，但是你必須在全局范圍內放置一些東西才能訪問它，JS庫做同樣的事情，沒有其他解決方法。 但是考慮一下您在全局范圍內放置的內容，單個對象對於您的“庫”來說應該綽綽有余。

例子：

MyObject = {
    abc: function(...) {...},
    pqr: function(...) {...}
    // other functions...
}

要為某處調用abc ，無論是同一個文件還是另一個文件：

MyObject.abc(...);

Answer 2

在沒有任何包裝的文件中定義的任何內容都將綁定到 window 對象。 任何綁定到 window 對象的東西都是全局的。

例子：

//these are global variables
foo = 123;
var ABC = 'school';

//these are "private" variables
test = function(){
  var foo = 123
}

(function(){
  var ABC = 'school';
}).call(this);

由於每個文件中的全局變量都是window對象的一部分，因此您可以在文件之間訪問它們。 創建“私有”變量時添加var很重要。 這表示覆蓋當前“包裝器”中的任何全局變量。 如果我有一個全局變量foo並且我在一個帶有var的函數中再次定義它，它們將是分開的。

var foo = 123;
(function(){
  var foo = 987; //this foo is separate from the above foo
}).call(this);

如果你有一個“包裝器”並且你想定義一個全局函數，你可以這樣做：

window.foo = 123;
(function(){
  window.foo = 123;
}).call(this);

這兩個函數都會做同樣的事情。

就個人而言，我更喜歡將所有內容都放在一個包裝器中，並且僅在需要時才使用window定義全局變量。

(function(){

  //all code goes here

  //define global variable
  window.foo = 123;

})call(this);

Answer 3

var SomeName = function() {

    var function1 = function (number) {
        return number+1;
    }

    var anotherFunction = function (number) {
        return number+2;
    }

    return {
        function1: function (number) {
            return function1(number);
        },
        function2: function (number) {
            return anotherFunction(number);
        }
    }
}();

打電話

console.log(SomeName.function1(1)); //logs 2

console.log(SomeName.function2(1)); //logs 3

Answer 4

在 test2.js 中你可以寫這個來使函數全局化

window.abc = function(){...}

然后在 test1.js 中你可以像這樣訪問它

window.parent.abc();

我希望它會幫助你

Answer 5

如果您不明白為什么全局變量不好，那么您為什么要避免使用它們？

全局函數不一定是壞的。 不好的是，任何人和任何事物都會發生變化。

一般來說，由於您是 Javascript 的新手，因此可以從分布在您通過腳本標簽包含在 html 文件中的多個 javascript 文件中的全局函數開始。

當您從初學者過渡到中級時，您將不得不研究一些“模塊”解決方案（我個人推薦RequireJS ）。

不過現在，您可以使用更簡單的模塊模式：

var T1 = function() {
   return < some module object >
})(); // notice the parenthesis

谷歌“Javascript 模塊模式”。

另請參閱此答案。

Answer 6

使用全局數據的現代方法 (2020) 是使用全局對象文字並在其中定義所有需要的邏輯。

 const Website = { foo () { console.log('foo') }, bar () { console.log('bar') } } document.addEventListener('DOMContentLoaded', () => { Website.foo() Website.bar() })

如果您的代碼比幾行更復雜，您需要將代碼分成多個文件，並使用 webpack 將它們合並到一個文件中。

 import Foo from './js/Foo.js' import Bar from './js/Bar.js' // define here another object literal or setup document events. // webpack will merge all this together into one file

 <script src="js/webpack-merged.js"></script>

此處描述了您不想使用 html 導入單個 js 文件的原因。 它的要點是你的性能會很差，所以你必須捆綁所有的 js。

Answer 7

vos fonctions ne sont pas global si vous faite l'erreur de les incorporé dans par exemple :

$( document ).ready(function() {  
function myglobalfunction() { ... }
});

vous devez 退休人員

$( document ).ready(function() {

---

如果您犯了將它們嵌入的錯誤，您的函數就不是全局的，例如：

$(document) .ready (function () {
function myglobalfunction () {
...
}
});

你必須刪除

$ (document) .ready (function () {