扒一扒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英文日期(有时间)选择器
May 02 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
Feb 27 Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 Javascript
js创建jsonArray传输至后台及后台全面解析
Apr 11 Javascript
JavaScript中自带的 reduce()方法使用示例详解
Aug 10 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
实例讲解JS中pop使用方法
Jan 27 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
vue实现简单的登录弹出框
Oct 26 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中常见的mongodb查询操作
2013/06/20 PHP
PHP mkdir()无写权限的问题解决方法
2014/06/19 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
PHP的Json中文处理解决方案
2016/09/29 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
javascript 函数式编程
2007/08/16 Javascript
img标签中onerror用法
2009/08/13 Javascript
Wordpress ThickBox 点击图片显示下一张图的修改方法
2010/12/11 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
js将URL网址转为16进制加密与解密函数
2020/03/04 Javascript
[04:13]2018国际邀请赛典藏宝瓶Ⅱ饰品一览
2018/07/21 DOTA
python中使用urllib2伪造HTTP报头的2个方法
2014/07/07 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python设置环境变量的原因和方法
2019/06/24 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
CSS3旋转——彩色扇子兼容firefox浏览器
2013/06/04 HTML / CSS
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
学子宴答谢词
2014/01/25 职场文书
财务会计专业自荐书
2014/06/30 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
四群教育工作总结
2015/08/10 职场文书
史上最全的军训拉歌口号
2015/12/25 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang