javascript中的全局函数

Question

我是js的新手并试图了解全局和私有功能.我理解全局变量和局部变量.但是,如果我有一个名为的HTML test.html和命名为2个js文件test1.js和test2.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

在 test2.js 中，您可以编写此函数以使该函数成为全局函数

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

然后在 test1.js 中你可以像这样访问它

window.parent.abc();

我希望它能帮助你

Answer 3

在没有任何包装的文件中定义的任何内容都将绑定到 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 4

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））; //日志2

console.log（SomeName.function2（1））; //日志3

Answer 5

使用全局数据的现代方法（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。