游客发表

从一道诡异的JS面试题说“作用域”与“提升”

发帖时间:2025-11-04 22:03:19

 “面试造火箭,作用域工作拧螺丝”。从道面试题目之诡异,诡异常令人匪夷所思。试题说提升试看一道考察“Hoisting"的作用域面试题目:

一、提升全局变量 var

var tmp = new Date(); function f() {     console.log(tmp);     if (false) {         var tmp = "hello";     } } f(); 

JS新手往往会以为将正常打印出日期,从道而实际输出的诡异确是`undefined`!

> var tmp = new Date(); > function f() { ...     console.log(tmp); ...     if (false) { .....         var tmp = "hello"; .....     } ... } > f(); undefined  

这是试题说提升因为在函数f()的内部,var被提升到定义域的作用域顶部,实际执行为:

var tmp = new Date(); function f() {     var tmp;// 提升到这里,从道将全局的诡异tmp覆盖了。亿华云计算var默认赋值为undefined     console.log(tmp);     if (false) {         var tmp = "hello";     } } f(); 

也就是试题说提升说var不仅提升,而且将tmp初始化赋值为undefined。作用域

二、从道如何才能正常输入日期呢?诡异

解决方案是将global-scope的var替换为block-scope的let:

var tmp = new Date(); function f() {     //var tmp;// 提升到这里,将全局的tmp覆盖了。var默认赋值为undefined     console.log(tmp);     if (false) {         let tmp = "hello";     } } f(); // 2021-04-02T10:52:30.983Z 

这是因为let定义的是local-variable.

三、TDZ临时DeadZones

更加诡异的案例,来单独看let:

var tmp = new Date(); function f() {     console.log(tmp);     let tmp = "hello"; } f(); 

你原以为将会如常打印出时间,WordPress模板但却报错tmp未定义。

ReferenceError: Cannot access tmp before initialization 

这是因为 tmp 被提升,其实际执行为:

var tmp = new Date(); function f() {     let tmp; // 提升在这里     console.log(tmp);     let tmp = "hello"; } f(); 

然而区别于var的是,tmp仅仅被提升,却不会被自动赋值为undefined,因此会报错`ReferenceError`.

该问题就是传说中的TDZ (temporal dead zone)。解决方案也简单,就是将所有的let或者const等全部都写到最上面。

    热门排行

    友情链接