什么是Javascript Hoisting?

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

在解释Javascript Hoisting之前，先看一下几段代码：

JavaScript

//代码段1--------------------------

var myvar = '变量值';

console.log(myvar); // 变量值

//代码段2--------------------------

var myvar = '变量值';

(function() {

console.log(myvar); //变量值

})();

//代码段3----------------------------

var myvar = '变量值';

(function() {

console.log(myvar); // undefined

var myvar = '内部变量值';

})();

代码段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的概念是否理解：

JavaScript

//测试代码----------------------

var myvar = '变量值';

(function() {

console.log(myvar); // ?

myvar = '内部变量值';

})();

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

答案是 变量值。关于函数提升，请看另一篇博文http://www.cnblogs.com/isaboy/p/javascript_function.html

转载于:https://www.cnblogs.com/haoerlv/p/7234699.html

什么是Javascript Hoisting?相关推荐

Javascript Hoisting
1.引言初学js不久,还是发现js和其他编程语言(java,C#-)有些不一样的,一些强类型语言中带过来的"固化"的思想在js中可能会让你莫名其妙,what?这特么也可以?下面介 ...
JavaScript hoisting(变量提升)学习总结
定义:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体的最顶部. JavaScript 中,变量可以在使用后声明,也就是变量可以先使用再声明. 例如一下两个例子: 例1: ...
javascript提升（Hoisting）详解
JavaScript(Hoisting)提升:是JavaScript将声明移动至端部的默认行为. 1.JavaScript声明会被提升在JavaScript中,可以在使用变量之后对其进行声明,也就是 ...
JavaScript学习（五）
JavaScript 正则表达式正则表达式是构成搜索模式(search pattern)的字符序列.该搜索模式可用于文本搜索和文本替换操作. 例:var patt = /w3school/i; 例子 ...
javascript_javascript吊装
javascript Hoisting is a JavaScript mechanism where variables and function declarations are moved to ...
matlab火炮射击问题_15个快速射击前端面试问题
matlab火炮射击问题重点 (Top highlight) HTML中的DOM是什么? (What is the DOM in HTML?) The Document Object Model ( ...
JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释，全局对象，隐含的全局概念...
JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念 <html><body><script type="tex ...
【repost】JavaScript Scoping and Hoisting
JavaScript Scoping and Hoisting Do you know what value will be alerted if the following is executed ...
JavaScript提升（Hoisting）---借鉴自W3CSchool
为何记录这个?因为感觉还挺酷,跟其他语言还有点不同何为提升? 提升(Hoisting)是 JavaScript 将声明移至顶部的默认行为. 简单来说,就是可以先赋值,后定义.这个应该是JavaScr ...

什么是Javascript Hoisting?

什么是Javascript Hoisting?相关推荐

最新文章

热门文章