我是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
中访问它们?
我读过全局函数或全局变量是对的吗?
答案 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。