什么是Javascript Hoisting?

Javascript是一门容易遭人误解的语言,但是它的强大毋庸置疑。个人觉得,要想深入理解Javascript语言,首先必须对其基本的概念(例如:Scope,Closure,Hoisting等)要真正理解。今天想通过自己的理解来对Javascript
Hoisting(国内一般翻译为 变量提升)做一个阐述:

在解释Javascript Hoisting之前,先看一下几段代码:

 1     //代码段1--------------------------
 2     var myvar = '变量值';
 3     console.log(myvar); // 变量值
 4     //代码段2--------------------------
 5     var myvar = '变量值';
 6     (function() {
 7       console.log(myvar); //变量值
 8     })();
 9     //代码段3----------------------------
10     var myvar = '变量值';
11     (function() {
12       console.log(myvar); // undefined
13       var myvar = '内部变量值';
14     })();    

代码段1会在控制台打印出 变量值 ,很容易理解;代码段2也会在控制台打印出 变量值
,Javascript编译器首先在匿名函数内部作用域(Scope)查看变量myvar是否声明,发现没有,就继续向上一级的作用域(Scope)查看是否声明 myvar,发现存在,即打印出该作用域的myvar值。但代码段3只是对代码段2做一个微调,结果却输出了undefine!!!

在理解代码段3之前,必须先理解Javascript Hoisting的概念。Javascript Hoisting:In
javascript, every variable declaration is hoisted to the top of its
declaration
context.我的理解就是在Javascript语言中,变量的声明(注意不包含变量初始化)会被提升(置顶)到声明所在的上下文,也就是说,在变量的作用域内,不管变量在何处声明,都会被提升到作用域的顶部,但是变量初始化的顺序不变。

下图的左边和右边的代码输出结构是一样的,左边的代码段在JS执行时,实际的执行顺序如右边的代码所示(JS编译器会将变量声明进行提升处理)。

理解了提升的概念之后,再回到开头的代码段3的理解中来,代码段3和在被Hositing之后的代码如下图所示:

二者输出的结构都为undefined!可理解为内部变量myvar在匿名函数的内最后一行进行变量声明并赋值,但是JS解释器会将变量声明(不包含赋值)提升(Hositing)到匿名函数的第一行(顶部),由于只是声明myvar变量,在执行console.log(myvar)语句时,并未对myvar进行赋值,所以JS输出undefined。

如果变量声明未提升(Hositing)置顶,则应该会报错误。如下图所示:

  下面给个测试题,来看看你对Hositing的概念是否理解:

1     //测试代码----------------------
2     var myvar = '变量值';
3     (function() {
4       console.log(myvar); // ?
5       myvar = '内部变量值';
6     })();

该代码段应该输出什么值呢?

答案是 变量值。

作者:佚名

来源:51CTO

时间: 2024-10-28 07:52:42

什么是Javascript Hoisting?的相关文章

深入解读JavaScript中的Hoisting机制_基础知识

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

JavaScript的变量声明提升问题浅析(Hoisting)_javascript技巧

一.变量声明提升       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' 此处

JavaScript—之对象参数的引用传递

变量   1.JavaScript hoisting   >>请看例子,我们拿Chrome的console作为JS的运行环境. 上面直接执行console.log(a), 不带一点悬念地抛出了not defined 错误.这是预料之中的. 看下面进化后的代码: 之前变量没有定义的错误没了,取而代之的是告诉我们a的值是 'undefined'.先不管a的值缘何为 'undefined' 了,至少可以知道现a这个变量是定义了,因为之前报的' a is not defined'的错误没有了. 这正是

JavaScript Scoping and Hoisting 翻译_javascript技巧

你知道下面的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 Scoping & Hoisting(二)_javascript技巧

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 函数

JavaScript 函数定义 JavaScript 使用关键字 function 定义函数 函数可以通过声明定义,也可以是一个表达式 函数声明 函数声明的语法 : function sum1(n1,n2){ return n1+n2; }; 函数声明后不会立即执行,会在我们需要的时候调用到 分号是用来分隔可执行JavaScript语句,由于函数声明不是一个可执行语句所以不以分号结束 函数表达式,又叫函数字面量 JavaScript 函数可以通过一个表达式定义 函数表达式可以存储在变量中: va

javascript: Javascript 风格向导(续)

序 我好长时间没有在推荐栏里出现了,看来上一篇反响不错,故再续上篇.Properties? 当访问属性的时候,我们使用点(.)操作符. var luke = {jedi: true,age: 28};// badvar isJedi = luke['jedi'];// goodvar isJedi = luke.jedi; ? 当以变量的方式访问属性的时候,用下标符号([]).--除非特殊需求,否则尽量避免使用obj[variable]的方式进行属性访问. var luke = {jedi: t

如何判断Javascript对象是否存在

Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易.但是实际上,它涉及的语法问题,远比我们想象的复杂.Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法.只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别

javascript变量声明实例分析

  javascript变量声明实例分析          这篇文章主要介绍了javascript变量声明,实例分析了javascript变量声明的相关使用技巧,需要的朋友可以参考下 本文实例讲述了javascript变量声明的方法.分享给大家供大家参考.具体分析如下: js中使用一个变量之前应当先声明.变量使用关键字var来声明. 如果未在var声明语句中给变量指定初始值,则该变量值为undefined. 不用在声明变量时指定变量类型,js变量可以是任意数据类型. 使用var语句重复声明变量是