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 相关文章推荐
js 动态选中下拉框
Nov 26 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
angularJS深拷贝详解
Mar 23 Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 jQuery
webpack4 升级迁移的实现
Sep 12 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 Javascript
vue+axios全局添加请求头和参数操作
Jul 24 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
php cache类代码(php数据缓存类)
2010/04/15 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
JavaScript中的事件处理
2008/01/16 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
纯javascript版日历控件
2016/11/24 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
Angular中自定义Debounce Click指令防止重复点击
2017/07/26 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
JavaScript requestAnimationFrame动画详解
2017/09/14 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
python通过zabbix api获取主机
2018/09/17 Python
python pygame实现2048游戏
2018/11/20 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
HTML5 Canvas 起步(1) - 基本概念
2009/05/12 HTML / CSS
常用的HTML5列表标签
2017/06/20 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
如何开发一个JQuery插件
2016/07/28 面试题
澳大利亚商务邀请函
2014/01/17 职场文书
见习期个人总结
2015/03/05 职场文书
担保贷款承诺书
2015/04/30 职场文书
外出听课学习心得体会
2016/01/15 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
《开国大典》教学反思
2016/02/16 职场文书