JavaScript预解析及相关技巧分析


Posted in Javascript onApril 21, 2016

本文实例讲述了JavaScript预解析及相关技巧。分享给大家供大家参考,具体如下:

变量

同样,以这两个小例子的错误对比提示开始。

alert(y1);     //代码段1
var y1 = 'dddd';
alert(y2);     //代码段2 // alert(typeof y2);
y2 = 'xxxxx';

先思考一下,为什么一个会提示 undefined , 一个却抛出变量未定义的错。。先看JavaScript的解析过程。

javascript在执行过程之前,会做一件事件“预解析”。解析引擎会以块为单位级别,执行所有 var 变量的创建,并赐予它们一个初始值:undefined。这样一来,第一个例子为什么会弹出undefined的原因就显而易见了。

所以第一段代码其实就等价于

var y1;
alert(typeof y1); //很自然,它此时值为undefined
y1 = 'dddd';

那第二段代码为什么又抛错呢,此时就不再属于“预解析”阶段了,(在这里我假设浏览器遇到一个script标签时只做两件事:预解析和执行,其实不 只这两件事情),而处于执行阶段,抛错原因在于js在执行段状态并不知晓y2的状态(预解析阶段没有捕获到y2的任何信息),当然就抛出未定义的错误信 息。这里又牵扯到另一个问题: js 是弱类型语言,变量不定义可以用,那为什么这里又抛出为定义错误呢。

事出总有因,javascript总有很多自身奇怪的特性,有一个叫变量的读写不均等。未定义的变量,仅仅是可写,并不可读。何为可写,每个人都熟悉这样的写法:

y2 = 'exam';  
//在没出现它的定义操作之前(即在它还没有自己的scope之前)该操作会将这段代码认为是定义一个全局变量,在window上注册一个属性y2,并赋值为exam

但在对它的读操作,js引擎搜寻不到它的任何相关信息,就以自己的脾气行事,毫不客气抛一个未定义的错,这是js的游戏规则。还有但是,那为什么却 可以获取它的类型呢。还记得 js对对象的操作吧。如果访问对象一个不存在的属性及类型,会提示undefined, (因为它当前是window对象的一个属性)。

再注:这里需要区分, 变量的读写不均等 仅用于变量,读取所有对象的属性,不存在该特性,如果不存在,会提示undefined。

结论

到这里,我的思考结果: 对于变量和对象的写操作,他们有一定的类似之处.但是读操作,各有各的一套规则,正因为此,所以有了上面的问题。
这样一来,下面这个题应该就很容易得到答案了吧。

if (!('a' in window)) {
  var a = 1;
}
alert(a);

函数

引申一下,function. 还记得上面提到的预解析,在javascript的预解析中,除了对var 变量的预定义,还包括了提取对函数的定义,所以可以在script的任何地方定义函数,在任何地方调用。不限于它之前.

但函数的定义方式,包括了一种叫字面量定义法, 用var的方法声明function.看下面

alert(typeof y3); //结果?
var y3 = function (){ console.log('1'); }

还记得这个约定吧:调用必须出现在声明之后,为什么呢,如果理解了上面,其实这里答案已经明了。javascript 引擎在预解析 var 时 会给他们一个初始值 undefined,这样一来,如果我们在它的声明之前调用它,javascript 引擎还没拿到它的真实值,自然会报"xxx is not a function" 的错.这也理清了为什么同为函数声明,一个却关系到声明和调用的顺序,一个却无这样的约束。

结论

它是函数,是js执行,动态修改的结果,依然遵循了变量的预解析规则(在上面alert的时候,它还并没有拿到字面量函数的信息)。
如果是两个混合呢。看下面, 同时存在了为y4的变量和function。

alert(typeof y4); //结果?
function y4(){
  console.log('y4')
}
var y4;

因为 javascript 在预解析时function的声明优先级高的缘故,所以y4自然为function类型, 但是在当y4 赋值之后(此时js引擎处于执行过程中),它对js的赋值操作将会覆盖function的声明。所以:

alert(typeof y5);
var y5 = 'angle';
function y5(){
  console.log('ghost');  
}
alert(y5);

第一次alert结果,因为它处于js 执行过程中的顶端,所以为 function。 第二次再alert时, 它的值已经被重写为5(不要被function的定义位置在下所迷惑。)

从js的解析和执行分开来想,才发现眼前豁然开朗,很多问题的答案都很自然得浮出水面,正如那篇文章作者所说,"一旦理解了执行环境、调用对象、闭包、词法作用域、作用域链这些概念,JS语言的很多现象都能迎刃而解。"

现在再看,即使在这个存在着很多不可思议的语言中,也有很多可以追溯到它的缘由。

如何更好的做参数判断

讨论了上面那么多,那如何让它更贴近于实际开发呢,既然javascript的读写不均等性,如何才能避免在不报错的情况下做参数判断呢。

eg:

if(cusVar){ //这里的判断,是不是存在隐含的问题呢。 }

如何严谨一些呢。

if(window['cusVar']) { //保证它不报错。
  //或者这样的判断也是可行的 window.cusVar | typeof cusVar !== 'undefined'
  //干活咯
}

最后补充又一个小quiz, (理解 预解析与执行的分离)

var y7 = 'test';
function fun1(){
  alert(y7);
  var y7 = 'sex';
}
fun1();

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
由浅到深了解JavaScript类
Sep 08 Javascript
javascript判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
jQuery中outerHeight()方法用法实例
Jan 19 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 Javascript
js实现无缝轮播图插件封装
Jul 31 Javascript
JavaScript实现显示函数调用堆栈的方法
Apr 21 #Javascript
JS实现队列与堆栈的方法
Apr 21 #Javascript
JS、jQuery中select的用法详解
Apr 21 #Javascript
jQuery中iframe的操作(点击按钮新增窗口)
Apr 20 #Javascript
JS生成某个范围的随机数【四种情况详解】
Apr 20 #Javascript
浅析JS动态创建元素【两种方法】
Apr 20 #Javascript
纯JS代码实现一键分享功能
Apr 20 #Javascript
You might like
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
php使用for语句输出三角形的方法
2015/06/09 PHP
PHP curl使用实例
2015/07/02 PHP
php检测文本的编码
2015/07/26 PHP
javascript 解析后的xml对象的读取方法细解
2009/07/25 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
vue子父组件通信的实现代码
2017/07/09 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
实例介绍JavaScript中多种组合继承
2019/01/20 Javascript
使用webpack搭建vue项目实现脚手架功能
2019/03/15 Javascript
DatePickerDialog 自定义样式及使用全解
2019/07/09 Javascript
ES6 十大特性简介
2020/12/09 Javascript
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
浅析python的优势和不足之处
2018/11/20 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
降低python版本的操作方法
2020/09/11 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
python源文件的字符编码知识点详解
2021/03/04 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
eDreams意大利:南欧领先的在线旅行社
2018/11/23 全球购物
门卫岗位职责说明书
2014/08/18 职场文书
社会实践单位意见
2015/06/05 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
Win11怎么跳过联网验机 ?Win11跳过联网验机激活教程
2022/04/05 数码科技
Alexa停服!网站排名将何去何从?目前还没有替代品。
2022/04/15 杂记