今天突然被问到一个问题:我定义了一个数组 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的主机变量,永远不能被重新声明。更详细的说明在 这里。