有效，但未捕获 ReferenceError：当我在控制台中键入数组时未定义数组

Question

我用 js 制作了一个井字游戏，我有几个数组。

-一个用于 html td 元素（网格）
- 看看他们之前是否被点击过 (boolGrid)
- 还有一个用颜色（colorgrid）检查结束条件

我使用 var 关键字及其内容在全局范围内定义了所有这些，现在游戏确实可以运行，但是当我在控制台中输入它们的名称时，它给了我 Uncaught ReferenceError: array is not defined。我想知道这是怎么回事，因为我接下来正在尝试制作 OXO 游戏。

这里是代码的链接，
井字游戏：https://jsfiddle.net/NeuroTypicalCure/0k73umd1/3/
我在 OXO 上的进展：https://jsfiddle.net/NeuroTypicalCure/vdz5q97v/（显然未完成）

    var grid = [
    document.getElementById("a").children[0],
    document.getElementById("a").children[1],
    document.getElementById("a").children[2],
    document.getElementById("b").children[0],
    document.getElementById("b").children[1],
    document.getElementById("b").children[2],
    document.getElementById("c").children[0],
    document.getElementById("c").children[1],
    document.getElementById("c").children[2],
];
var boolGrid = [
    false,false,false,
    false,false,false,
    false,false,false
];
var colorGrid = [
    "grey","grey","grey",
    "grey","grey","grey",
    "grey","grey","grey"
];
var resetButton = document.getElementById("rb");

var color = "green";
var clicks = 0;

function allTiles(color){
    for(var i=0;i<grid.length;i++){
        grid[i].style.backgroundColor = color;
        boolGrid[i] = true;
    }
}
function init(){
    for(var i=0;i<grid.length;i++){
        grid[i].style.backgroundColor = "grey";
        boolGrid[i] = false;
        colorGrid[i] = "grey";
    }
}
function listen(arr,num){
    arr[num].addEventListener("click",function(){
            if(clicks == 0 || clicks%2 == 0){
                color = "green";
            }else{
                color = "red";
            }
            if(boolGrid[num] === false){
                arr[num].style.backgroundColor = color;
                boolGrid[num] = true;
                colorGrid[num] = color;
                clicks++;
                checkEnd("green");
                checkEnd("red");
            }
        });
}
function addEventListeners(){
    for(var i=0;i<grid.length;i++){
        listen(grid,i);
    }
}
function checkEnd(color){
    // ----------------- horizontal --------------
    if(colorGrid[0] === color && colorGrid[1] == color && colorGrid[2] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    if(colorGrid[3] === color && colorGrid[4] == color && colorGrid[5] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    if(colorGrid[6] === color && colorGrid[7] == color && colorGrid[8] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    //------------ vertical --------------
    if(colorGrid[0] === color && colorGrid[3] == color && colorGrid[6] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    if(colorGrid[1] === color && colorGrid[4] == color && colorGrid[7] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    if(colorGrid[2] === color && colorGrid[5] == color && colorGrid[8] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    // ------------------ diagonal -------------------
    if(colorGrid[0] === color && colorGrid[4] == color && colorGrid[8] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
    if(colorGrid[2] === color && colorGrid[4] == color && colorGrid[6] === color){
        console.log(color+"Wins!");
        allTiles(color);
    }
}
init();
addEventListeners();
resetButton.addEventListener("click",function(){
    init();
})

如有任何提示或更正，请随时给我留言，谢谢 :)

祝你的项目好运，
-T

Answer 1

正如您所指定的，游戏运行良好，当您尝试使用控制台（在 JSFiddle 中？）访问变量时失败了。发生这种情况有两个原因：

1. 控制台的上下文。
2. 变量的范围。

简单一点：控制台的上下文是受控制台操作影响的文档。默认情况下，在 Chrome 中，上下文是顶部框架，但可以使用左上角的下拉菜单进行更改：

在您的情况下，您使用的是 JSFiddle，而 JSFiddle 使用 iframe 来显示结果。如果控制台的范围是“”，那么您将无法从结果窗口访问变量。您需要将下拉列表更改为“结果（fiddle.jshell.net/）”值。

但是，即使您这样做，您仍然会收到错误消息。这是为什么？因为第二个原因：变量的范围。再次简化一点，变量范围是程序中可以查看/访问变量的部分。它可以是整个应用程序（全局变量）或只是它的一部分（局部变量）。

在您的情况下，您在函数内部使用了 var 关键字（即使您不认为自己在函数内部使用它，实际上您选择“加载时”执行 JavaScript 并且这会将您的代码包装在在窗口加载时执行的匿名函数中），并使所有变量都成为该函数的本地变量。

当您尝试从控制台打印变量时，无法访问它们，因为它们的作用域是那个特定的函数，并且它们不存在于它之外。要解决这个问题：

• 通过删除 var 关键字使变量成为全局变量。不推荐使用此选项，因为它可能会产生意外结果（任何函数都可以访问该变量，并且调试/维护可能会成为一场噩梦）；或者

• 不要使用“onLoad”选项来执行 JavaScript，而是使用“No wrap - in

  ”。这样您的代码就不会被包裹在window.onload=function(){ } 中，而是直接进入正文底部的<script>。

尽管从技术上讲，您所做的是使变量成为全局变量（因为即使使用 var，它们也在所有函数之外，因此任何人都可以访问它们）。

tl;dr; - 解决问题：

1. 将控制台的上下文更改为 iframe。
2. 更改变量的范围，以便控制台可以访问它们。