壹影博客.
我在下午4点钟开始想你
ES6新特性-块级绑定
  • 2024-1-13日
  • 5评论
  • 1271围观

ES6新特性-块级绑定

简述:块级绑定是指将变量与块级进行绑定,由此ES6提供了 两个关键字来申明变量 let、const 并且与块级进行绑定

下面我们就来看看ES6为什么要新增let、const关键字

var声明变量存在的问题

在es6以前都是用var进行变量申明的,他存在如下问题

//问题1:允许重复的变量声明:导致数据被覆盖
//问题2:变量提升:怪异的数据访问、闭包问题
//问题3:全局变量挂载到全局对象:全局对象成员污染问题


var name = "小明";
function print(){
  console.log(name) //输出:小红
}

//这里有很多代码

var name = "小红" 
print() //执行print函数

console.log(window.name)//输出:小红
1.关于重复申明变量 变量被覆盖的问题:有一些变量名实在太常用了,如果先声明name 后期在开发的过程中我们可能会对这个变量进行重复的申明 变量被调用时的值是不稳定的

2.关于变量提升的问题:①设计逻辑的缺陷


//如下代码是不报错的
if(false){
  var a="abc"
  console.log(a)
}else{
  console.log(a) //输出undefined
}

//ES官方认为在else 中输出a 应该报错 应该找不到该变量的存在
//但实际上 var将变量进行提升 会解析成如下代码执行

var a;
if(false){
  a="abc"
  console.log(a)
}else{
  console.log(a) //输出undefined
}

②闭包问题

//在页面创建 10个按钮

for (var i = 1; i <=10; i++) {
    var btn=document.createElement("button");
    btn.innerHTML="按钮"+i;
    document.body.appendChild(btn);
    btn.onclick=function (){
        console.log(i) //输出11
    }
}

//当点击任何一个按钮时都会输出11
//这个bug问题 是因为 变量用var取绑定了i的值 浏览器解析成如下代码执行

var i;
for (i = 1; i <=10; i++) {
    var btn=document.createElement("button");
    btn.innerHTML="按钮"+i;
    document.body.appendChild(btn);
    btn.onclick=function (){
        console.log(i) //输出11
    }
}

//此时第一个i和最后一个i实际上是一个变量
//当循环完毕后 这个i变成了11 无论点击哪一个按钮都是11

3.关于全局变量污染的问题:全局变量挂载到全局对象造成全局污染

// 大家都知道 浏览器环境 window对象里面有一个console
//console对象用于控制台打印

//但是我们可以声明var变量 将window对象默认的console对象替换
var console = 100

console.log(console) 
//报错console.log is not a function


//最终导致报错,这种替换ES官方认为是不利于开发的,但是如果你想用于hook一些内置的函数是用这种方法是可以的

ES6的解决方案

引入let 和 const 关键字

1.let的特点

★let声明的变量不会挂载到全局对象

★let声明的变量,不允许当前作用域范围内重复声明在块级作用域中用let定义的变量,在作用域外不能访问

★底层实现上,let声明的变量实际上也会有提升,但是,提升后会将其放入到“暂时性死区”,如果访问的变量位于暂时性死区,则会报错:“Cannot access 'a' before initialization”。当代码运行到该变量的声明语句时,会将其从暂时性死区中移除。

★在循环中使用let声明的循环变量,在循环结束后会销毁

let name = "张三" //不会挂在到window对象上
console.log(window.name)


//在循环中 let绑定了每一次循环的块级 即{...}
//所以每一次循环体中 的i是不同的值
for (let i = 1; i <=10; i++) {
    var btn=document.createElement("button");
    btn.innerHTML="按钮"+i;
    document.body.appendChild(btn);
    btn.onclick=function (){
        console.log(i) 
    }
}

2.const的特点

★const变量在声明时必须赋值。

★声明后 后续不可对这个变量进行修改 其为常量

★在for循环中,循环变量不可以使用常量

说明:常量不可变,是指声明的常量的内存空间不可变,并不保证内存空间中的地址指向的其他空间不可变。

发表评论

WilliamKaf

Lv.1 @回复 #5

[url=https://restavratsiyavann.com/mendeleyevsk/]浴缸维修[/url]

PerryBuh

Lv.1 @回复 #4

通过观看新视频轻松赚钱youtube.com https://aviso.bz/?r=filosof20063

SteveaBili

Lv.1 @回复 地板

向新力運動彩券行



https://1688bet.tw/

AlexisVar

Lv.1 @回复 板凳

冠天下


https://xn--ghq10gmvi.com/

Rodneycer

Lv.1 @回复 沙发

滿天星娛樂城



https://star168.tw/