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

作用域(Scoping)

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中对象的属性,然后才会向上顺着作用域链向上检查该属性。

时间: 2024-10-07 22:10:59

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

JavaScript中的各种变量提升(Hoisting)

首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升(Hoisting). JS 存在变量提升(Hoisting),这个的设计其实是低劣的,它允许变量不声明就可以访问,或声明在后使用在前.新手对于此则很迷惑,甚至许多使用JS多年老手也比较迷惑.但在 ES6 加入 let/const 后,变量Hoisting 就不存在了. 一. 变量未声明,直接使用 f

Javascript作用域和变量提升

下面的程序是什么结果? [javascript] view plain copy var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); 结果是10: 那么下面这个呢? [javascript] view plain copy var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a); 结果是1. 吓你一跳

JS中的let变量

介绍JS中的let变量: let允许你声明一个作用域被限制在块级中的变量.语句或者表达式.在Function中局部变量推荐使用let变量,避免变量名冲突. 作用域规则 let 声明的变量只在其声明的块或子块中可用,这一点,与var相似.二者之间最主要的区别在于var声明的变量的作用域是整个封闭函数. function varTest() { var x = 1; if (true) { var x = 2; // 同样的变量! console.log(x); // 2 } console.log

作用域与变量提升的面试题方法总结

前言:下面的方法能快速的解面试题,主要针对=>作用域与变量提升的面试题.并且没有this改变指向的情况 (有错或者不足的地方,随时修改补充) 1.没有参数的时候:看有没有var,或者函数申明(也就是说如果有变量提升,函数体内就变成私有变量了,函数体内修改了不会影响父级.) 有,子集是undefined,也不会找父级,下面修改了(简单和复合类型)都不会影响父级. 没有,子集找不到,会找到父级,下面修改了(简单和复合类型)都会影响父级. 2.有参数的时候:(有传参,函数体内就变成私有变量了,函数体内

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

本文转自 damonlan的文章 http://www.cnblogs.com/damonlan/archive/2012/07/01/2553425.html 前言 因为我在写这文章的时候,百度里找资料,找到了园友的一篇文章,写的很好,可是我写了又不想放弃,所以就在里面拿了很多东西过来!~~ [翻译]JavaScript Scoping and Hoisting 希望得到大家谅解. 因为这个问题很是经典,而且容易出错,所以在介绍一次.哈哈.莫怪哦. 一.案发现场 我们先看一段很简单的代码: v

js 作用域,变量提升

先看下面一段代码: 1 var a = 0; 2 alert("1st alert : a = " + a); 3 function fun(){ 4 alert("2nd alert : a = " + a); 5 var a = 1; 6 setTimeout(function(){ 7 alert("3rd alert : a = " + a); 8 a = 2; 9 },1000); 10 a = 3; 11 setTimeout(fun

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

如何理解js中的作用域,闭包,私有变量,this对象概念呢? 就从一道经典的面试题开始吧! 题目:创建10个<a>标签,点击时候弹出相应的序号 先思考一下,再打开看看 //先思考一下你会怎么写,是不是这样? 可是结果呢,弹出来的都是10,为啥? var i,a for(i=0;i<10;i++){ a=document.createElement('a') a.innerHTML=i+'<br>' a.addEventListener('click',function(eve

原型模式故事链(4)--JS执行上下文、变量提升、函数声明

上一章:JS的数据类型 传送门:https://segmentfault.com/a/11... 好!话不多少,我们就开始吧.对变量提升和函数声明的理解,能让你更清楚容易的理解,为什么你的程序报错了~哈哈哈 我们前端的代码一般就三个部分组成html + css +js,一般呢我们的JS又会放在最后执行. 执行上下文:所谓的执行上下文,就是JS代码执行的环境. Javascript中代码的运行环境分为以下三种: 全局上下文 - 这个是默认的代码运行环境,一旦代码被载入,引擎最先进入的就是这个环境.

js中,var 修饰变量名和不修饰的区别

js中 允许在定义变量的时候 不加var 修饰符.js会在当前作用域下寻找上下文是否定义了此变量, 如果没有找到则会为这个变量分配内存.当且将其视为window的成员. 也就是全局变量. 如果加了var 修饰符. js会重新为这个变量分配内存,不论当前上下文中是否已经定义过了.这个变量的作用域就为当前上下文. 即局部变量. 不加var的写法是强烈不推荐的.1. 语义不清楚. 2. 团队开发时,容易覆盖掉其它作用域内的变量,引发异常.3. 给window对象添加不必要成员. 等等