函数优先级大于变量优先级的深入探究————浏览器的预解析过程
2016-11-15 16:13
344 查看
函数优先级大于变量优先级的深入探究————浏览器的预解析过程
先由一道小题进入本文
var foo; function foo(){} console.log(foo);
结果是函数体
function foo(){}
接着下面一道题:
function foo(){} var foo; console.log(foo);
结果也是函数体
function foo(){}
所有就有很多人说,函数声明的优先级大于变量声明的优先级。那么,为什么呢?这就要从浏览器的预解析说起了。
预解析流程
搜寻预解析关键字寻找var关键字
寻找function关键字
执行预解析
先应用var关键字声明的标识符,使这些标识符有定义
标识符有定以后,使用这项标识符就不会报错了
但因为没有赋值,因此其值为undefined
至此标识符中保存了函数的引用
几个需要注意的细节
var 关键字对同一个标识符重复使用时,除第一次有效外,其他均做忽略处理。预解析时先处理变量声明,再处理函数声明
不要纠结谁的优先级高,这些只是表面现象
懂得了预解析流程,一切都是浮云
看了预解析原理以后,下面咱们回到本文开头的两题,分析下预解析的过程,详细的了解为什么函数的优先级高于变量的优先级。follow me—->
先看第一个
var foo; function foo(){} console.log(foo);
预解析过程为:
var foo;<----变量声明的var var foo;<----函数声明抽出的var foo=function (){}<----函数声明抽出的赋值 console.log(foo);
再来看第二个,
function foo(){} var foo; console.log(foo);
预解析过程为:
var foo;<----变量声明的var var foo;<----函数声明抽出的var foo=function (){}<----函数声明抽出的赋值 console.log(foo);
比较这两个,你发现了什么?原来他们的预解析过程一样啊,这也就是为什么函数优先级高于变量的原因了。
如果你理解了上面的内容,那么下面再出一个题:
var a=1; function a(){} console.log(a);
这个浏览器是如何解析的呢?下面来跟着我的思路一起走:
1. 解析器首先搜寻var 关键字,结果第一行就发现了,把它提取到开头。
2. 解析器搜寻function关键字,第二行发现了,首先分离var+函数名,此时发现和第一步的一样,不做处理,然后开始分离函数的赋值,也就是
a=function (){},此时a为函数体。
3. 解析器接着处理变量的赋值,
a=1,上一步的函数体被覆盖掉,此时a=1。
4. 最后处理
console.log(a),自然而然的结果为1。
下面是解析器处理的代码过程:
var a;<----变量声明的var var a;<----函数声明抽出的var a=function (){}<----函数声明抽出的赋值 a=1; console.log(a);
先整理到这里,有什么错误和疑惑欢迎指出来。
相关文章推荐
- 解析VC中创建DLL,导出全局变量,函数和类的深入分析
- javascript笔记:深入了函数的作用域链及标识符解析的过程
- javascript笔记:深入了函数的作用域链及标识符解析的过程
- 深入探究函数返回局部变量
- 深入探索c/c++函数(2)---普通成员函数调用的基本过程
- 深入剖析C++继承,多态以及隐藏(一)。(虚函数探究)
- 浏览器加载、渲染和解析过程的黑箱分析
- 浏览器加载、渲染和解析过程的黑箱分析
- ASP基础教程:ASP脚本变量、函数、过程和条件语句
- 【转】Web Control 开发系列(二) 深入解析Page的PostBack过程和IPostBackDataHandler
- 浏览器加载、渲染和解析过程的黑箱分析[ZT]
- 跨站脚本攻击深入解析之:漏洞利用过程
- 原创 深入解析MySQL的学习过程
- 存储过程函数中如何定义表变量,删除表变量内容
- 浏览器第一次加载HTML Viewer,显示初始地图时的函数调用过程
- 深入探索c/c++函数(2)---普通成员函数调用的基本过程
- Web Control 开发系列(二) 深入解析Page的PostBack过程和IPostBackDataHandler
- WinProc窗口过程定义函数解析-【学习札记】
- [Joe 原创] Web Control 开发系列(二) 深入解析Page的PostBack过程和IPostBackDataHandler
- js 函数的执行环境和作用域链的深入解析