ES6之var和let的区别

今天学ES6,所谓ES6,就是ECMAScript 6

ECMA是一个制定规范的组织,开发javascript的网景公司将javaScript交给ECMA制定规范,从此以后,javaSCript的功能就按照这个规范实现

那么我们以前学的js都是用var定义,ES6改成了用let,他俩有啥区别呢

一、Let 没有变量提升

1.啥叫变量提升?

我们知道变量如果没定义就输出的话,就会报错not defined

image.png

如果是在定义语句的上面调用的话,就会输出undefined,为啥嘞?

image.png

这种情况就叫做变量提升,在定义语句上面调用变量的话,会假设在调用语句上面加了一句定义而未值的语句

image.png

当然我们知道,如果定义一个变量但没给他赋值的话,就会得到undefined,so,变量提升的结果就是undefined

对于var 而言,变量提升不只限于定义变量的时候,定义函数的时候也支持变量提升

我们知道有两种定义函数的方式,一种是用function关键字声明定义,一种是函数直接量的方式,第一种方式,你随便在哪调用都行,可以在定义之前调用。第二种方式的话,你就不能在定义之前调用,会报错说函数未定义,输出那个变量的话就是undefined,原理就是变量提升

image.png
image.png

2.let没有变量提升,是啥意思呢

image.png

没错,没有变量提升的let,如果你在定义它之前输出它的话,就会报错了

二、Let不允许重复声明

var 可以重复声明,很随意

image.png

but,let不行

image.png

let不能重新声明一个变量,记住是声明,不是赋值,可以重新赋值因为他是变量

image.png

三、Let有暂时性死区 (临时失效区)

1.啥是暂时性死区

正常情况下,当在函数外定义变量,而函数里却要用到这个变量,那么函数外定义的全局变量是可以进到函数里的,换句话说就是在一个函数里要用到某个变量,但是在函数里找不到函数的定义,那么他就向上找他的父元素里有没有变量的定义,如下图所示

如果在中间加一行var定义的变量呢?

image.png

上图中为啥不是5嘞?难道函数外定义的全局变量没进来么?不!他能进来,但是呢,是这样的,当在函数里定义一个局部变量和外部定义一个全局变量的时候,局部要优于全局,所以,函数b就采用函数里面的定义,因为var的变量提升嘛,所以第一个就是undefined了

image.png

不是说let不能重新声明嘛?那为啥上图没报错嘞?嗯,这就是let的暂时性死区,就是let在他的的的当前作用域范围内,不允许其他同名变量进来

so,因为临时性锁区,所以外面那个同名的a没进来,所以输出10

那要是上面加个输出语句呢?当然,let是不可能变量提升的,所以,会报错

image.png

综上,不管你在外面使用var还是用let定义的变量,他都能进到函数里,只不过呢,要看函数里面是否定义变量了,当再函数外定义全局变量和在函数里定义局部变量,当然是局部变量优先了,所以在函数里用var定义的话,就会变量提升,输出undefined,而用let定义的话,就会报错,因为let不会变量提升,外面的同名a又不让进来,所以呢,就会 not defined

四、Let有块级作用域

以前,只有在函数里有作用域(函数外的用不了函数里的),除了函数外,其他的如for循环啊什么的虽然带括号,也没有作用域,所以循环外的i=5

image.png

但是let有块级作用域,不光在函数里有,在循环里也有,所以,会报错i未定义

image.png

image.png

let的块级作用域,一对括号,就像一座山将两个人分开,在山里我们都认识,出了山就谁也不认谁了

总结一下

image.png

猜你喜欢

转载自blog.csdn.net/xuehangongzi/article/details/80660040