var 声明变量的变量提升问题(let/const)
在ES6之前,JavaScript没有块级作用域(一对花括号{}即为一个块级作用域),只有全局作用域和函数作用域。变量提升即将变量声明提升到它所在作用域的最开始的部分。既全局变量.
<script>
let a=[]; #console.log(i)//undifined
for(var i=0;i<5;i++){
a[i]=function () {
console.log(i)
}
}
a[2]();//5 此时i是全局变量,会先声明变量i,然后for循环赋值 let f=[];
for(let i=0;i<5;i++){
f[i]=function () {
console.log(i)
}
}
f[2]();//2
//let 和 const 声明变量1.都不存在变量提升,2.局部作用域,3.变量不能重复声明
// console.log(b); #报错
{
const b=5;
// b++;
//const 同let,并且只能声明常量(不可变的量),且不能做修改,
} </script>
需求:鼠标放到上面的li上,li本身变色,对应的p也显示出来
思路:1.点亮上面的盒子。 2.利用索引值显示下面的盒子。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
ul{
width: 100%;
overflow: hidden;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #cccccc;
} ul li a{
text-decoration: none;
color:black;
}
li.active{
background-color: red;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
p.active{
display: block; } </style>
</head>
<body>
<div id="tab">
<ul>
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">新闻</a>
</li>
<li>
<a href="#">图片</a>
</li>
</ul>
<p class="active">首页内容</p>
<p>新闻内容</p>
<p>图片内容</p>
</div>
</body> <script>
var obtns=document.getElementsByTagName('li');
var op=document.getElementsByTagName('p');
for(var i=0; i<obtns.length;i++){ //因为i是全局变量,导致最后(遍历绑定所有事件后)i的值是3.
obtns[i].index=i; //绑定索引值(新增一个自定义变量:index属性)
obtns[i].onclick=function(){
for(var j=0;j<obtns.length;j++){ //走到这证明已经触发了事件,i此时的值已经是3了
obtns[j].className='';
op[j].className='';
}
this.className='active'; //所以可以用this(事件源自身,和self一样)
//op[i].className='active'; 会报错.因为此时i的值也是3,所以可以通过绑定索引来来获取对应的索引值,this.index
op[this.index].className='active'; //此时才不会报错
}
}
</script>
</html>
方式2
可用es6的let替换掉var ,则声明的变量不会存在变量提升,属于局部作用域.上面的绑定索引步骤就可以省略了.
var 声明变量的变量提升问题(let/const)的更多相关文章
- var声明的成员变量和函数内声明的变量区别
1.函数内部,有var声明的是局部变量,没var的,声明的全局变量. 2.在全局作用域内声明变量时,有var 和没var声明的都是全局变量,是window的属性.通过变量var声明全局对象的属性无法通 ...
- “没有用var声明的为全局变量”这种说法不准确
结论: “没有用var声明的变量为全局变量”这样的说法不太正确,需要在这句话前面加一个前提,如果①变量前面没有用var声明,②在变量所在在的作用域链中没有这个变量名称,则设置该变量为全局变量. 代码 ...
- var声明提前 undefined
1.同一代码块内,所有var声明都提前: 2.var 变量的初始化不提前,按顺序执行: 3."undefined"和undefined都存在于window中: 4.if(" ...
- JS中的函数声明和函数表达式的区别,即function(){}和var function(){},以及变量提升、作用域和作用域链
一.前言 Uncaught TypeError: ... is not a function function max(){}表示函数声明,可以放在代码的任何位置,也可以在任何地方成功调用: var ...
- 使用var声明的变量 和 直接赋值并未声明的变量的区别
在看JS高级程序设计时忽然想到这个问题,众所周知,直接赋值一个变量而为声明,会产生一个全局变量(或者说是全局对象的属性),但用var声明的变量 和 直接赋值而并未声明的变量 都有哪些区别呢,这是我在百 ...
- es6中的let声明变量与es5中的var声明变量的区别,局部变量与全局变量
自己通过看typescript官方文档里的let声明,与阮一峰老师翻译的的es6学习文档,总结以下三点 1.var声明可以多次重复声明同一个变量,let不行 2.let变量只在块级作用域里面有效果,v ...
- JS变量重复声明以及忽略var 声明的问题及其背后的原理
腾讯的一个笔试题,先看一下 var a = 100; function fn() { alert(a); //undefined var a = 200; alert(a); //200 } fn() ...
- 【repost】 JS变量重复声明以及忽略var 声明的问题及其背后的原理
JS的容错率很高,一些其他语言常见的小错误JS都能大度得包容,比如给一个方法传入超出预计的参数.在声明变量之前使用该变量(变量的声明提升解决了这个问题)等等,这里我们就要解剖一下JS变量重复声明以及当 ...
- JavaScript 中定义变量时有无var声明的区别
关于JavaScript中定义变量时有无var声明的区别 var a=5; //正确 a=5; //正确 在javascript中,以上两种方法都是定义变量的正确方法.微软的Script56.CHM中 ...
- ES6的let和var声明变量的区别
关于let的描述 let允许你声明一个作用域被限制在块级中的变量.语句或者表达式.与var关键字不同的是,它声明的变量只能是全局或者整个函数块的. 作用域规则 let声明的变量只在其声明的块或子块中可 ...
随机推荐
- HDU 2110 Crisis of HDU
Crisis of HDU Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) To ...
- gdb 初步学习记录
客户有一段代码,一个死循环, 里面就一个 times(NULL) 函数,以及一个usleep, 运行了10分钟左右就会出现段错误. 现在用 gdb 调试看一下是哪一步出现了问题. 在Linux 虚拟机 ...
- HTML5 + AJAX ( jQuery版本 ) 文件上传带进度条
页面技术:HTML5 + AJAX ( jQuery) 后台技术:Servlet 3.0 服务器:Tomcat 7.0 jQuery版本:1.9.1 Servlet 3.0 代码 package or ...
- 框架Iframe的退出,IE 火狐都没问题 到360就不跳转页面 刷新一遍才跳转到登录页
遇到这种情况 ,郁闷死了,来回折腾好几种跳转方法,最后有一个灵感,当我点击退出按钮的时候,我是用jquery $("#ID").click(function(){}) 这种方法异步 ...
- 微信小程序 - WapRequest.js
文件位于 utils/WapRequest.js 封装了所有接口请求和wap站点的controller请求,代码示例 /** * 选择 洲 国家 * 无参数 */ WapRequest.prototy ...
- 9款很酷炫jQuery/HTML5特效应用 有源码哦~
目前最流行的网页特效应用当属jQuery和HTML5的特效应用了,它们可以帮你快速实现网页中的各种特效设计.本文就为了收集了9款非常酷炫的jQuery/HTML5特效应用,可以很方便的 ...
- 判断gridView是否有数据
我这里的gridView是采用空模板数据来显示的 当gridView的数据源为空的时候它们就会显示标题 有数据的显示它们就会显示下面的这种 你仔细观察会发现,当有数据的时候空标题的table没有了,解 ...
- svn & git 问题汇总
svn: warning: W150002: '/Users/piercalex/svn/azzz/1' is already under version control svn: E200009: ...
- 正向工程、逆向工程与MDA
正向工程.逆向工程与MDA 正向工程:从UML图形生成代码: 逆向工程:从代码和成UML图形: //不要依赖于正向或逆向工程,仅是一种辅助手段.画图的目的不是为了生成代码:而写代码的目的也不是为了生成 ...
- QWidget切换
QWidget切换,参考类:QstackedLayout,QStackedWidget,QTabWidget 一.Tab出现的位置 tabWidget.setTabPosition(QTabWidge ...