var与let的区别
到ES6的时候,javascript中声明变量的方式有三种var、let、const
1:作用域只是局限于当前代码块
{ var str = "aaa"; console.log(str);//aaa let str1 = "dddd"; console.log(str1);//dddd } console.log(str);//aaa console.log(str1);//报错,str1 is not defined
上面代码中采用var 和 let 分别申明了变量,采用var 申明的变量在外面可已使用,但采用let申明的变量只能在当前代码块中使用,在外边是用不了。
2:使用let 申明的变量作用域不会提升,而采用var申明的会作用域提升。
采用var申明变量
//采用var 申明的变量作用域会提升 { console.log(a);//输出undefined var a = "dd"; }上面的代码经过作用域提升之后相当于下面的代码
//作用域声明提升总是会将变量的申明提升到当前作用域的最前面,如下所示 { var a; console.log(a);//因此输出为undefined a = "ddd"; }采用let申明的变量作用域不会提升,因此下面代码将会报错
{ console.log(b);//这里将会报错,因为b没有申请 let b = "SYC"; }
3:采用let在相同的作用于下面不能申明相同的变量,采用var申明相同的变量后面会覆盖当前作用域前面的
4:for循环体现父子作用域
例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> var btns = document.getElementsByTagName('button'); for(i var i = 0; i < btns.length; i ++){ btns[i].onclick = function(){ alert("按钮"+i);//这里一直是按钮4 } } </script> </body> </html>在上面每次点击都会显示最后一个按钮被点击,在alert的时候js在当前作用于下面找出i没有找到所以便向上查找,找到for循环的作用域,for循环是同步事件,里面的i=4所以一直显示的是4
通过函数闭包的形式可以实现点击不同的按钮,显示不同的数据,将上面的js代码改为如下
var btns = document.getElementsByTagName('button'); for(i var i = 0; i < btns.length; i ++){ (function(i){ btns[i].onclick = function(){ alert("按钮"+i); } })(i); }将为按钮添加的按钮的事件处理程序放到函数闭包里面,将i作为变量传入进去,函数闭包会保存当前变量。所以点击不同的按钮就会显示不同的数字。
采用let申明将会实现点击不同按钮显示不同的数字效果,将上面的js代码稍作改动,将var申明的变量采用let申明
let btns = document.getElementsByTagName('button'); for(let i = 0; i < btns.length; i ++){ btns[i].onclick = function(){ alert("按钮"+i); } }
const申明变量
const关键字用于申明常量
const申明的作用域不会被提升
cosnt只能作用于当前作用域
const申明的变量需要初始化
const申明的变量初始化后不能被修改