潍坊网站定制模板建站,做网站标题头像,山网站建设,微信营销典型案例文章目录 一.变量提升(声)二.let和var的区别 区别#xff1a; 1、var有变量提升#xff0c;而let没有#xff1b; 2、let不允许在相同的作用域下重复声明#xff0c;而var允许#xff1b; 3、let没有暂时性死区问题#xff1b; 4、let创建的全局变量没有给window设置对应… 文章目录 一.变量提升(声)二.let和var的区别 区别 1、var有变量提升而let没有 2、let不允许在相同的作用域下重复声明而var允许 3、let没有暂时性死区问题 4、let创建的全局变量没有给window设置对应的属性 5、let会产生块级作用域var不会。
想要了解varES5和letES6区别首先就要了解ES5下JS的变量提升
一.变量提升(声)
当浏览器开辟出供代码执行的栈内存后代码并没有自上而下立即执行而是继续做了一些事情把当前作用域中所有带var/function关键字的进行提前的声明和定义 变量提升机制
带var的只是提前声明(declare) var a;如果只声明没有赋值默认值是undefined 例如
console.log(a);
var a 13;输出undefined 相当于
var a; // 只声明没有赋值默认为undefined
console.log(a);
a 13;带function的不仅声明而且还定义了defined准确来说就是让变量和某个值进行关联。
二.let和var的区别
1. let和const 不存在变量提升机制. 创建变量的六种方式中var/function有变量提升而let/const/class/import都不存在这个机制
2. var允许重复声明而let不允许重复声明. 在相同的作用域或执行上下文中 如果使用var/function关键词声明变量并且重复声明是不会有影响的声明第一次之后之后再遇到就不会再重复声明了 但使用let/const就不行浏览器会校验当前作用域中是否已经存在这个变量了如果已经存在了则再次基于let等重新声明就会报错 在浏览器开辟栈内存供代码自上而下执行之前不仅有变量提升的操作还有很多其他的操作 “词法解析”或者“词法检测”就是检测当前即将要执行的代码是否会出现“语法错误 SyntaxError”如果出现错误代码将不会再执行第一行都不会执行 console.log(1) // 这行代码就已经不会执行了
let a 12
console.log(a)
let a 13 // 此行出错SyntaxError: Identifier #39;a#39; has already been declared
console.log(a)所谓重复就是不管之前通过什么方法只要当前栈内存中存在了这个变量我们使用let/const等重复再声明这个变量就是语法错误。
console.log(a)
var a 12
let a 13 // SyntaxError: Identifier #39;a#39; has already been declared
console.log(a)console.log(a)
let a 13
var a 12 // SyntaxError: Identifier #39;a#39; has already been declared
console.log(a)3. let能解决typeof检测时出现的暂时性死区问题let比var更严谨
console.log(a)
// ReferenceError: a is not definedtypeof a 未报错
console.log(typeof a)
// #39;undefined#39; 这是浏览器的bug本应报错因为没有a暂时性死区使用let后
console.log(typeof a)
// ReferenceError: Cannot access #39;a#39; before initialization
let a返回不能在a被定义之前使用它解决暂时性死区问题。
4. let创建的全局变量没有给window设置对应的属性 首先看带var与不带var创建全局变量时的区别
/** 不带var的相当于给全局对象window设置了一个属性a* window.a 13*/
a 13
console.log(a) // window.a 13
/** 栈内存变量存储空间* b* 带var的是在全局作用域下声明了一个变量b全局变量* 但是在全局下声明的变量也相当于给全局对象window增加了一个对应的* 属性b只有全局作用域具备这个特点*/
var b 14
console.log(b)
console.log(window.b)使用let创建时
/** 栈内存变量存储空间* c* 带let的仅仅在全局作用域下声明了一个变量b全局变量* 并未给全局对象window增加对应的属性c*/
let c 15
console.log(c) // 15
console.log(window.c) // undefined5. let会产生块级作用域 下面代码能否实现点击某个按钮body的背景色改为按钮对应的颜色若不能如何改进腾讯
!DOCTYPE html
html
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentieedgemeta nameviewport contentwidthdevice-width, user-scalableno, initial-scale1.0style* {margin: 0;padding: 0;}html,body {height: 100%;overflow: hidden;}button {padding: 5px 10px;cursor: pointer;}/style
/headbody
!----
button valuered红/button
button valuegreen绿/button
button valueblue蓝/buttonscriptvar body document.querySelector(#39;body#39;),buttons document.querySelectorAll(#39;button#39;),arr [#39;red#39;, #39;green#39;, #39;blue#39;]for (var i 0; i buttons.length; i) {buttons[i].onclick function () {body.style.background arr[i]}}
/script
/body
/html答案当然是不能因为通过var定义的变量在for循环中的i是全局的变量提升、3次循环过后i3因为点击每个都相当于点击最后一个。
参考: javascript中var和let有什么区别
