可能的功能/变量提升问题答案

【问题标题】：Possible function/variable hoisting issue可能的功能/变量提升问题
【发布时间】：2014-12-31 00:23:27
【问题描述】：

最初你按下一个按钮，出现询问输入的提示，输入被放置到类型“Wall”中，然后类型被“推送”到数组“walls”中。之后调用函数wallTable() 将数组walls 排列到前端的HTML5 表格中。（这一切都很好）

这是wallTable() 函数：

function wallTable(){
    var tableDiv = document.getElementById("wallTable"),
        table = "<table border='1'>" +
            "<thread><th>Room</th><th>Surface</th><th>Material</th><th>Width</th><th>Height</th><th>Surface Area</th></thread>";
    for(var i = 0, j = walls.length; i<j; i++){
        var wallTable = walls[i];
        console.log("Check 2");
        table += wallTable.tableRow();  //Uncaught TypeError: undefined is not a function.  wallTable       <------------?????????????????????????
        console.log("Check 3");
    }
    table += "</table>";
    tableDiv.innerHTML = table;
}

这个程序需要在关闭后存储数据，并在重新打开时将其带回并再次放入表中，我使用localStoreage()结合JSON.stringify存储walls数组和JSON.parse来获取它又回来了。据我所知，在表单中输入一些 console.logs() 可以正常工作，但是当它尝试在加载时将数组放入表中时会出错。

if(localStorage.getItem("wallArray")!== null){
    walls = JSON.parse(localStorage["wallArray"]);
    console.log("Check 1");
    wallTable(walls);   //(anonymous function)      <--------------------?????????????????????????????
}
//Table functions
function wallTable(){
    var tableDiv = document.getElementById("wallTable"),
        table = "<table border='1'>" +
            "<thread><th>Room</th><th>Surface</th><th>Material</th><th>Width</th><th>Height</th><th>Surface Area</th></thread>";
    for(var i = 0, j = walls.length; i<j; i++){
        var wallTable = walls[i];
        console.log("Check 2");
        table += wallTable.tableRow();  //Uncaught TypeError: undefined is not a function.  wallTable       <------------?????????????????????????
        console.log("Check 3");
    }
    table += "</table>";
    tableDiv.innerHTML = table;
}

如果localStorage("wallArray") 中没有任何内容，则即使在输入内容后程序也可以正常运行。只有当您使用 localStorage("wallArray") 中的内容打开程序时才会引发错误。

【问题讨论】：

当你将一个 JavaScript 对象传递给JSON.stringify() 时，你失去了对象的所有原始“个性”；你得到的只是一个带有属性值的 JSON 字符串。随后对JSON.parse() 的调用将返回普通对象。不会重新创建带有 .tableRow() 函数的原始对象。
您能否建议一种在不发生这种情况的情况下存储信息的方法？
JSON.parse() 机制允许您对对象的恢复方式进行一些控制。根据您已序列化的数据的性质，您可以使用它来重新创建您的类与您的对象。本地存储和 cookie 都将您可以保存的内容限制为纯字符串，因此在不涉及服务器端存储的情况下，没有其他选择。
您在不同的上下文中使用相同的变量名，这会使一切变得混乱。另外，当wallTable()不接受任何参数时，为什么要向它传递参数？
是的，那是因为我只是在向它扔东西，比如“请工作！”

标签： javascript arrays html local-storage

【解决方案1】：

您正在使用一个参数（墙壁）调用 wallTable()，而您的声明没有... 首先，尝试这样声明：

function wallTable(walls){...}

或者，如果您希望不使用任何参数，请在不使用任何参数的情况下调用 wallTable()，并确保在 wallTable() 范围内可以正确访问墙壁。我假设您已经在某个地方全局声明了它。

【讨论】：

是的，那是因为我只是在向它扔东西，比如“请工作，你为什么不工作？”但现在我知道为什么要感谢 Pointy
此外，我看到了您的“检查 1”、“检查 2”console.logs... 这种进入程序的方式不是最佳的。使用 console.log 直接检查墙壁 JSON 解析的内容 (console.log(walls)) 并尝试使用诸如 FireFox 之类的调试器，在要停止的位置设置断点并检查 DOM 树中的任何值、对象结构、数组内容.