首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确。因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升(Hoisting)。

JS 存在变量提升( Hoisting ),这个的设计其实是低劣的,它允许变量 不声明就可以访问 , 或声明在后使用在前 。新手对于此则很迷惑,甚至许多使用JS多年老手也比较迷惑。但在 ES6 加入 let/const 后,变量Hoisting 就不存在了。

一、 变量未声明,直接使用

function test() {
alert(notDefined);
}
test(); // ?

报错是自然的

二. 变量声明在末尾

function test() {
alert(declaredButNotAssigned); // undefined
var declaredButNotAssigned;
}
test();

输出 undefined, 结果比上例好一些,没有报错,代码可以运行,但变量值可能不是程序员所期望的。

三、 变量声明在末尾,同时给变量赋值

function test() {
alert(declaredAndAssigned); // undefined
var declaredAndAssigned = 1;
}
test();

结果和 二 相同, 很明显, 并不会因为赋值了 就输出 1。

二、三 都发生了变量提升( Hoisting ),简单定义

变量提升(Hoisting): 在指定作用域里,从代码顺序上看是变量先使用后声明,但运行时变量的 可访问性 提升到当前作用域的顶部,其值为 undefined ,没有 可用性。

这里强调 代码顺序 和 运行顺序 ,是因为多数时候我们写的代码都是顺序执行的,即 代码顺序 和 运行顺序 是一致的。比如有过 C语言 经验的程序员

#include <stdio.h>
int main() {
int x = 1;
printf("%d, ", x); // 1
}

两句代码,先声明整数型 x, 再输出。代码顺序和运行顺序是一致的,即正常运行。

如果顺序反过来

#include <stdio.h>
int main() {
printf("%d, ", x); // error
int x = 1;
}

此时,编译都不能通过了。但JS里可以如此,见二、三。

因此,有类 C语言 经验的程序员,都很清楚变量需要 先声明后使用 ,不然会报错。而到了JS里,有 变量提升 现象,可以 先使用后声明 ,C 的经验用到 JS 里迷惑便出现了。

四、 函数表达式也存在变量提升

function test() {
alert(func); // undefined
var func = function() {};
}
test();

但如果想使用这个 func,则无可能

function test() {
alert(func); // undefined
func(); // 报异常
var func = function() {};
}
test();

结果func 是 undefined,调用 func 则会报异常。 在上面的定义中提到了 可访问性和 可用性 对应如下语句。

可访问性:alert(func),输出 undefined,可以运行,可以访问 func。

可用性:   func(), 报异常,不能正常调用 func,表示无可用性。

二、三、四 都是使用 var 声明的变量,JS 里函数声明也会存在提升(Hoisting),只是这个 “变量” 比较特殊,它是一个 function 类型(可以作为函数、方法或构造器)。它的名字(标识符)也会提升到当前作用域的顶部。

五、函数声明的名也会提升到当前作用域顶部

function test() {
alert(f1); // function
f1(); // "called"
function f1() {
alert('called');
}
}
test();

我们看到,声明 f1 在代码最末,f1 使用在前,alert(f1) 和 f1() 都正常执行,表示 可访问性 和 可用性 都有了。

前面说了,变量提升(Hoisting)没什么用,属于语言的低劣设计,好的习惯还是 “先声明后使用”。但奇怪的是这个特性会出现在各大公司面试题里,大家讨论起来津津有味。

题1:

// 写出以下代码的运行结果
var a = 1;
function fn() {
if (!a) {
var a = 2;
}
alert(a); // ?
}
fn();

题2:

// 写出以下代码的运行结果
var a = 1;
function fn() {
a = 2;
return;
function a() {}
}
fn();
alert(a); // ?

好在这一切随着 ES6 的 let/const 到来结束了,ES里除全局变量外,其它都推荐使用 let/const,如果把var替换成let,变量提升(Hoisting)就不复存在了。

function test() {
alert(declaredButNotAssigned1); // 报异常
alert(declaredButNotAssigned2); // 报异常
alert(func); // 报异常
let declaredButNotAssigned1;
let declaredButNotAssigned2 = true;
let func = function() {};
}
test();

这强制程序员养成好的习惯,变量需要“先声明再使用”,否则报错。

以下摘自MDN的关于let不在发生变量提升的描述

In ECMAScript 6, let does not hoist the variable to the top of the block. If you reference a variable in a block before the  let declaration for that variable is encountered, this results in a  ReferenceError , because the variable is in a "temporal dead zone" from the start of the block until the declaration is processed.

用 let 声明变量后,typeof 也不再安全

if (condition) {
alert(typeof num); // Error!
let num = 100;
}

以前可以用 typeof == 'undefined',来判断是否引入了某lib,比如jQuery

// 判断jQuery是否引入了
if (typeof $ !== 'undefined') {
// do something
}...

jQuery没有引入,$ 没有声明,这句也不会报错而影响到下面的代码执行,但如果是let声明的就会报错了。

JavaScript中的各种变量提升(Hoisting)的更多相关文章

  1. JS中作用域和变量提升(hoisting)的深入理解

    作用域(Scoping) javascript作用域之所以迷惑,是因为它程序语法本身长的像C家族的语言.我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部 ...

  2. JavaScript中函数的变量提升问题

    函数的大体分三种,一种是函数的声明,一种是函数表达式(又称为函数的字面量) 1.函数的声明 => function myFn(){}; 2.函数的表达式 => var myFn = fun ...

  3. JavaScript中变量提升------Hoisting

    原谅链接:http://www.cnblogs.com/damonlan/archive/2012/07/01/2553425.html 因为这个问题很是经典,而且容易出错,所以在介绍一次.哈哈.莫怪 ...

  4. js中的变量提升(hoisting)

    来看如下代码: function HelloJS(){ var array = [1,2,3,4,5]; for(var i in array){ } alert(i); } HelloJS(); a ...

  5. Javascript中函数及变量定义的提升

    <html> <head> <title>函数提升</title> <script language="javascript" ...

  6. JavaScript系列文章:变量提升和函数提升

    第一篇文章中提到了变量的提升,所以今天就来介绍一下变量提升和函数提升.这个知识点可谓是老生常谈了,不过其中有些细节方面博主很想借此机会,好好总结一下. 今天主要介绍以下几点: 1. 变量提升 2. 函 ...

  7. JavaScript解析机制之变量提升

    1.什么是预解析? 在当前作用域下,JS 运行之前,会把带有 var 和 function 关键字的事先声明,并在内存中安排好.(这个过程也可以理解为变量提升)然后再从上到下执行 JS 语句(预解析只 ...

  8. Javascript中的循环变量声明,到底应该放在哪儿?

    相信很多Javascript开发者都在声明循环变量时犹豫过var i到底应该放在哪里:放在不同的位置会对程序的运行产生怎样的影响?哪一种方式符合Javascript的语言规范?哪一种方式和ecma标准 ...

  9. js函数、变量提升(hoisting)

    其实我只是想复习下变量提升的,然后看到了函数提升,然后再看到了函数声明.函数表达式. 有必要怀着敬仰之心提及园子里的TOM大叔的解密命名函数表达式,不愧是大叔,好好地脑补了下基础知识. 在ECMASc ...

随机推荐

  1. tomcat实现ServletContext的addListener方法的源码解说(原创)

    tomcat 8.0.36 知识点: 动态监听器有七类: ServletContextAttributeListener ServletRequestListener ServletRequestAt ...

  2. Android自定义EditText去除边框并添加下划线

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. [转载]UML用例图总结

    前言 用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示一个外部用户能够观察到的系统功能模型图.用例图多用于静态建模阶段(主要是业务建模和需求建模),帮助开发团队以一种可视化的方式理解系 ...

  4. Django快速开发之投票系统

    https://docs.djangoproject.com/en/1.8/intro/tutorial01/ 参考官网文档,创建投票系统. ================ Windows  7/1 ...

  5. Database Primary key and Foreign key [From Internet]

    Database Primary key and Foreign key --Create Referenced Table CREATE TABLE Department ( DeptID int ...

  6. JAVA 设计模式 解释器模式

    用途 解释器模式 (Interpreter) 定义一个语言,定义它的文法的一种表示. 并定义一个解释器,这个解释器使用该表示来解释语言中的句子. 解释器模式是一种行为型模式. 结构

  7. JAVA 设计模式 组合模式

    用途 组合模式 (Component) 将对象组合成树形结构以表示“部分-整体”的层次结构.组合模式使得用户对单个对象和组合对象的使用具有唯一性. 组合模式是一种结构型模式. 结构

  8. Elasticsearch增删改查 之 —— Update更新

    更新操作,一般用这个的,应该不会很多吧!ES本身还是一个倾向于查询检索的框架,对于这种更新的操作,太过频繁总归是不好的. 不过阅读本篇后,你可以使用Script对所有的文档执行更新操作,也可以使用do ...

  9. ROS 不能再详细的安装教程

    版权声明:本文为博主原创文章,转载请标明出处: http://www.cnblogs.com/liu-fa/p/5779206.html 关于ROS(Robot OS 机器人操作系统),估计看这个博文 ...

  10. ado.net 用c#与数据库连接实现增删改查

    ADO.NET: 数据访问技术 就是将C#和MSSQL连接起来的一个纽带 可以通过ADO.NET将内存中的临时数据写入到数据库中 也可以将数据库中的数据提取到内存中供程序调用 是所有数据访问技术的基础 ...