原文:你不知道的js系列

先有鸡还是先有蛋?

如下代码:

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

很多开发者可能会认为结果会输出 undefined,因为 var a 在 a = 2 后面,好像变量似乎被重新定义了,所以结果会是默认值 undefined。

然而,正确结果是 2.

下面这段代码,a 在 定义之前被引用。不会抛出错误,也不会输出 2 。

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

结果输出 undefined。

编译器

回忆一下第(一)节中的内容,引擎在解释执行之前会编译你的代码。

所有的声明,包括函数和变量,都会在代码执行之前被处理。

你看到 var a = 2;是一个语句,实际上 JavaScript 会认为这是两个语句,第一个声明 var a 在编译期间被处理,第二个语句赋值操作,留在原处等待执行。

所以上面的第一段代码会被处理成两部分

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

第二段代码实际上也被处理成:

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

这个过程,可以看成是变量和函数的声明被提升到代码的头部,叫做变量提升(Hoisting)

也就是说变量声明在赋值语句之前被执行。

注:只有声明被提升,赋值和其它的操作被留在原处。

foo();

function foo() {
console.log( a ); // undefined var a = 2;
}

上面代码中的函数 foo 的声明被提前,所以这样的调用是可以被执行的。

提升发生在每个作用域内部,所有变量 a 的声明被提升到 foo 的顶部。相当于:

function foo() {
var a; console.log( a ); // undefined a = 2;
} foo();

函数声明被提升了,但是函数表达式不会被提升:

foo(); // not ReferenceError, but TypeError!

var foo = function bar() {
// ...
};

这里的变量 foo 的声明被提升了,所以对 foo 的 RHS 查询不会报错。但这个时候 foo 的值还是 undefined,所有会报 TypeError 错误。

就算是有命名的函数表达式,这个名称标识也不会被外部作用域访问:

foo(); // TypeError
bar(); // ReferenceError var foo = function bar() {
// ...
};

上面这段代码会被解释为类似下面的:

var foo;

foo(); // TypeError
bar(); // ReferenceError foo = function() {
var bar = ...self...
// ...
}

函数优先

函数和变量的声明都会被提升,但是一个细微的区别就是函数声明在前面。

考虑下面的代码:

foo(); //

var foo;

function foo() {
console.log( 1 );
} foo = function() {
console.log( 2 );
};

输出结果为1

因为这段代码会被解释为:

function foo() {
console.log( 1 );
} foo(); // foo = function() {
console.log( 2 );
};

var foo 是一个重复的声明,所有被忽略掉了。即时它在函数声明的前面编写,因为函数声明的提升要先于变量声明的提升。

和函数名称重复的变量声明就会被忽略,但如果有多个同名的函数声明,那么后面的声明会覆盖掉前面的:

foo(); //

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

在普通的代码块中出现的函数声明也会被提升到外部作用域的顶部。

foo(); // "b"

var a = true;
if (a) {
function foo() { console.log( "a" ); }
}
else {
function foo() { console.log( "b" ); }
}

但这种行为并不靠谱,因为有可能将来 JavaScript 的版本会改变这个机制(比如在块中声明的函数将会绑定在块作用域中),所以要避免在块中声明函数。

小结

变量声明提升,函数声明提升,其它操作不变

函数表达式不会被提升

函数声明优先于变量声明

后声明的会覆盖先声明的

你不知道的JS之作用域和闭包(四)(声明)提升的更多相关文章

  1. 你不知道的JS之作用域和闭包 附录

     原文:你不知道的js系列 A 动态作用域 动态作用域 是和 JavaScript中的词法作用域 对立的概念. 动态作用域和 JavaScript 中的另外一个机制 (this)很相似. 词法作用域是 ...

  2. 你不知道的JS之作用域和闭包(五)作用域闭包

    原文:你不知道的js系列 一个简单粗暴的定义 闭包就是即使一个函数在它所在的词法作用域外部被执行,这个函数依然可以访问这个作用域. 比如: function foo() { var a = 2; fu ...

  3. 你不知道的JS之作用域和闭包(三)函数 vs. 块级作用域

      原文:你不知道的js系列 在第(二)节中提到的,标识符在作用域中声明,这些作用域就像是一个容器,一个嵌套一个,这个嵌套关系是在代码编写时定义的. 那么到底是什么产生了一个新的作用域,只有函数能做到 ...

  4. 你不知道的JS之作用域和闭包(二)词法作用域

    原文:你不知道的js系列 词法作用域(Lexical Scope) Lex time 一个标准的编译器的第一个阶段就是分词(token化) 词法作用域就是在词法分析时定义的作用域.换句话说,词法作用域 ...

  5. 你不知道的JS之作用域和闭包(一)什么是作用域?

    原文:你不知道的js系列 什么是作用域(Scope)? 作用域 是这样一组规则——它定义了如何存放变量,以及程序如何找到之前定义的变量. 编译器原理 JavaScript 通常被归类为动态语言或者解释 ...

  6. JS之作用域与闭包

    JS之作用域与闭包   作用域在JS中同样也是一个重要的概念.它不复杂,因为ES5中只有全局作用域和函数作用域,我们都知道他没有块级作用域.但在ES6中多了一个let,他可以保证外层块不受内层块的影响 ...

  7. JS(作用域和闭包)

    1.对变量提升的理解 1.变量定义(上下文) 2.函数声明 2.说明 this 几种不同的使用场景 常见用法 1.作为构造函数执行 2.作为对象属性执行 3.作为普通函数执行(this === win ...

  8. 解析js中作用域、闭包——从一道经典的面试题开始

    如何理解js中的作用域,闭包,私有变量,this对象概念呢? 就从一道经典的面试题开始吧! 题目:创建10个<a>标签,点击时候弹出相应的序号 先思考一下,再打开看看 //先思考一下你会怎 ...

  9. 你不知道的JavaScript(作用域和闭包)

    作用域和闭包 ・作用域 引擎:从头到尾负责整个JavaScript的编译及执行过程. 编译器:负责语法分析及代码生成等. 作用域:负责收集并维护由所有声明的标识符(变量)组成的一系列查询,并实施一套非 ...

随机推荐

  1. Object类中方法详解

    目录 概述 hashCode方法 getClass方法 toString方法 equals方法 clone方法 finalize方法 概述 Object 是类层次结构的根类.每个类都使用 Object ...

  2. Python爬虫实战三之爬取嗅事百科段子

    一.前言 俗话说,上班时间是公司的,下班了时间才是自己的.搞点事情,写个爬虫程序,每天定期爬取点段子,看着自己爬的段子,也是一种乐趣. 二.Python爬取嗅事百科段子 1.确定爬取的目标网页 首先我 ...

  3. CentOS 安装 Docker

    前言:其实安装步骤Docker官网很详细,如果有些人英文不好看的比较慢的话就可以直接看我的,我也是摘自官网,具体步骤如下 1. 安装依赖包 $ sudo yum install -y yum-util ...

  4. C#获取用户登录IP地址

    public static string GetUserIp() {        string ip;        string[] temp;        bool isErr = false ...

  5. webstorm 2019.1 注册教程

    注册教程:https://blog.csdn.net/hdp134793/article/details/81530472 IntelliJ IDEA 注册码获取网站

  6. n2n windows 编译安装文件

    n2n安装 n2n原理编译版下载,可直接使用:windows下vpn客户端 n2n_v2_linux_x64 n2n_v2_Win32TAP网卡驱动 #linux环境编译yum install -y ...

  7. 函数式编程-compose与pipe

    函数式编程中有一种模式是通过组合多个函数的功能来实现一个组合函数.一般支持函数式编程的工具库都实现了这种模式,这种模式一般被称作compose与pipe.以函数式著称的Ramda工具库为例. cons ...

  8. C# Conversion Keywords

    主要是解决类与其他不同数据类型的转换 类于类的显式转换: explicit  public static explicit operator B(A a) { return new B(){a.... ...

  9. Android Studio编译卡死

    首先,用AS,你必须fanqiang,其它都是次要的. AS/bin/*.exe.vmoptions ## *DO NOT* modify this file directly. If there i ...

  10. datatable拆分多个

    /// <summary> /// 分解数据表 /// </summary> /// <param name="originalTab">需要分 ...