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>