跟我学习javascript的var预解析与函数声明提升


Posted in Javascript onNovember 16, 2015

1、var 变量预编译

JavaScript 的语法和 C 、Java、C# 类似,统称为 C 类语法。有过 C 或 Java 编程经验的同学应该对“先声明、后使用”的规则很熟悉,如果使用未经声明的变量或函数,在编译阶段就会报错。然而,JavaScript 却能够在变量和函数被声明之前使用它们。下面我们就深入了解一下其中的玄机。

先来看一段代码:

(function() {
 console.log(noSuchVariable);//ReferenceError: noSuchVariable is not defined
})();

运行上面代码立马就报错,不过,这也正是我们期望的,因为 noSuchVariable 变量根本就没有定义过嘛!再来看看下面的代码:

(function() {
 console.log(declaredLater); //undefined
 var declaredLater = "Now it's defined!";
 console.log(declaredLater);// "Now it's defined!"
})();

首先,上面这段代码是正确的,没有任何问题。但是,为什么不报错了?declaredLater 变量是在调用语句后面定义的啊?为什么居然输出的是 undefined?

这其实是 JavaScript 解析器搞的鬼,解析器将当前作用域内声明的所有变量和函数都会放到作用域的开始处,但是,只有变量的声明被提前到作用域的开始处了,而赋值操作被保留在原处。上述代码对于解析器来说其实是如下这个样子滴:

(function() {
 var declaredLater; //声明被提前到作用域开始处了!
 console.log(declaredLater); // undefined
 declaredLater = "Now it's defined!"; //赋值操作还在原地!
 console.log(declaredLater);//"Now it's defined!"
})();

这就是为什么上述代码不报异常的原因!变量和函数经过“被提前”之后,declaredLater 变量其实就被放在了调用函数的前面,根据 JavaScript 语法的定义,已声明而未被赋值的变量会被自动赋值为 undefined ,所以,第一次打印 declaredLater 变量的值就是 undefined,后面我们对 declaredLater 变量进行了赋值操作,所以,第二次再打印变量就会输出Now it's defined!。

再来看一个例子:

var name = "Baggins";
(function () {
 console.log("Original name was " + name);// "Original name was undefined"
 var name = "Underhill";
 console.log("New name is " + name);// "New name is Underhill"
})();

上述代码中,我们先声明了一个变量 name ,我们的本意是希望在第一次打印 name 变量时能够输出全局范围内定义的 name 变量,然后再在函数中定义一个局部 name 变量覆盖全局变量,最后输出局部变量的值。可是第一次输出的结果和我们的预期完全不一致,原因就是我们定义的局部变量在其作用域内被“提前”了,也就是变成了如下形式:

var name = "Baggins";
(function () {
 var name; //注意:name 变量被提前了!
 console.log("Original name was " + name);// "Original name was undefined"
 name = "Underhill";
 console.log("New name is " + name);//"New name is Underhill"
})();

由于 JavaScript 具有这样的“怪癖”,所以建议大家将变量声明放在作用域的最上方,这样就能时刻提醒自己注意了。

2、函数声明“被提前”

前边说的是变量,接下来我们说说函数。

函数的“被提前”还要分两种情况,一种是函数声明,第二种是函数作为值赋值给变量,也即函数表达式。

先说第一种情况,上代码:

isItHoisted();//"Yes!"
function isItHoisted() { 
 console.log("Yes!");
}

如上所示,JavaScript 解释器允许你在函数声明之前使用,也就是说,函数声明并不仅仅是函数名“被提前”了,整个函数的定义也“被提前”了!所以上述代码能够正确执行。

再来看第二种情况:函数表达式形式。还是先上代码:

definitionHoisted();// "Definition hoisted!"
definitionNotHoisted();// TypeError: undefined is not a function
function definitionHoisted() { 
 console.log("Definition hoisted!");
}
var definitionNotHoisted = function () { 
 console.log("Definition not hoisted!");
};

我们做了一个对比,definitionHoisted 函数被妥妥的执行了,符合第一种类型;definitionNotHoisted 变量“被提前”了,但是他的赋值(也就是函数)并没有被提前,从这一点上来说,和前面我们所讲的变量“被提前”是完全一致的,并且,由于“被提前”的变量的默认值是 undefined ,所以报的错误属于“类型不匹配”,因为 undefined 不是函数,当然不能被调用。

总结
通过上面的讲解可以总结如下:

变量的声明被提前到作用域顶部,赋值保留在原地
函数声明整个“被提前”
函数表达式时,只有变量“被提前”了,函数没有“被提前”
3、var的副作用

隐式全局变量和明确定义的全局变量间有些小的差异,就是通过delete操作符让变量未定义的能力。

通过var创建的全局变量(任何函数之外的程序中创建)是不能被删除的。
无var创建的隐式全局变量(无视是否在函数中创建)是能被删除的。
这表明,在技术上,隐式全局变量并不是真正的全局变量,但它们是全局对象的属性。属性是可以通过delete操作符删除的,而变量是不能的:

// 定义三个全局变量
var global_var = 1;
global_novar = 2;  // 反面教材
(function () {
 global_fromfunc = 3; // 反面教材
}());

// 试图删除
delete global_var;  // false
delete global_novar; // true
delete global_fromfunc; // true

// 测试该删除
typeof global_var;  // "number"
typeof global_novar; // "undefined"
typeof global_fromfunc; // "undefined"

在ES5严格模式下,未声明的变量(如在前面的代码片段中的两个反面教材)工作时会抛出一个错误。

4、单var形式声明变量

在函数顶部使用单var语句是比较有用的一种形式,其好处在于:

提供了一个单一的地方去寻找功能所需要的所有局部变量
防止变量在定义之前使用的逻辑错误
少代码(类型啊传值啊单线完成)
单var形式长得就像下面这个样子:

function func() {
 var a = 1,
  b = 2,
  sum = a + b,
  myobject = {},
  i,
  j;
 // function body...
}

您可以使用一个var语句声明多个变量,并以逗号分隔。像这种初始化变量同时初始化值的做法是很好的。这样子可以防止逻辑错误(所有未初始化但声明的变量的初始值是undefined)和增加代码的可读性。在你看到代码后,你可以根据初始化的值知道这些变量大致的用途。

以上就是针对javascript的var预解析与函数声明提升的学习内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
判断脚本加载是否完成的方法
May 26 Javascript
jquery ajax提交表单数据的两种方式
Nov 24 Javascript
jquery下将选择的checkbox的id组成字符串的方法
Nov 28 Javascript
可自己添加html的伪弹出框实现代码
Sep 08 Javascript
javascript判断是否按回车键并解决浏览器之间的差异
May 13 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
JS Canvas定时器模拟动态加载动画
Sep 17 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
layui实现动态和静态分页
Apr 28 Javascript
js实现轮播图的完整代码
Oct 26 Javascript
layui 实现表单和文件上传一起传到后台的例子
Sep 16 Javascript
跟我学习javascript的全局变量
Nov 16 #Javascript
浅析JavaScript访问对象属性和方法及区别
Nov 16 #Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 #Javascript
简单实现限制uploadify上传个数
Nov 16 #Javascript
跟我学习javascript的隐式强制转换
Nov 16 #Javascript
跟我学习javascript的浮点数精度
Nov 16 #Javascript
跟我学习javascript的严格模式
Nov 16 #Javascript
You might like
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
Referer原理与图片防盗链实现方法详解
2019/07/03 PHP
浅谈javascript 面向对象编程
2009/10/28 Javascript
为JavaScript提供睡眠功能(sleep) 自编译JS引擎
2010/08/16 Javascript
javascript的回调函数应用示例
2014/02/20 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
JS模拟并美化的表单控件完整实例
2015/08/19 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
DropDownList控件绑定数据源的三种方法
2016/12/24 Javascript
jQuery鼠标悬停内容动画切换效果
2017/04/27 jQuery
js如何获取网页所有图片
2017/05/12 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python二叉树定义与遍历方法实例分析
2018/05/25 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Django 多环境配置详解
2019/05/14 Python
Django REST framework 分页的实现代码
2019/06/19 Python
python with语句的原理与用法详解
2020/03/30 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
小学端午节活动总结
2015/02/11 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
学校教师培训工作总结
2015/10/14 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
Java版 简易五子棋小游戏
2022/05/04 Java/Android