JS中使用 name 作为变量名出现的问题

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

JS中使用 name 作为变量名出现的问题

定义数组

定义对象

总结

推荐阅读更多精彩内容