javascript中关于value的一个小知识点(value既是属性也是变量)

　　今天在学习input的value值时，发现这么一个小知识点，之前理解不太透彻

 

【1】如下这种状况是常见状况，会弹出“测试内容”

<input type="button" value="测试内容" onclick = "alert(value)">

 

【2】心想，这种状况下value找不到，沿着做用域链应该到document了，应该弹出“123"，但状况是弹出空

<script>
var value=123;
</script>
<input type="button" onclick = "alert(value)">

 

【3】value确实是找不到吗？是找的到的。在调试工具下，查看了this的属性，里面有一条是 ‘ value:"" ’ 。它的值就是空

<input type="button" onclick = "console.log(this)">

 

【4】因此value做为input的属性一直存在，不存在找不到的状况，赋值了value就是被赋的值，没赋值value就是空

 

【5】看一例拓展，value假装兄弟val。val先在input对象上找，没有找到，沿着做用域链在document对象上找，找到弹出123

<script>
var val=123;
</script>
<input type="button" onclick = "console.log(val)">

 

【6】还有就是不论val=123被写在前面，而是后面，都能访问到，由于onclick只是事件绑定，等事件真正发生的时候页面早就解析了后面var val=123的代码了。因此不会出错

<input type="button" onclick = "console.log(val)">
<script>
var val=123;
</script>

 

【7】是这样吗？但其实把声明放在后面是不靠谱的，若是之间还有其余<script>代码，因为网络缘由没法访问到，因为<script>有阻塞做用，会阻塞后面代码，会报错

<input type="button" onclick = "alert(val)">
<script src="http://www.qq.com/test.js"></script>
<script>
var val=123;
</script>

 

【8】最后一个拓展。若是是一个表单元素，则它的做用域链是 this -> this.form -> document 。先从<input type="button">对象中寻找username属性，发现没有。而后找到它的父级form，form的username能够找到<input type="text">元素(表单元素能够直接经过name值访问)，而后找到其value值123后弹出

<form action="#">
    <input type="text" name="username" value="123">
    <input type="button" value="btn" onclick = "alert(username.value)">
</form>