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>