Question

我刚刚开始学习javascript，并尝试编写一个小脚本，在页面上创建一个div网格。

这是脚本：

var tileWidth=50;
var tileHeight=100;
var leftPos=10;
var topPos=10;
var columns=10;
var rows=10;
var spacing=5;

$('document').ready(function() {
 placeTiles();
});

function makeRow() {
 for (var i=0; i<columns; i++) {
   $('#canvas').append('<div class="tile" style="left:' + leftPos + 'px;top:' + topPos + 'px;"></div>');
   var leftPos = leftPos + tileWidth + spacing;
 }
}

function placeTiles() {
 for (var i=0; i<rows; i++) {
  makeRow();
  var topPos = topPos + tileHeight + spacing;
 }
}

目前，创建了100 <div>个，其中顶部位置为10px，左侧位置为undefined（对于行中的第一个<div>）或NaN。

我应该做些什么？为什么makerow()无法查看我的全局leftPos变量（以及所有其他变量）？

感谢。

Answer 1

“为什么不能使用makerow（）看到我的全局leftPos变量（以及所有其他变量）？”

因为var不是声明。它是一个功能（范围）范围的注释。在顶级范围var 本质上什么都不做（全局执行上下文/范围是窗口对象），因此它与{{1}相同或只是window.leftPos = 10。在makeRow中你基本上有：

leftPos = 10

有些东西看起来很可疑吗？： - ）

对此的两个解决方案是1）使用不同的变量名称（推荐）2）使用'global'leftPos窗口对象的属性（如下所示）。

此外，尽管它只是一个范围范围的注释，但如果你将'var'保持在顶部（它仍然是“悬挂”的话，它通常会导致更清晰的代码，见上文）。例如：

function makeRow() {
 var leftPos = undefined // this is "hoisted" to the TOP of the function
 for (...) {
  // ...
  leftPos = leftPos + tileWidth + spacing
 }
}

有关详细信息，请参阅： Identifier Resolution, Execution Contexts and Scope Chains

Answer 2

您将leftPos声明为var leftPos的函数范围，隐藏全局声明。如果您没有声明某些内容，请不要使用var

Answer 3

在JavaScript中，您可以拥有变量的函数范围或全局范围。

如果在不同的范围内有两个相同名称的变量，则第一个首选项将被赋予在函数范围内声明的变量。

因此，您在脚本顶部的全局范围内声明了leftPos和topPos变量，并且还在makeRow()和placeTiles()函数中声明了它们。 var关键字用于变量声明，而不是用于变量赋值。

您只需要从函数中删除带有var的变量声明，以便使用全局变量。只需使用：

leftPos = leftPos + tileWidth + spacing;

// and

topPos = topPos + tileHeight + spacing;

但是，您应该考虑完全避免全局变量。全球是邪恶的。

进一步阅读：

我脚本中的全局和局部变量

3 个答案: