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>