JS：变量提升与临时性死区TDZ

一、解析过程

js运行前会有编译解析过程，有些错误会在编译过程中被发现。

<body><script>var web = 'yooo';console.log(web);var class = 'alison';</script>
</body>

二、变量提升

<body><script>console.log(web);var web = 'yooo';</script>
</body>

为什么不会报错？

因为在解析阶段进行了变量提升，变量初始化=定义+赋值，浏览器将定义部分提升到了console.log之上。即变量可以在定义之前使用，值为undefined。上面代码相当于如下。

<body><script>var web;console.log(web);web = 'yooo';</script>
</body>

再举一个函数的例子

<body><script>function hd() {if (false) {var web = 'yooo';}console.log(web);}hd();</script>
</body>

依旧不会报错，道理同上，上面代码相当于如下。

<body><script>function hd() {var web;if (false) {web = 'yooo';}console.log(web);}hd();</script>
</body>

但这是js一个不好的习惯，会包容很多缺点，导致实际与预期不符。

如何克服？使用let/const初始化变量

三、let&const暂时性死区TDZ

将var声明改成let/const后，变量提升消失，控制台报错。

<body><script>console.log(web);let web = 'yooo';</script>
</body>

<body><script>console.log(web);const web = 'yooo';</script>
</body>

为什么会报错？

因为在let/const声明变量之前使用该变量，会产生一个暂时性死区TDZ，必须在声明之后才能使用。

再举一个函数的例子

<body><script>let web = 'yooo';function func() {console.log(web);let web = 'yoo';}func();</script>
</body>

为什么报错？

当函数体内未定义变量web，则去函数体外找；若在函数体内定义了web变量，则必须在执行语句前定义。

即因为在块级作用域内有let/const定义了局部变量web，该块级作用域形成封闭，之前let声明的全局变量web就不起作用了。

再举一个函数参数的例子

<body><script>function run(a = b, b = 3) { }run();</script>
</body>

为什么报错？

因为给a赋值b时，b未进行变量初始化，因此产生了一个临时性死区TDZ

如下则不会报错。

<body><script>function run(a = 3, b = a) { }run();</script>
</body>

JS：变量提升与临时性死区TDZ相关推荐

【学习总结】JS变量提升
JS的执行机制:先编译,再执行. JS变量提升:指在JS代码的编译阶段,JS引擎会把变量的声明部分和函数的声明部分提升到代码开头的"行为".变量被提升后会给变量设置默认值undef ...
JS---对var,let变量提升和暂时性死区（TDZ）的理解
一.var和let声明的变量所属作用域不同 var声明的变量属于函数作用域,而let声明的变量属于块级作用域二.var和let声明的变量所属作用域不同,相应的变量提升也不同 var声明的变量在函数 ...
let/const 的变量提升与暂时性死区
从一道面试题说起请说出 let,const,var 的区别大部分的回答是这样的,甚至很多博客中的答案也是这样的: let/const 提供了块级作用域 let 不能重复定义 var 有变量提升,l ...
js变量提升_学习笔记：JS中的作用域和预解析
知识总结:谢静贤.汤昊在javascript中作用域是非常重要的,本文将会说明作用域以及我们在工作,以及面试中的一些面试题,如果有不足的地方希望大家可以评论指出来,自己一定会及时的改正错误,避免大家 ...
js 变量提升函数提升作用域
再说这个知识点前,我们先了解下javascript语言的本质.简单来说js是一个脚本语言,是介于标记语言(例html中使用的标签<.. /> 等是一种被动的,被用来浏览\显示的,无行动能力 ...
Javascript变量提升与暂时性死区
暂时性死区:在ES6之前,使用 typeof 运算符操作一个未声明的变量时,不会报错,该变量的值以 undefined 作处理.而在ES6之后,使用ES6的变量声明方法(let, const, cla ...
JS变量提升和函数提升的顺序
1.变量的提升: 变量名会提升到 '当前作用域' 顶部,此时该变量为undefined,未赋值,赋值是在js原位置. console.log(a); // undefined var a = 10 c ...
什么是js变量提升？
前言变量提升实际上很容易理解,就是说在任何位置所声明的变量或函数,都会自动"提"到最前面,就好像它们是在函数的开头声明的一样,我们来看一下具体的代码: //在正常的情况下我们声明 ...
js变量提升hoisting
作用域(Scoping) 什么是作用域? 我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部不能访问内部变量,但内部可以访问外部变量. c语言的变量分为全 ...

JS：变量提升与临时性死区TDZ

一、解析过程

二、变量提升

三、let&const暂时性死区TDZ

JS：变量提升与临时性死区TDZ相关推荐

最新文章

热门文章