JavaScript 变量声明提升

JavaScript 变量声明提升

原文链接

一个小例子

先来看个例子:

console.log(a);    // undefined
var a = 2;
console.log(a);    // 2

为什么是这样的结果呢?这是因为 JavaScript 代码在执行之前会有一个 预解析 阶段,在这个阶段,解释器会将所有 变量声明函数声明 提升到他们各自的作用域顶部。

注:变量声明提升只是预解析阶段的一部分行为!

如果变量在函数体内声明,它的作用域是函数作用域(function-level scope)。否则,它就是全局作用域。

继续上面的例子,因为这个预解析阶段,上面的代码会被解释器预解析成下面的代码:

var a;
console.log(a);    // undefined
a = 2;
console.log(a);    // 2

变量的声明

在 ES6 之前,通常通过 var 来声明一个变量,但是 ES6 发布后,又新添了2个关键字来声明一个变量:letconst

  • var 声明了一个变量,这个变量的作用域是当前执行位置的上下文:一个函数的内部(声明在函数内)或者全局(声明在函数外)

  • let 声明了一个块级域的局部变量,并且它声明的变量只在所在的代码块内有效

  • const 声明了一个只读的块级域的常量,并且它声明的常量也只在所在的代码块内有效

{ // 代码块
  var a = 1;
  let b = 2;
  const c = 3;
  
  console.log(a);   // 1
  console.log(b);   // 2
  console.log(c);   // 3
}

console.log(a);   // 1
console.log(b);   // 报错,ReferenceError: b is not defined(…)
console.log(c);   // 未执行, 因为上面语句出错,所以这条语句不再执行,如果上面的语句不报错,那么这里就会报错
(function (){
  var a = 1;
  let b = 2;
  const c = 3;
  
  console.log(a);   // 1
  console.log(b);   // 2
  console.log(c);   // 3
})();   // 为了方便,这里使用了自执行函数

console.log(a);   // 报错,ReferenceError: a is not defined(…)
console.log(b);   // 未执行
console.log(c);   // 未执行
  • let const 不像 var 那样会发生“变量提升”现象。

console.log(a);    // 报错,ReferenceError: a is not defined
let a = 2;
console.log(a);    // 待执行
console.log(a);    // 报错,ReferenceError: a is not defined
const a = 2;
console.log(a);    // 待执行

ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

变量声明提升(Variable hoisting)

提升(hoisting)影响了变量的生命周期,一个变量的生命周期包含3个阶段:

  • 声明 - 创建一个新变量,例如 var myValue

  • 初始化 - 用一个值初始化变量 例如 myValue = 150

  • 使用 - 使用变量的值 例如 alert(myValue)

当代码按照这三个步骤的顺序执行的时候,一切看起来都很简单,自然。

  • 变量提升的部分只是变量的声明,赋值语句和可执行的代码逻辑还保持在原地不动

console.log(a);     // undefined
var a = 111;
function fun(){
  console.log(a);   // undefined
  var a = 222;
  console.log(a);   // 222
}
fun();
console.log(a);     // 111

// --------------
//变量提升后

function fun(){
  var a;
  console.log(a);   // undefined
  a = 222;
  console.log(a);   // 222
}
var a;
console.log(a);     // undefined
a = 111;
fun();
console.log(a);     // 111
  • 在基本的语句(或者说代码块)中(比如:if语句for语句while语句switch语句for...in语句等),不存在变量声明提升

var a = "aaa";
{
  console.log(a);       // aaa
  var a = "bbb";
}
console.log(a);         // bbb

//---------------

var a = "aaa";
if (true) {
  console.log(a);       // aaa
  var a = "bbb";
}
console.log(a);         // bbb

//---------------

var a = "aaa";
for(let x in window){
  console.log(a);       // aaa
  var a = "bbb";
  break;
}
console.log(a);         // bbb

函数声明提升(Function Hoisting)

函数声明(function declarations) 和 函数表达式(function expressions)在语法上其实是等价的,但是有一点不同,就是 JavaScript 引擎 加载他们的方式不一样。简单讲,就是函数声明会被提升到其作用域顶部,而函数表达式不会。

更多细节

  • 函数声明会提升,但是函数表达式的函数体就不会提升了

fun();       // hello 

function fun(){
  console.log("hello");
}

// --------------
// 提升后

function fun(){
  console.log("hello");
}

fun();       // hello 
fun();       // 报错,TypeError: fun is not a function

var fun = function(){
  console.log("hello");
};

// --------------
// 提升后

var fun;

fun();        // 报错,TypeError: fun is not a function

fun = function(){
  console.log("hello");
};

当函数表达式的函数不再是匿名函数,而是一个有函数名的函数时,会发生什么?

foo();  // 报错,TypeError "foo is not a function"
bar();  // 有效的
baz();  // 报错,TypeError "baz is not a function"
spam(); // 报错,ReferenceError "spam is not defined"

// anonymous function expression ('foo' gets hoisted)
var foo = function () {};     

// function declaration ('bar' and the function body get hoisted)
function bar() {}; 

// named function expression (only 'baz' gets hoisted)
var baz = function spam() {}; 

foo(); // 有效的
bar(); // 有效的
baz(); // 有效的
spam(); // 报错,ReferenceError "spam is not defined"
  • 如果一个变量和函数同名,函数声明优先于变量声明(毕竟函数是 JavaScript 的第一等公民),并且与函数名同名的变量声明将会被忽略。

fun();    // 输出的结果为111
function fun(){
  console.log(111);
}
var fun = function(){
  console.log(222);
}
fun();    // 输出的结果为222 

// --------------
// 提升后

function fun(){
  console.log(111);
}
fun();    // 输出的结果为111
fun = function(){       // 重新定义了变量 fun
  console.log(222);
}
fun();    // 输出的结果为222 
  • 如果定义了相同的函数变量声明,后定义的声明会覆盖掉先前的声明,看如下代码:

foo();    //输出3
function foo(){
  console.log(1);
}
var foo = function(){
  console.log(2);
}  
function foo(){
  console.log(3);
} 

练习

  • alert(foo) 的值是多少?

var foo = 1;
function bar() {
    if (!foo) {
        var foo = 10;
    }
    alert(foo); // ?
}
bar();
  • alert(a) 的值是多少?

var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
alert(a);  // ?

第二题的解析请看 这里

参考资料


percy507的编程之路
自2016年加入社区后,陆陆续续发布过一些文章,后面也自己折腾过个人博客(hexo+github)。但是自2018年...
1 篇内容引用

主修前端,

962 声望
54 粉丝
0 条评论
推荐阅读
使用vite搭个中后台系统的脚手架
搭个中后台系统的脚手架仓库地址 [链接]搭建脚手架目的学习 vite、recoil 等新技术封装项目中常用的较复杂的组件学习一定的前端架构能力构建命令npm 与 yarn 对新版 husky(v7.0.1+)的配置方式不太相同,我们这...

percy5072阅读 3.2k

封面图
正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 8.4k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy48阅读 6.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木75阅读 7k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.8k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木45阅读 8.5k评论 6

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木35阅读 6.6k评论 10

主修前端,

962 声望
54 粉丝
宣传栏