JS中使用var来声明
1、变量作用域:变量在什么范围内是可用的
2、没有块级作用域引起的问题
3、变量提升
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
//变量提升
var a = 99;// 全局变量a
func();// f是函数,虽然定义在调用的后面,但是函数声明会提升到作用域的顶部。
console.log(a);// a=>99, 此时是全局变量的a
function func() {
console.log(a);// 当前的a变量是下面变量a声明提升后,默认值undefined
var a = 10;
console.log(a); // a => 10
}
//没有块级作用域引起的问题
var btns = document.getElementsByTagName('button');
for(var i = 0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log('点击了第'+i+'个按钮');
});//点击任意一个按钮,打印都是“点击了第5个按钮”
//用闭包解决这个问题,因为函数有作用域
(function(j){
btns[i].addEventListener('click',function(){
console.log('点击了第'+j+'个按钮');
});
})(i);
}
</script>
</body>
ES6 let中加入了if和for的块级作用域
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script type="text/javascript" src="./js/vue.js"></script>
<script type="text/javascript">
const btns = document.getElementsByTagName('button');
for(let i = 0;i<btns.length;i++){
btns[i].addEventListener('click',function(){
console.log('点击了第'+i+'个按钮');
});//点击任意一个按钮,打印都是“点击了第5个按钮”
}
</script>
</body>