Question

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

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 3

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

如果你不明白为什么全局变量是坏的，那你为什么要试图避免它们？

全球职能不一定是坏事。什么是坏的是说任何人和任何事情都会改变。

一般来说，因为你是Javascript的新手，所以可以通过脚本标签在html文件中包含的多个javascript文件中展开全局函数。

当你从初学者过渡到中级时，你将不得不研究一些“模块”解决方案（我个人推荐RequireJS）。

现在，您可以使用更简单的模块模式：

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

Google“Javascript模块模式”。

另见this answer。

Answer 5

在test2.js中，您可以编写此代码以使该函数具有全局性

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

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

window.parent.abc();

我希望它将对您有帮助

Answer 6

一种使用全局数据的现代方法（2020年）是使用全局对象文字并在其中定义所有需要的逻辑。

soup

如果您的代码比两行要复杂，则需要将代码分成多个文件，然后使用webpack将它们合并到一个文件中。

const Website = {
  foo () {
    console.log('foo')
  },
  
  bar () {
    console.log('bar')
  }
}

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

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

您不想使用html导入单个js文件的原因是described here。关键是您的性能会很差，因此您必须捆绑所有的js。

javascript中的全局函数

6 个答案: