扒一扒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 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
来自qq的javascript面试题
Jul 24 Javascript
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
最简单的JavaScript图片轮播代码(两种方法)
Dec 18 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
jquery判断对象是否为空并遍历对象的简单实例
Jul 26 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
JavaScript 判断iPhone X Series机型的方法
Jan 28 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数据库操作
2010/11/01 PHP
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
浅谈Javascript数组的使用
2015/07/29 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
2019/01/18 jQuery
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
javascript异步编程的六种方式总结
2019/05/17 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
python九九乘法表的实例
2017/09/26 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
食品安全宣传标语
2014/06/07 职场文书
社区服务标语
2014/07/01 职场文书
创先争优演讲稿
2014/09/15 职场文书
三人合伙协议书范本
2014/10/29 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
学者《孟子》名人名言
2019/08/09 职场文书
关于nginx 实现jira反向代理的问题
2021/09/25 Servers
Mysql数据库事务的脏读幻读及不可重复读详解
2022/05/30 MySQL