整个JS里面的一个全局变量？

Question

我有一个创建应用的学校任务，其中一个限制是只允许一个全局变量，名为“App”。所以我需要把整个JS放入这个变量中。

我觉得做这样的：

App = function() { this.test =() => alert("test"); } 

然后用App.test()调用它。

但是，这并不工作，我得到的错误是：

Uncaught TypeError: App.test is not a function at HTMLLIElement.onclick (index.html:25)

难道我做错了什么？

Answer 1

你需要一个变量作为一个对象来定义你的应用程序，然后你可以使用对象的成员，如：

// Object creation 
window.App = {}; 

然后你添加更多的属性就像函数或变量一样，稍后在该变量中使用它。

window.App.test = function() { 
    alert('test'); 
} 

window.App.variable = 'my variable'; 

console.log(App.test()); 
console.log(App.variable); 

的另一件事是，你可以从App省略字window。

Answer 2

为了能够使用的功能，它包含this.test...，你需要把它作为一个“构造函数”，因为this在函数声明中的意思是“实例属性”，这意味着你需要明确创建的实例App与new关键字：

// Declare the global 
 
    var App = function() { this.test =() => alert("test"); } 
 
    
 
    // Make an instance of an object via the constructor function 
 
    var myApp = new App(); 
 
    
 
    // Invoke the functionality via the instance 
 
    myApp.test()

或者，建立App为对象，该对象连接到全球window对象并设置test为App都没有任何实例属性（this引用）的属性，从而避免了不得不作出明确的实例：

// Declare the global property as an Object 
 
// and set up a "test" property that stores 
 
// a function in that object: 
 
window.App = { test: function(){alert("test");}} 
 

 
// Invoke the functionality directly 
 
App.test()

Answer 3

保持大部分的方法，因为它是的，你可以返回具有作为属性功能的对象。

App = function() { 
 
    return { 
 
    test:() => alert("test"), 
 
    test2:() => alert("test2") 
 
    }; 
 
} 
 

 
App().test(); 
 
App().test2();

Answer 4

的test功能不被执行App函数之前定义：

App =() => test =() => alert("test")

<button onclick='App(); test()'>:</button>

---

App可以被定义为对象，而不是：

App = { test:() => alert("test") }

<button onclick='App.test()'>:</button>

Answer 5

只是捎带到其他答案建议是什么，这种技术是最常用的（在浏览器的研究与开发）当你“命名空间”一些JS代码。 Namespacing非常有用，因为它可以帮助开发人员通过在window下的一个名称空间下添加所有代码来减少全局变量污染。

这也有助于开发人员modularise的代码。

这里是你可能会不时看到时间window下添加代码到一个单一命名空间的模式。

// This first function is what's known as an Immediately-invoked 
// function expression (IIFE). `window` is passed in as an argument 
// to the function - all other declared variables are local to the scope 
// of the function so you don't get anything leaking to global. 
// PS, the semi-colon is there before the opening parenthesis to prevent 
// any errors appearing if you minimise your code 
;(function (window) { 

    // Here we declare something new to add to the namespace 
    // It could be another object, a string, an array, or a constructor 
    // like Model 
    function Model() {...} 

    // If namespace `window.app` doesn't exist instantiate it with 
    // an empty object. If it _does_ exist it probably means that another 
    // module like this one has already been added to the namespace. 
    window.app = window.app || {}; 

    // Then assign your new module as a property under that namespace 
    window.app.Model = Model; 

})(window); 

然后，您可以使用它以后是这样的：

var model = new app.Model(); 
var game = new Game(model); 

对于进一步阅读：Addy Osmani on namespacing。