javascript中的全局函数

时间:2015-04-08 12:16:49

标签: javascript function global

我是js的新手,并试图了解全局和私人功能。我理解全局变量和局部变量。但是如果我有一个名为test.html的html和一个名为test1.jstest2.js的2个js文件。现在,我在test1.js中添加test2.jstest.html,并在test2.jstest1.js内调用test.html中写的函数。

我在test2.js中编写的函数采用这种形式

function abc(){...}

function pqr(){...} etc.

上述这些功能是全局的吗?如果是,我怎么能不将它们全局化并仍在test1.jstest.html中访问它们?

我读过全局函数或全局变量是对的吗?

6 个答案:

答案 0 :(得分:16)

JS中的所有内容都必然包含范围。因此,如果您直接在文件中定义function,它将绑定到window对象,即它将是全局的。

要使其“私有”,您必须创建一个包含这些功能的对象。你是正确的,乱丢乱的全局范围是坏的,但你必须在全局范围内放置一些能够访问它,JS库也做同样的事情,没有其他的解决方法。但是考虑一下你在全球范围内所做的事情,单个对象对你的“图书馆”来说应该足够了。

示例:

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

要在某处调用abc,无论是相同的文件还是其他文件:

MyObject.abc(...);

答案 1 :(得分: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

答案 2 :(得分:2)

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

答案 3 :(得分:1)

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

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

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

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

现在,您可以使用更简单的模块模式:

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

Google“Javascript模块模式”。

另见this answer

答案 4 :(得分:0)

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

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

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

window.parent.abc();

我希望它将对您有帮助

答案 5 :(得分:0)

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