JavaScriptES5 使用var没有块级作用域引起的问题

没有块级作用域的问题

		es5中的var 是没有块级作用域的
		es6中的let 是有块级作用域的
		在es5之前因为if和for都没有块级作用域的概念,所以在很多是时候,我们都必须借助funciton的作用域来解决应用外面变量的问题
		在ES6中,加入了let,let是有if和for的块级作用域
var func
	if(true){
		var name = 'tbw';
		func = function(){
			console.log(name)
			}
		}
	func()
	console.log(name)

在上面的代码中,在if语句中使用var定义了一个变量 并且赋值为‘tbw’ 然后定义了一个名为func的函数 在函数内部我console输出变量name
在调用函数的时候可以访问到函数外部的变量name 然后在全局console变量name 并且也是可以输出出来 因为if没有块级作用域的概念

if在ES5之前是没有块级作用域的概念,name我们来看看for

		<button type="button">按钮1</button>
		<button type="button">按钮2</button>
		<button type="button">按钮3</button>
		<button type="button">按钮4</button>
		<button type="button">按钮5</button>
		<script>
		var btns = document.getElementsByTagName('button')
			for(var i = 0;i<btns.length;i++){
				btns[i].onclick = function(){
					console.log('第' + i + '个被点击')
				}
			}
		</script>

我们先写五个按钮 然后利用for循环给他们每个注册点击事件 在单击以后,你会发现不管单击的哪一个按钮 他都会打印出 第5个被点击
因为单击相应的那个函数可以访问到外面的i 当他访问的时候 函数内的i=0 但是他没有块级作用域 改为了外面的i 外面的i已经循环了5次,所以函数内的i也改为了5,所以,并不能做到点击那个那个的索引值被打印出来
解决这个问题 我们一般采用闭包的形式

 var btns = document.getElementsByTagName('button')
	 for(var i = 0;i<btns.length;i++){
			(function(i){
		 		btns[i].onclick = function(){
	 				console.log('第' + i + '个被点击')
		 		}
		 	})(i)
		}

为什么闭包可以解决这个问题? 因为函数是一个作用域 在这个函数立即执行的时候 他的参数i已经被传递进去并且保存为0,保存后因为他本身是作用域,所以外面如果想改掉这个i是改不掉的 你改循环里面的i的时候 对立即执行中的i不会产生任何影响

在ES6中,加入了let,let是有if和for的块级作用域

let btns = document.getElementsByTagName('button')
			for(let i = 0;i<btns.length;i++){
				btns[i].onclick = function(){
					console.log('第' + i + '个被点击')
				}
			}

如果用let声明i {
btns[i].onclick = function(){
console.log(‘第’ + i + ‘个被点击’)
}
}
这个大括号的有了自己的作用域 意味这这段代码 的i是属于自己的i 第一次for循环执行大括号里面的内容 把0传给了大括号里面的i 传过去之后 大括号里面的i是改不掉的 意味着 大括号中的代码会执行5次

				{
					i = 0
					btns[i].onclick = function(){
						console.log('第' + i + '个被点击')
					}
				}
				{
					i = 1
					btns[i].onclick = function(){
						console.log('第' + i + '个被点击')
					}
				}
				{
					i = 2
					btns[i].onclick = function(){
						console.log('第' + i + '个被点击')
					}
				}
				{
					i = 3
					btns[i].onclick = function(){
						console.log('第' + i + '个被点击')
					}
				}
				{
					i = 4
					btns[i].onclick = function(){
						console.log('第' + i + '个被点击')
					}
				}
发布了9 篇原创文章 · 获赞 1 · 访问量 193
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览