将 JavaScript 函数放置在变量的对象中答案

【问题标题】：Placing JavaScript functions inside of an object of a variable将 JavaScript 函数放置在变量的对象中
【发布时间】：2013-05-08 10:08:38
【问题描述】：

我经常看到这种情况，但我不确定它的目的或好处是什么（如果有的话）。将一个函数或一组函数放在对象内，作为变量的值。

var variableName = { (function() {DO STUFF} )}

【问题讨论】：

标签： javascript function variables object

【解决方案1】：

JavaScript 使用全局变量。这意味着每个脚本都无法访问和修改所有变量，并可能覆盖具有相同名称的变量。为了保护您自己的脚本，您可以使用全局变量（如 var MyScript=... ）并将所有内容写入其中。举个例子，我编写了一个简单的脚本来在 html 文件之间导航。您可以看到一个名为“Navi”的变量，它封装了里面的所有内容。它包含变量和函数，并且（在这种情况下）只有返回的名称才允许访问。如果我在 Navi 中编写下一个和上一个函数，它们可能会在其他一些脚本中被覆盖。

var Navi = (function(){
    var currentPage = 0;
    var pages = [];
    pages[0] = "first.html";
    pages[1] = "second.html";
    pages[2] = "third.html";

    var next = function next(){
        if(currentPage < pages.length - 1){
            currentPage++;
            location.href = pages[currentPage];
        }
    };

    var previous = function previous(){
        if(currentPage > 0){
            currentPage--;
            location.href = pages[currentPage];
        }
    };

    return{
        next: next,
        previous: previous,
        currentPage: currentPage,
        pages: pages
    };
})();

从 html 文件调用它：

<a href="javascript:Navi.previous();">previous page</a>
<a href="javascript:Navi.next();">next page</a>

到目前为止。

【讨论】：

脚本可以修改所有变量吗？你能详细说明一下吗？
所以它只是一个安全功能，就像在程序编程中你可以将类设置为私有？另外，是否允许其他脚本更改全局变量，然后将所有内容都包裹在内，从而破坏所有内容？
@specialscope：据我所知，JS 解析器从文档顶部到底部工作。变量/函数/对象等将被覆盖，如果它们再次以相同的名称声明。例如。我们使用两个脚本：<script type="text/javascript" src="navigation.js"...><script ... src="anotherScript.js">... 假设 navigation.js 中的“下一个”函数不在另一个变量中。它将被设置为：var next = function(){ ` // 改变 url ` ` }};` 第二个脚本包含一行：var next = "from this point, next this is just a string"; 你合理吗？
在原始帖子的脚本中，我应该将返回值更改为return{next: next,previous: previous,currentPage: currentPage}，而无需访问“页面”（可以进行调试），并且可能通过函数间接更改“currentPage”（例如只允许 pages.length 范围内的数字）
@KnightYoshi：因为上面的代码示例演示了变量、对象、函数，因此可以在您自己的脚本之外进行更改。所以他们是机会，你覆盖别人的变量和其他方式。提示 1：尝试为您的封装变量（全局变量）命名，希望之后不会在任何脚本中使用该名称。提示 2：记住 JavaScript 区分大小写 g

【解决方案2】：

基本上，如果函数有一个名字，你可以用它来调用它

variableName.function(args);

在这些类型的对象中，您可以设置将始终存储在对象中的方法，直到您自己刷新或重置数据，如果您想使事物动态化但仍要记住输入数据，这很方便。

你可以像这样创建一个单例对象：

var Singleton = {

    data1 : '',

    functionName : function() {

        this.data1 = document.getElementById('formfield1').value;    

    }

}

所以如果你有一个 id 为 formfield1 的表单域

<input type="text" id="formfield1" value="" />

例如，当您将此函数绑定到提交按钮时

<button onclick="Singleton.functionName();">Save</button>

您的信息将存储在对象的 data1 变量中。

除此之外还有很多，但它是一种保存数据的好方法，希望对您有所帮助:)

【讨论】：