什么是Javascript Hoisting?
Javascript是一门容易遭人误解的语言,但是它的强大毋庸置疑。个人觉得,要想深入理解Javascript语言,首先必须对其基本的概念(例如:Scope,Closure,Hoisting等)要真正理解。今天想通过自己的理解来对Javascript Hoisting(国内一般翻译为 变量提升)做一个阐述:
在解释Javascript Hoisting之前,先看一下几段代码:
//代码段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的概念是否理解:
//测试代码----------------------
var myvar = '变量值';
(function() {
console.log(myvar); // ?
myvar = '内部变量值';
})();
该代码段应该输出什么值呢?

答案是 变量值。关于函数提升,请看另一篇博文http://www.cnblogs.com/isaboy/p/javascript_function.html
什么是Javascript Hoisting?的更多相关文章
- 什么是 js 变量提升 (Javascript Hoisting)
Javascript是一门容易遭人误解的语言,但是它的强大毋庸置疑.个人觉得,要想深入理解Javascript语言,首先必须对其基本的概念(例如:Scope,Closure,Hoisting等)要真正 ...
- JavaScript Hoisting
Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope ...
- javascript Hoisting变量提升
1. 看人家举的两个例子,我认为这里的判断是否定义: !var 其实就是 指是否在函数function里面定义了.只有在funciton里面定义了了,js才hoist到最上面去找这个变量的值,否则就按 ...
- JavaScript Hoisting(提升)
Hoisting 是指 js 在执行代码前,默认会将变量的声明和函数的声明,提升到当前作用域顶端的行为. 这里要注意一下,只提升声明,例如: console.log(a); var a = 10; / ...
- JavaScript—之对象参数的引用传递
变量 1.JavaScript hoisting >>请看例子,我们拿Chrome的console作为JS的运行环境. 上面直接执行console.log(a), 不带一点悬念地抛出了no ...
- 回归基础: JavaScript 变量提升
from me: javascript的变量声明具有hoisting机制,它是JavaScript一个基础的知识点,也是一个比较容易犯错的点,平时在开发中,大大小小的项目都会遇到. 它是JavaScr ...
- javascript零散要点收集
1.this永远指向函数对象的所有者 2.ECMA-262 把对象(object)定义为“属性的无序集合,每个属性存放一个原始值.对象或函数”.严格来说,这意味着对象是无特定顺序的值的数组. 3.pr ...
- 转:《JavaScript—之对象参数的引用传递》
转自:博客园 Wayou http://www.cnblogs.com/Wayou/p/javascript_arguments_passing_with_reference.html 变量 1.Ja ...
- JavaScript执行上下文
变量声明.函数声明为何会提升?js执行时是如何查找变量的?JavaScript中最基本的部分——执行上下文(execution context) 什么是执行上下文? 当JavaScript代码运行,执 ...
随机推荐
- Android 异步任务,通过PHP访问数据库,多线程,线程间通讯
文章列表MainActivity.java package com.eric.asynctask; import java.io.IOException; import java.util.Array ...
- 八爪鱼招标网的百度权重升为2了,独立IP也从0快速发展为1000
自八爪鱼招标网上线以来,本着以客户一切利益为出发点,坚持提供国内首个免费招标信息平台为目标,经过各位同事不断地努力,不断收集客户各种各样的招标.采购实际需求,与政府.事业单位及中小型企业一对一的沟 ...
- asp.net获取服务端和客户端信息
asp.net获取服务端和客户端信息 获取服务器名:Page.Server.ManchineName获取用户信息:Page.User 获取客户端电脑名:Page.Request.UserHostNam ...
- MongoDB学习笔记~大叔分享批量添加—批量更新—批量删除
回到目录 说它是批量操作,就是说将集合对象一次提交到服务器,并对数据进行持久化,如果您的代码是一次一次的提交,那不算是批量操作!在之前的mongodb仓储中并没有对批量更新和批量删除进行实现,而今天在 ...
- MongoDB入门安装
一.基础信息 系统环境:Linux MongoDB最新版下载:https://codeload.github.com/mongodb/mongo/zip/r3.2.0 二.安装过程 1.将MongoD ...
- 【转】Linux常用命令大全
原文地址:http://www.php100.com/html/webkaifa/Linux/2009/1106/3485.html 系统信息 arch 显示机器的处理器架构(1) uname -m ...
- 对 Visual Studio 中的Resharper禁用对某种文件的检测
原因:在Visual Studio中安装Reshaper后,就会对各种文件进行代码检测,但是因为Reshaper更新的速度不是很及时,所以有时会对Visual Studio中某些新功能误断,导致Cod ...
- C#中使用FreeImage库加载Bmp、JPG、PNG、PCX、TGA、PSD等25种格式的图像(源码)。
其实我一直都是喜欢自己去做图像格式的解码的(目前我自己解码的图像格式大概有15种),但是写本文主要原因是基于CSDN的这个帖子的: http://bbs.csdn.net/topics/3905104 ...
- 理解ThreadLocal(之一)
ThreadLocal是什么 在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以很简洁地编 ...
- 线程同步之 yield() wait()
yield()没有参数. sleep 方法使当前运行中的线程睡眼一段时间,进入不可运行状态,这段时间的长短是由程序设定的,yield 方法使当前线程让出CPU占有权,但让出的时间是不可设定的.yiel ...