js中的变量提升(hoisting)
来看如下代码:
function HelloJS(){
var array = [1,2,3,4,5];
for(var i in array){
}
alert(i);
}
HelloJS();
alert(i);
此段代码运行后先执行HelloJS();,会先输出4,然后再执行alert(i);,执行alert(i);时会报i is not defined的错误。
根据变量提升,这段代码等同于如下代码:
function HelloJS(){
var i;
var array = [1,2,3,4,5];
for(i in array){
}
alert(i);
}
HelloJS();
alert(i);
可见对应变量i的声明自动提升到了代码块的头部这里即函数的头部,即第一个alert可以正常执行。
执行第二个alert(i)报错是因为:用var操作符定义的变量将成为定义该变量的作用域中的局部变量。也就是说如果在函数中使用var定义一个变量,那么这个变量在函数退出后就会被销毁。
JavaScript引擎的工作方式是,先解析代码,获取所有被声明的变量,然后再一行一行地运行。这造成的结果,就是所有的变量的声明语句,都会被提升到代码的头部,这就叫做变量提升(hoisting)。(只会提升变量的声明语句,不会提升变量的赋值语句,例如var a = 1;只会提升var a;将它放到代码块的头部,而a=1;语句照样在原来的位置)
示例:
console.log(a);
var a =1;
以上语句并不会报错,只是提示undefined。实际运行过程:
var a;
console.log(a);
a =1;
表示变量a已声明,但还未赋值。但是变量提升只对var命令声明的变量有效,如果一个变量不是用var命令声明的,就不会发生变量提升。
console.log(b);
b =1;
以上代码将会报错:ReferenceError: b is not defined。
与普通变量一样,js里的function也可看做变量,也存在变量提升情况:
abc();
function abc(){
console.log(1);
};
表面上,上面代码好像在声明之前就调用了函数abc。但是实际上,由于“变量提升”,函数abc定义部分被提升到了代码头部,也就是在调用之前已经声明了。但是,如果采用赋值语句定义函数,JavaScript就会报错:
abc();
var abc = function(){
console.log(1);
};
// TypeError: abc is not a function
因为,实际运行过程:
var abc;
abc();
abc = function(){
console.log(1);
};
这时候abc是个变量,并非function。
函数声明可以被提前,如果是函数表达式则只有变量声明提前,函数体并不会提前。
js中的变量提升(hoisting)的更多相关文章
- js中的变量提升(Hoisting)
<script> function test(){ console.log(a); console.log(foo()); var a=1; function foo(){ return ...
- JS中的 变量提升
首先纠正下,文章标题里的 “变量提升” 名词是随大流叫法,“变量提升” 改为 “标识符提升” 更准确.因为变量一般指使用 var 声明的标识符,JS 里使用 function 声明的标识符也存在提升( ...
- js中的变量提升和函数提升
从上周开始,我所在的学习小组正式开始了angular的学习,angular是全面支持es6的,所以语法上和以前的angular有了很大的不同,比如变量声明时就抛弃了var,而选择了let和const: ...
- js函数、变量提升(hoisting)
其实我只是想复习下变量提升的,然后看到了函数提升,然后再看到了函数声明.函数表达式. 有必要怀着敬仰之心提及园子里的TOM大叔的解密命名函数表达式,不愧是大叔,好好地脑补了下基础知识. 在ECMASc ...
- js中的变量提升与函数提升
先看看一个简单的代码 var str='Hello World'; alert(str);//弹出 Hello World 再看一段代码: var v='Hello World'; (function ...
- js中的变量提升
var v='Hello World'; (function(){ alert(v); var v='I love you'; })() 会出现alert出来的是undefined,原因是因为在函数域 ...
- JavaScript中变量提升------Hoisting
原谅链接:http://www.cnblogs.com/damonlan/archive/2012/07/01/2553425.html 因为这个问题很是经典,而且容易出错,所以在介绍一次.哈哈.莫怪 ...
- js 中的变量声明提前总结
一.var 声明 ES6之前,js 中声明变量基本上用 var 关键字: 1.如果访问未声明的变量,会报错:ReferenceError 2.声明了未赋值,值为 undefined,跟前面的报错是两回 ...
- JS 会有变量提升和函数提升
JavaScript变量函数声明提升(Hoisting)是在 Javascript 中执行上下文工作方式的一种认识(也可以说是一种预编译),从字面意义上看,"变量提升"意味着变量和 ...
随机推荐
- java IO切割流合并流
切割流,将一个较大的文件,切割成多个小文件存储
- 【Spring-AOP-学习笔记-6】@AfterThrowing增强处理简单示例
项目结构 业务代码 @Component("hello") public class HelloImpl implements Hello { // 定义一个简单方法,模拟 ...
- centos6+nginx+php+mysql+memcached+wordpress
centos6+nginx+php+mysql+memcached+wordpress 搭建步骤(1) LNMP 平台搭建: 请参考:http://www.cnblogs.com/ligao/p/61 ...
- 利用spring的ApplicationListener实现springmvc容器的初始化加载--转
1.我们在使用springmvc进行配置的时候一般初始化都是在web.xml里面进行的,但是自己在使用的时候经常会测试一些数据,这样就只有加载spring-mvc.xml的配置文件来实现.为了更方便的 ...
- 选择符API
querySelector() querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. //获得body元素 var body = ...
- Android手机卸载第三方应用
测试机互相拆借,过多的应用占用手机空间,使用脚本将不需要的第三方应用卸载. #!/bin/sh #白名单 whiteName=( com.tencent.mobileqq com.tencent.mm ...
- 如何使input双击时不显示历史记录
原文地址:http://highping.iteye.com/blog/359428 HTML的输入框可以拥有自动完成的功能,当你往输入框输入内容的时候,浏览器会从你以前的同名输入框的历史记录中查找出 ...
- Mac parallels desktop安装windows,linux
前言 这款软件你就看作是虚拟机vm,如果你要安装win10系统,请下载ios镜像文件 下载准备工作 Parallels Desktop 13 破解版本 联系站长所要 win10 iso镜像文件 ...
- JS获取url传参
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new O ...
- 并发工具类(三)控制并发线程的数量 Semphore
前言 JDK中为了处理线程之间的同步问题,除了提供锁机制之外,还提供了几个非常有用的并发工具类:CountDownLatch.CyclicBarrier.Semphore.Exchanger.Ph ...