zoukankan      html  css  js  c++  java
  • javascript中name,value等属于保留字

    前几天在练习js代码的时候,碰到了一个坑,这是让人醉了。
    html代码如下:

     <div>
            <div>
                <!--输入 123456-->
                <lable>请输入员工编号</lable>
                <input id="keyWord" type="text">
            </div>
    
            <div>
                <!--输入 moran-->
                <lable>请输入员工姓名</lable>
                <input id="staffName" type="text">
            </div>
            <div>
                <!--点击保存,输出监听函数中的log信息   @author www.yaoxiaowen.com-->
                <button id="save">保存</button>
            </div>
    
        </div>
    

    js代码如下:

     var keyword=document.getElementById("keyWord");
        var name=document.getElementById("staffName");
        var save=document.getElementById("save");
    
        //输出:  keyword=[object HTMLInputElement]	 keyword.value =
        console.log("keyword=" + keyword + "	 keyword.value = " +keyword.value);
    
    
        var keyValue = keyword.value;
        //输出: ===
        if (keyValue === ""){
            console.log("===");
        }else {
            console.log("!==");
        }
    
        //输出:name=[object HTMLInputElement]	 name.value = undefined
        console.log("	 name=" + name + "	 name.value = " +name.value);
    
        //@author   www.yaoxiaowen.com
        save.onclick=function(){
            //输出:  keyword=[object HTMLInputElement]	 keyword.value = 123456
            console.log("keyword=" + keyword + "	 keyword.value = " +keyword.value);
    
            //输出:name=[object HTMLInputElement]	  name.value = undefined
            console.log("	 name=" + name + "	  name.value = " +name.value);
    
            //输出: document.getElementById('staffName').value = moran
            console.log("document.getElementById('staffName').value = " + document.getElementById("staffName").value);
        }
    

    代码注释中已经写了相应的注释输出,完全一样的 <input>标签,js中获得Element也是一样的操作,可是 namekeyword它们的行为表现就是不一样。

    盯着这些代码看了半天,各种调试测试,可是还是想不明白。最后意外的发现,把 name这个变量名修改成其他值就好了,比如name1之类的。

    这就让我怀疑人生了。c,java,js等语言中那些关键字,保留字,比如for,while,break,private,class,,throw等这些不能用于变量名是常识,可是一个name是个普通的字符串啊。

    然后去google搜索,竟然发现了某篇博客的这句话:

    有些东西是保留字,避免使用就行了,没有为什么... js中的保留字会导致奇怪的结果,各个浏览器保留字不同,导致结果也不同,尽量不要使用name,value,if,in,for之类的东西做变量名

    然后在菜鸟教程,发现了一个(在我看来)很庞大的保留字,关键字表点击查看

    好吧,js中的坑真多,菜鸟教程的那些保留字表格,还是多读几遍吧,免得最后因为这个细节问题而出现难以调试的bug。


    作者: www.yaoxiaowen.com

    github: https://github.com/yaowen369

    欢迎对于本人的博客内容批评指点,如果问题,可评论或邮件(yaowen369@gmail.com)联系

    <p >
    		 欢迎转载,转载请注明出处.谢谢
    </p>
    
    
    <script type="text/javascript">
     function    Curgo()   
     {   
         window.open(window.location.href);
     }   
    </script>
    
  • 相关阅读:
    从源码分析 XtraBackup 的备份原理
    移动端 SDK 开发经验总结及梳理
    spring boot jar包开机自启
    在Simulink中添加VeriStand支持
    java 启动脚本
    Docker容器日志管理最佳实践
    docker 日志限制或者删除
    网盘搜索
    tuple c++
    google原版:Debugging WebAssembly with modern tools
  • 原文地址:https://www.cnblogs.com/yaoxiaowen/p/6838818.html
Copyright © 2011-2022 走看看