今天突然被问到一个问题：我定义了一个数组 var name = ["leon", "jack", "tom"]; ，但是为什么通过下标获取不到正确的值，而且居然能获取到 ,。当时我以为是什么细节问题，仔细检查了一下代码后发现并没有什么问题，甚至开始怀疑JS数组的定义方法，用 var name = new Array("leon", "jack", "tom"); 定义了之后还是出现同样的问题。这下彻底懵了，想了一圈后突然想起来有一次写表单的时候也遇到了类似问题，当时为了获取页面中的 input 标签，而这个 input 是用来输入姓名的，我也就理所当然的在获取的时候这么写了：var name = document.getElementById('idName');，这样没有报错，但是在获取他的 value 值的时候一直是 undefined，即使给他一个初始的 value ，最后获取到的也还是 undefined。而其他的变量都能正常使用，这让我不禁怀疑是变量名的问题，改了变量名之后果然也正常了，当时由于任务也没多想，这个问题也就搁置了，今天有幸又与他见面了。改了数组名之后，果然正常了，这下有必要好好理一下关于 name 变量名的问题了。
定义数组
先看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var name = ["leon", "jack"];
console.log("name：", name, name.length, typeof name);
var names = ["leon", "jack"];
console.log("names：", names, names.length, typeof names);
</script>
</body>
</html>
乍一看两个输出的结果应该是一样的，但结果呢？
很明显，以
name命名的数组变成了字符串。
定义对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="">
<input id="txt1" type="text" value="txt1">
<input id="txt2" type="text" value="txt2">
</form>
<script>
var name = document.getElementById('txt1');
console.log(name.value, typeof name);
var txt = document.getElementById('txt2');
console.log(txt.value, typeof txt);
</script>
</body>
</html>
6 结果可想而知，用
name做变量名的变量又变成字符串了。
总结
name 既不是关键字也不是保留字，但他是属性，这也就是问题所在，这样的话其他的属性也不能用作变量名（不是全部，仅仅是一部分，但还是建议不要使用属性做变量名），比如 top 也不行，但是 left， bottom 却可以。另外 location，self 也不可以，而造成这一切的原因是这些变量名是JS的主机变量，永远不能被重新声明。更详细的说明在 这里。
网友评论