js用name做变量名

       昨天帮室友写作业的时候发生了一件很奇怪的事情,我使用var关键字定义了一个name,目的是为了获取一个input标签中的value值,因为是很简单的操作,所以我直接绑定了点击事件,后来发现点击事件不生效,打印name发现其实根本没有获取到input标签中的value,而是一个字符串,下面给大家看一下我的代码:

     <script>
        var name = document.querySelector('.name'),
            password = document.querySelector('.password'),
            submit_btn = document.querySelector('.submit');
            console.log(name,password);
        submit_btn.onclick = function() {
            if(name.value === '' || password.value === '') {
                alert('用户名和密码不能为空!');
            }
        }
    </script>

打印的结果如下所示:

 在这里打印的name 值是一个[object HTMLIputElement],并不是我想要的结果,然后我更改变量名name为Name,则扩打印出正确的结果,

 我又写了下面的一段代码测试

        var name  = [1,2,3,4,5]
        var names = [1,2,3,4,5]
        console.log(name,name.length,typeof name)
        console.log(names,names.length,typeof names)

第一眼看一下,应该会觉得这两个的打印结果会是一模一样的,但是真正的输出结果却大有不同:

可以看出用name定义的数据类型变成了字符串,长度变成了9.

后来我就百度了一下,name既不是关键字也不是保留字,但他是window身上的一个属性,因此name既不能用作变量名(不是全部,仅仅是一部分,但是为了安全起见,还是尽量不要使用name用作变量名).

在控制台直接打印window.name,可以看见输出的结果和我第一次打印的结果一样,是一个字符串.

 在MDN文档中搜索window.name得知它是用来设置/获取窗口名称的,感兴趣的可以去这里看看.