javascript小知识点

Posted 2020-08-25

大家对input中的value值研究的透彻么，今天看到一篇博客，很神奇  然后研究了一下input中的value值到底对应的是啥值

 

1、input中的value，这是大家在开发中进场遇到的一个问题

<input type="button" value="kester" onclick = "alert(value)">

这种情况下，会弹出测试的弹窗内容为“kester”

 

2、但是在请看一下的一种情况

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

心里在想，这种情况下value找不到，是不是沿着作用域找到上一层的document，应该弹出“123”，结果是错误的，然而弹出来的是一个空值

 

3、value确实是找不到么？答案却否定的。

在调试工具下，查看的this的属性是有一条记录的：value：“”，这样证实了value为空值，例下代码

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

 

4、所以，在input中，value是永远存在的，不存在找不到的情况，赋值了value就是被赋值的值，没有赋值的value为空，这个大家都应该清楚的

 

5、举个例子

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

value的伪装兄弟是val。val现在input对象上找，没有找到，沿着作用域在document对象上找，找到弹出123

 

6、不论val=123被写在前面还后面，都是可以访问到的，因为这是一个点击事件，当在出发这个点击事件的时候，页面已经解析了js

<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>