前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2020-1-9-为什么JavaScript需要hoisting

2020-1-9-为什么JavaScript需要hoisting

作者头像
黄腾霄
发布2020-06-10 15:07:30
6990
发布2020-06-10 15:07:30
举报
文章被收录于专栏:黄腾霄的博客

不知道同学们在学习JavaScript时,有没有对JavaScript的“提升”(hoisting)这个概念感到困惑。


什么是“提升”(hoisting)

我们提到hoisting的时候专指JavaScript中的一种场景:

对JavaScript的编译期间,文件中的函数,var定义的变量等的声明会被提升至命名空间(scope)的最上层。

这也就意味着,在JavaScript中,即使你的变量先初始化,再声明,也不会出现bug

代码语言:javascript
复制
x="黄腾霄好瘦";
var x;
console.log(x);

同样的函数也能够提升,例如

代码语言:javascript
复制
function a(n){
    if(n===){
        b();
        return;
    }
    console.log(n);
    a(n-);
}
a();
function b(){
    console.log("finish");
}

为什么需要提升(Why hoisting)

这个问题应该分成两部分,为什么需要函数提升和为什么需要变量提升

函数提升

首先根据BrendanEich(JavaScript创建者)在Twitter上的留言

函数提升是为了解决函数多重递归调用的问题。

例如对于上面的例子如果没有提升,调用方法a的时候就会发现内部的方法b未定义,出现异常。

或者执行过程中就会出现各种类型的跳转问题。

变量提升

var 的变量提升,就不像函数提升那样优雅了。

例如下面的代码,x在声明之前使用,出现了undefined的输出。

而由于var变量提升,这个代码不会报任何异常,直到业务出现问题。

代码语言:javascript
复制
console.log(x);
var x;
x="黄腾霄好瘦";
console.log(x);

所以现在ES6也不推荐使用var

那么为什么当初要设计这个var 的变量提升呢?

同样是BrendanEich在Twitter留言,这个设计是一个“implementation artifact”,是之前在jsvm上出现的设计问题。但是这个问题流出过久,而且拯救了许多同学的bug,所以也就遗留了下来。

如何替代变量提升

很简单,使用新的关键字let去代替变量var

let强制要求在scope内先定义,再使用。

所以执行如下的代码会出现,编译时异常。

这样就能够帮助大家提前发现问题。


参考文档:


本文会经常更新,请阅读原文: https://xinyuehtx.github.io/post/%E4%B8%BA%E4%BB%80%E4%B9%88JavaScript%E9%9C%80%E8%A6%81hoisting.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。欢迎转载、使用、重新发布,但务必保留文章署名黄腾霄(包含链接: https://xinyuehtx.github.io ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请 与我联系

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-01-09 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 什么是“提升”(hoisting)
  • 为什么需要提升(Why hoisting)
    • 函数提升
      • 变量提升
      • 如何替代变量提升
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档