什么是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     })();

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

答案是 变量值。

时间: 2024-10-09 08:31:06

什么是Javascript Hoisting?的相关文章

javascript Hoisting变量提升

1. 看人家举的两个例子,我认为这里的判断是否定义: !var 其实就是 指是否在函数function里面定义了.只有在funciton里面定义了了,js才hoist到最上面去找这个变量的值,否则就按照你自己在函数里定义的规则来了. [转载请注明来自: http://blog.csdn.NET/sunxing007] 下面的程序是什么结果? [javascript] view plain copy var foo = 1; function bar() { if (!foo) { var foo

回归基础: JavaScript 变量提升

from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScript引擎在执行的时候,把所有变量的声明都提升到当前作用域的最前面. 当然了,函数声明也是可以被提升的.然后,函数表达式却没有提升. 原文:Back to Basics: JavaScript Hoisting 译文:回归基础: JavaScript 变量提升 变量声明是所有的编程语言中最基础部分之

了解JavaScript的执行上下文

转自http://www.cnblogs.com/yanhaijing/p/3685310.html 什么是执行上下文? 当JavaScript代码运行,执行环境非常重要,有下面几种不同的情况: 全局代码--你的代码首次执行的默认环境. 函数代码--每当进入一个函数内部. Eval代码--eval内部的文本被执行时. 在网上你能读到许多关于作用域(scope)的资源,本文的目的是让事情变得更简单,让我们将术语执行上下文想象为当前被执行代码的环境/作用域.说的够多了,现在让我们看一个包含全局和函数

因一段JavaScript代码引发的闲扯

前两天,一朋友给我发了一段JavaScript代码: function f1(){ var n=999; nAdd=function(){ n+=1 }; function f2(){ alert(n); } return f2; } var result1=f1(); var result2=f1(); result1(); // 999 result2();//999 nAdd(); result1(); // 是999而不是1000,这是为何呢? result2();//1000 问题的原

javascript 变量/函数 提升

1.JavaScript hoisting(变量/函数 提升) 以下实验都是通过firefox的Console做的实验. console.log(a); ReferenceError: a is not defined console.log(a); 但是,如果在后面加上变量的定义的话,结果将会变得不同. console.log(a); var a = 10; undefined 之前变量没有定义的错误没了,取而代之的是告诉我们a的值是 'undefined'. 先不管a的值缘何为 'undef

JavaScript基本概念(1)-声明提升

声明提升: function > var > other var提升的时候,只是声明提升,但是赋值还是会在原来的位置. Javascript Hoisting:In javascript, every variable declaration is hoisted to the top of its declaration context.我的理解就是在Javascript语言中,变量的声明(注意不包含变量初始化)会被提升(置顶)到声明所在的上下文,也就是说,在变量的作用域内,不管变量在何处声

javascript对变量和函数的声明提前‘hoist’

hoist vt.升起,提起; vi.被举起或抬高; n.起重机,升降机; 升起; <俚>推,托,举; 原文地址:http://www.bootcss.com/article/variable-and-function-hoisting-in-javascript/ 这篇文章写的真不错,一看就明白了,先收藏! 这篇文章不讲英语,但是对于某些英语单词找不到很好的翻译,一上来就列出“hoist”这个单词的释义是为了让大家有个准备,我在这里将此单词翻译为“提前”,是为了解释 JavaScript 语

let

一. 1. let 所声明的变量,除了在 Global scope 与 function scope 互不干扰之外, 在 Block scope.Loop scope 也是互不干扰. let x = 1; console.log(x); function foo() { let x = 3; console.log(x); } foo(); { let x = 5; console.log(x); } 2. 特别是 Loop scope,使用 let 写法之后,再也不用担心相同变量间会相互干扰了

javascript变量声明提升(hoisting)

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