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

作用域（Scoping）

对于Javascript初学者来说，一个最迷惑的地方就是作用域；事实上，不光是初学者。我就见过一些有经验的javascript程序员，但他们对scope理解不深。javascript作用域之所以迷惑，是因为它程序语法本身长的像C家族的语言。我对作用域的理解是只会对某个范围产生作用，而不会对外产生影响的封闭空间。在这样的一些空间里，外部不能访问内部变量，但内部可以访问外部变量。

c语言的变量分为全局变量和局部变量，全局变量的作用范围是任何文件和函数访问（当然，对于非变量定义的其他c文件，需要使用extern关键字进行申明，使用static关键字也可以将作用范围限定在当前文件中），局部变量的作用范围就是从申明到最近的大括号涵盖的块级范围。java则无全局变量，有类变量，成员变量和局部变量，作用范围根据public,protected,private等访问权限有不同的作用范围，这里就不多述。

JS作用域有哪些？

在ES5中，js只有两种形式的作用域：全局作用域和函数作用域。

全局作用域其实是全局对象的作用域，任意地方都可以访问到（如果没有被函数作用域覆盖）。

函数对象作用域跟c的局部变量作用域是不同的，它的作用域是整个函数范围，不论他是在函数的任意位置申明的！这就是所谓的hoisting，也就是变量提升的概念。不过不着急，下面会专门针对hoisting来进行解释。

不过，在ES6中，新增了一个块级作用域（最近的大括号涵盖的范围），但是仅限于let方式申明的变量。
作用域演示：

定义变量时，如果不写var，比如 i=0，则会被定义为全局变量，作用域为全局作用域，否则为局部变量，作用域为函数作用域。上面第一行的var i=0，之所以说它是全局变量，是因为它已经是在全局区申明的了，并不在函数范围内，因此跟 i=0 是一样的。

至于，为什么结果会是这样，继续往下看就知道了。

申明形式

变量声明：

函数申明：

变量提升（Hoisting）

引出一个问题

下面这段代码会输出什么内容？

这道题我面试过很多人，大多数人都说输出的是日期。但真实的结果是undefined。为什么是这样呢？这里就引出了一个概念--hoisting，中文的意思就是变量提升。MDN中对变量hoisting的解释是这样的：

var hoisting

Because variable declarations (and declarations in general) are processed before any code is executed, declaring a variable anywhere in the code is equivalent to declaring it at the top. This also means that a variable can appear to be used before it's declared. This behavior is called "hoisting", as it appears that the variable declaration is moved to the top of the function or global code.

这段话翻译下来就是

因为变量申明是在任意代码执行前处理的，在代码区中任意地方申明变量和在最开始（最上面）的地方申明是一样的。也就是说，看起来一个变量可以在申明之前被使用！这种行为就是所谓的“hoisting”，也就是变量提升，看起来就像变量的申明被自动移动到了函数或全局代码的最顶上。

注意：仅仅是申明提升了，定义并不会被提升。

如此，上面这段代码其实就是下面的形式：

所以，这样就应该理解了，console输出的时候，tmp变量仅仅是申明了但未定义，所以输出应该是undefined。

这里需要说明的是，虽然所有的申明（包括ES5的var、function，和ES6的function *、let、const、class）都会被提升，但是var、function、function *和let、const、class的的提升却并不相同！具体原因可以看这里的说明（大体的意思是虽然let，const，class也被提升了，但是却并不会被初始化，这时候去访问他们则会报ReferenceError异常，他们需要到语句执行的时候才会被初始化，而在被初始化之前的状态叫做temporal dead zone）。我们来看一段代码就知道了：


这里a被提升，但因为定义在后，所以输出undefined

这里a虽然被提升，但却报了引用错误！

之所以或这样

因为这样的原因，推荐的做法是在申明变量的时候，将所用的变量都写在作用域（全局作用域或函数作用域）的最顶上，这样代码看起来就会更清晰，更容易看出来那个变量是来自函数作用域的，哪个又是来自作用域链（本文不对此多做解释，请读者自行百度，有机会再补充说明）。

重复声明

上面的输出其实是：1 2 2。虽然看起来里面x申明了两次，但上面说了，js的var变量只有全局作用域和函数作用域两种，且申明会被提升，因此实际上x只会在最顶上开始的地方申明一次，var x=2的申明会被忽略，仅用于赋值。也就是说上面的代码实际上跟下面是一致的。

函数和变量同时提升的问题

如果是函数和变量类型同时申明定义了，会发生什么事情呢？看下面的代码


A

上面的输出结果其实是： function foo(){} ，也就是函数内容。

而如果是这样的形式呢


B

它的输出却变成：undefined

为什么会这样呢？

原来函数提升分为两种情况：

一种：函数申明。就是上面A，function foo(){}这种形式

另一种：函数表达式。就是上面B，var foo=function(){}这种形式

第二种形式其实就是var变量的声明定义，因此上面的B输出结果为undefined应该就能理解了。

而第一种函数申明的形式，在提升的时候，会被整个提升上去，包括函数定义的部分！因此A跟下面的这种方式是等价的！

原因是因为：1、函数声明被提升到最顶上；2、申明只进行一次，因此后面var foo='i am text'的申明会被忽略。

并且函数申明的优先级优于变量申明，所以以下形式的输出，同样是函数内容：

总结

要彻底理解JS的作用域和Hoisting，只要记住以下三点即可：

1、所有申明都会被提升到作用域的最顶上

2、同一个变量申明只进行一次，并且因此其他申明都会被忽略

3、函数声明的优先级优于变量申明，且函数声明会连带定义一起被提升

注意：

通过with语句，可以临时改变运行期上下文的作用域链，此时的对非var定义的变量进行访问，会首先访问with中对象的属性，然后才会向上顺着作用域链向上检查该属性。

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能有所帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • JavaScript的变量声明提升问题浅析(Hoisting)

    一.变量声明提升 hoisting 英['hɔɪstɪŋ] 美['hɔɪstɪŋ] n. 起重,提升 v. 把-吊起,升起( hoist的现在分词 ) 先来看一个栗子 var cc = 'hello'; function foo(){ console.log(cc); var cc = 'world'; console.log(cc); } foo(); console.log(cc); 这里将会输出 undefined.'world' .'hello' 此处主要有两个知识点: 1.作用域 2.

  • 理解 JavaScript Scoping & Hoisting（二）

    Scoping & Hoisting var a = 1; function foo() { if (!a) { var a = 2; } alert(a); }; foo(); 上面这段代码在运行时会产生什么结果? 尽管对于有经验的程序员来说这只是小菜一碟,不过我还是顺着初学者常见的思路做一番描述: 1.创建了全局变量 a,定义其值为 1 2.创建了函数 foo 3.在 foo 的函数体内,if 语句将不会执行,因为 !a 会将变量 a 转变成布尔的假值,也就是 false 4.跳过条件分支,

  • 深入解读JavaScript中的Hoisting机制

    hoisting机制 javascript的变量声明具有hoisting机制,JavaScript引擎在执行的时候,会把所有变量的声明都提升到当前作用域的最前面. 先看一段代码 var v = "hello"; (function(){ console.log(v); var v = "world"; })(); 这段代码运行的结果是什么呢? 答案是:undefined 这段代码说明了两个问题, 第一,function作用域里的变量v遮盖了上层作用域变量v.代码做少

  • JavaScript Scoping and Hoisting 翻译

    你知道下面的JavaScript代码执行后会alert出什么值吗? 复制代码 代码如下: var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 如果答案是"10"令你感到惊讶的话,那么下面这个会让你更加困惑: [/code] var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a); [/cod

  • JavaScript中Hoisting详解 (变量提升与函数声明提升)

    JavaScript中Hoisting详解 (变量提升与函数声明提升)

    本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如何将 函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的.你在任何的 JavaScript 文档中找不到这个术语,我们说的

  • JavaScript中变量提升 Hoisting

    JavaScript中变量提升 Hoisting

    因为我在写这文章的时候,百度里找资料,找到了园友的一篇文章,写的很好,可是我写了又不想放弃,所以就在里面拿了很多东西过来!~~ [翻译]JavaScript Scoping and Hoisting希望得到大家谅解. 一.案发现场 我们先看一段很简单的代码: 复制代码 代码如下: var v='Hello World'; alert(v); 这个没有疑问吧,弹出"Hello World".OK,我们继续. 我们在看一段Code: 复制代码 代码如下: var v='Hello Worl

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

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

    作用域(Scoping) 对于Javascript初学者来说,一个最迷惑的地方就是作用域:事实上,不光是初学者.我就见过一些有经验的javascript程序员,但他们对scope理解不深.javascript作用域之所以迷惑,是因为它程序语法本身长的像C家族的语言.我对作用域的理解是只会对某个范围产生作用,而不会对外产生影响的封闭空间.在这样的一些空间里,外部不能访问内部变量,但内部可以访问外部变量. c语言的变量分为全局变量和局部变量,全局变量的作用范围是任何文件和函数访问(当然,对于非变量定

  • 深入理解Javascript作用域与变量提升

    下面的程序是什么结果? 复制代码 代码如下: var foo = 1;function bar() { if (!foo) {  var foo = 10; } alert(foo);}bar(); 结果是10: 那么下面这个呢? 复制代码 代码如下: var a = 1;function b() { a = 10; return; function a() {}}b();alert(a); 结果是1. 吓你一跳吧?发生了什么事情?这可能是陌生的,危险的,迷惑的,同样事实上也是非常有用和印象深刻

  • JS中作用域以及变量范围分析

    变量作用域 js作为一门脚本语言,他与c,java这些语言是不相同的. 全局变量 在js中声明全局变量,有下面几种方式: 1.在函数外通过var来声明. var test ="hello"; console.log(test); function a(){ test="xx"; console.log(test); } a(); console.log(test); 结果: hello xx xx 这种方式通过声明的变量在任何地方都可进行修改和使用. 2.在函数中隐

  • web面试之JS预解析与变量提升区别

    目录 什么是预解析? 变量和函数预解析的区别 重复声明var变量 变量提升和函数提升优先级 函数优先级大于变量优先级的深入探究 预解析流程 搜寻预解析关键字 执行预解析 几个需要注意的细节 什么是预解析? 概念: JS代码在在代码从上往下执行前,浏览器会先把所有变量声明解析一遍, 这个阶段叫预解析. 详讲 寻找作用域中的var 和function声明(匿名函数没有function声明,所以不会提升),然后对其进行事先声明, 并把赋值操作留在原地,再从上到下执行代码.这就是一个预解析的过程. 变量

  • js中定义一个变量并判断其是否为空的方法

    js中定义一个变量 var params=null;判断params不为空的方法: 复制代码 代码如下: if(params && params.hasOwnProperty("name")){} 其中:console.info(params);//结果为:Object {}

  • JS中准确判断变量类型的方法

    这是一个高频面试题,我们开发中也进程会遇到,今天我们来实现一个函数getValType(val)用来获取一个变量的类型.从1. JS基础变量类型.2. Js中判断变量的函数. 3. 实现getValType函数.3个方面来分析实现. Js基础变量类型 在 JS 中,有 5 种基本数据类型和 1 种复杂数据类型,基本数据类型有:Undefined, Null, Boolean, Number和String:复杂数据类型是Object,Object中还细分了很多具体的类型,比如:Array, Fun

  • JS中箭头函数与this的写法和理解

    前言 JavaScript在ES6语法中新增了箭头函数,相较于传统函数,箭头函数不仅更加简洁,而且在this方面进行了改进.this作为JavaScript中比较诡异的存在,许多文章对于this的解释也不尽相同,本篇文章试图厘清JS中函数与this的关系. 一.JS中函数的写法 1.常规函数的写法 在ES6语法之前,JS中的函数由function关键字.params参数和被花括号包裹的函数体组成.为了与后面说到的箭头函数相区别,我们先把这样的函数叫做常规函数,常规函数既可以用声明式写法也可以用赋

  • javascript中的变量作用域以及变量提升详细介绍

    变量作用域"一个变量的作用域表示这个变量存在的上下文.它指定了你可以访问哪些变量以及你是否有权限访问某个变量." 变量作用域分为局部作用域和全局作用域. 局部变量(处于函数级别的作用域)不像其他对面对象的编程语言(比方说C++,Java等等),javascript没有块级作用域(被花括号包围的):当是,javascript有拥有函数级别的作用域,也就是说,在一个函数内定义的变量只能在函数内部访问或者这个函数内部的函数访问(闭包除外,这个我们过几天再写个专题). 函数级别作用域的一个例子

  • JS中的this变量的使用介绍

    JavaScript中this的使用 在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 对于this变量最要的是能够理清this所引用的对象到底是哪一个,也许很多资料上都有自己的解释,但有些概念讲的偏繁杂.而我的理解是:首先分析this所在的函数是当做哪个对象的方法调用的,则该对象就是this所引用的对象. 示例一. 复制代码 代码如下: var obj = {};

随机推荐