扒一扒JavaScript 预解释


Posted in Javascript onJanuary 28, 2015

带var关键字预解释

让我们先看下这段代码执行的结果:

alert(n);//弹出undefined

var n = 10;

弹出的结果是undefined,为何不是10?让我们再看下面这段代码执行的结果:

alert(n);

n = 10;

运行报如下错误:

扒一扒JavaScript 预解释

为何这次会报错,原因是代码在运行的时候,没有声明这个变量n;通过这两段代码的比较,我们发现带var关键字和不带var关键字声明的变量是有区别的,带var声明的变量在代码执行之前,似乎浏览器已经给了它们一个初始值undefined,因此我们将代码执行前,浏览器引擎自动扫描带var关键字和带function关键字(后面会提到)声明的变量和定义的函数的这个过程称为预解释。

带function关键字预解释

让我们看下如下代码执行的结果:

fn();//弹出hello

function fn(){

    alert('hello');

}

执行结果弹出hello,fn能够正常执行,原因是在代码执行前fn被预解释了,在预解释时已经将fn定义(defined)了,我们又有疑问了,为何第一段代码执行结果不弹出10,而是undefined,再次引入了另一个概念JavaScript中的声明和定义。

JavaScript中的声明(declare)和定义(defined)

我们通常用var关键来声明变量,用function关键字来定义函数,只不过function关键字声明和定义函数是同时执行的,而var它只能声明变量,并不具备定义的功能。

如下是用var关键字声明的变量:

var n;//声明了一个变量n

var m = 10;//声明了一个变量m,并且将10赋值给它

如下是用function关键字定义的函数:

//定义了一个函数fn

function fn(){

    alert('hello');

}

带var关键字和带function关键字预解释的区别

其实它俩的区别就是带var关键字预解释时只预解释声明部分(因为它本身不具备定义的能力),而带function关键字在预解释时声明和定义同时被预解释。这时我们再回头分析下第一段代码,分析如下:

扒一扒JavaScript 预解释

无节操(坑爹)的预解释

为何说它无节操,请看下面的代码(火狐除外):

alert(n);

fn();

if(false) {

    var n = 10;

    function fn(){

        alert('hello');

    }

}

第一行代码执行会弹出undefined,第二行代码执行会弹出hello;是因为n和fn在代码执行前被预解释了,即使if条件判断为false,执着的浏览器引擎也会将带var关键字声明的变量n和带function关键定义的fn扫描到。

*预解释忽略重新声明,不忽略重新定义

这个地方因为相对比较绕而且不太好理解,所以加了一个星号,请看如下代码:

alert(n);

var n = 10;

var n = 9;

var n;

alert(n);

这段代码执行结果是什么,我们来分析一下:

扒一扒JavaScript 预解释

继续上代码,请分析如下执行结果:

fn();

function fn() {

    alert('1');

}

fn();

function fn() {

    alert('2');

}

fn();

代码分析图如下:

扒一扒JavaScript 预解释

带function定义的函数预解释分析

总结:

本篇博文用了大篇幅代码和截图对JavaScript中预解释作了概述,纵观各种书籍对预解释的描述甚少,其实平时在工作中使用的场景也并不多,遗憾的是预解释是各大公司面试题必考。在刚开始接触它的时候,感觉它总是不按照常理写代码,但是有些时候却能够正常运行并不会报错,当然这也增加了我们对它神秘感的探索,也让我们进一步了解浏览器引擎是怎么解释执行我们的代码。特此在后面的博文中我会拿几道经典的案例来综合分析它,再次感谢大家的支持!

Javascript 相关文章推荐
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
requireJS使用指南
Apr 27 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
仿淘宝JSsearch搜索下拉深度用法
Jan 15 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
vue实现的下拉框功能示例
Jan 29 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
vue mvvm数据响应实现
Nov 11 Javascript
javascript弹出页面回传值的方法
Jan 28 #Javascript
JS获得选取checkbox整行数据的方法
Jan 28 #Javascript
js获取checkbox值的方法
Jan 28 #Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 #Javascript
浅谈javascript的调试
Jan 28 #Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 #Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 #Javascript
You might like
php MYSQL 数据备份类
2009/06/19 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
事件冒泡是什么如何用jquery阻止事件冒泡
2013/03/20 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
Node.js利用js-xlsx处理Excel文件的方法详解
2017/07/05 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
2017/08/18 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
react-native封装插件swiper的使用方法
2018/03/20 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
2019/06/19 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
Python设置默认编码为utf8的方法
2016/07/01 Python
python time.sleep()是睡眠线程还是进程
2019/07/09 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
Python sublime安装及配置过程详解
2020/06/29 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
肯尼迪就职演说稿
2013/12/31 职场文书
便利店的创业计划书
2014/01/15 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
教师工作态度自我评价
2015/03/05 职场文书
如何撰写促销方案?
2019/07/05 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android
java多态注意项小结
2021/10/16 Java/Android
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL