跟我学习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 相关文章推荐
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
浏览器解析js生成的html出现样式问题的解决方法
Apr 16 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
AngularJS Toaster使用详解
Feb 24 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
vue实现编辑器键盘抬起时内容跟随光标距顶位置向上滚动效果
May 28 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函数代码
2010/04/22 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
jquery动态添加option示例
2013/12/30 Javascript
jQuery中$.click()无效问题分析
2015/01/29 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
jquery与ajax获取特殊字符实例详解
2017/01/08 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
Python 自动化表单提交实例代码
2017/06/08 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
迷你西餐厅创业计划书范文
2013/12/31 职场文书
施工安全责任书
2014/04/14 职场文书
检讨书范文500字
2015/01/28 职场文书
鲁冰花观后感
2015/06/10 职场文书
班主任寄语2016
2015/12/04 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js