在js中var可以说是无人不知无人不小晓得一个东西，
我们都知道javascript属于弱语言，即在开辟变量存储空间时，可以不定义将来存储数据的类型，可以存放任意类型。
var是一个很好的体现，在定义变量的时候，不管是整型，字符型，等等都可以用var来定义，确实很方便，但是却也有很大的局限或者说是不严谨。
不知道大家在平时的学习中有没有遇见这样一个问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
var a = 10;
var a = 20;
alert(a);
</script>
<body>
</body>
</html>这是一个再简单不过的小例子，其实也没啥奇怪的，但是学过java之类强类型语言的朋友可能就感到很奇怪，咦？a重复定义了竟然没有报错？之前在学习js的时候，我还特地避免了不要重复声明，一次偶然的练习不小心重复定义了没报错，还把我吓了一跳，哈哈。在js中，重复定义是不报错的，相当于覆盖掉上面的a，但是这样写确实也不严谨，有时候如果我们需要用的是第一个值，但是被覆盖后就获取不到了，当然也可以启用严格模式。不过，还有一个小bug不知大家发现没有（我也不知道这算不算bug，哈哈），直接上例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
window.onload = function(){
var oins = document.getElementsByClassName('in');
for (var i = 0;i<oins.length;i++){
oins[i].onclick = function(){
alert(i);
}
}
}
</script>
<body>
<input type="button" value="按钮1" class="in">
<input type="button" value="按钮2" class="in">
<input type="button" value="按钮3" class="in">
</body>
</html>按理说应该是点击哪个按钮，就会弹出对应i的值，但是结果出人意料，弹出来的全部是3 ？这就有点奇怪了，这个3是从哪里来的呢？之前在学习的时候，可是吃了这个的大亏啊，我见循环搞出来是这个，十几个节点就一个一个获取，一个一个绑定的事件。。。。
之前我一直存在疑惑，但是有幸在学习es6的过程中，了解了是怎么回事，var是函数级作用域，也就是说在一个函数中，通过var定义的都是同一个变量，重复声明只不过是改变他的值，我们可以来看一看：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function fun1(){
var a = 10 ;
return a;
}
function fun2(){
var a = 20;
return a ;
}
window.onload = function() {
console.log(`函数1的a的值${fun1()}`);
console.log(`函数2的a的值${fun2()}`);
}
</script>
<body>
</body>
</html>可以看到在不同函数中定义a是互不影响的，其实，在js中，要想解决之前说的弹出相应的值得问题，可以采用如下语句：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
window.onload = function(){
var oins = document.getElementsByClassName('in');
for (var i = 0;i<oins.length;i++){
( function(i){
oins[i].onclick = function(){
alert(i);
}
})(i)
}
}
</script>
<body>
<input type="button" value="按钮1" class="in">
<input type="button" value="按钮2" class="in">
<input type="button" value="按钮3" class="in">
</body>
</html>这样就可以解决这个问题了，因为var是函数作用域，只有在不同的函数中，值才不是被覆盖，我分析了一下，之前不行是因为，在同一个函数中，循环三次，i的值就会变为3，因为2最后还会再加1嘛，所以循环最后i的值应该为3，而之前的i的值会被最后这个覆盖掉，所以理所当然弹出来的是3啦。
当然啦，在es6中let 可以很好地解决掉这个问题，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
window.onload = function(){
var oins = document.getElementsByClassName('in');
for (let i = 0;i<oins.length;i++){
oins[i].onclick = function(){
alert(i);
}
}
}
</script>
<body>
<input type="button" value="按钮1" class="in">
<input type="button" value="按钮2" class="in">
<input type="button" value="按钮3" class="in">
</body>
</html>因为let是块级作用域，一对{}相当于 一个块级，想想java中的静态代码块就很好理解这个块级作用域了。
var虽然很好用，但是其不严谨性也很高。之前在学习中并不知道var是函数级作用域，这次学习解决了之前的困扰，特地写一篇博客记录一下，虽然是个小东西，但感觉也很重要呢。
