Javascript 笔记与总结(1-2)词法分析
词法分析,按顺序分析 3 样:
第 1 步:先分析参数
第 2 步:再分析变量声明
第 3 步:再分析函数声明
一个函数能使用的局部变量,就从上面 3 步分析而来。
具体步骤:
0:函数运行前的瞬间,生成 Active Object(活动对象)
1: 1.1 把函数声明的参数,形成 AO (Active Object)的属性,值全是 undefined,
1.2 接受实参形成 AO 相应属性的值
2:分析变量声明,如 var age,如果 AO 上已经有 age 属性,则不作任何影响;如果 AO 上还没有 age 属性,则添加 AO 属性,但此时没赋值,值是 undefined
3:分析函数声明,如 function foo(){},则把函数赋给 AO.foo 属性
注:如果此前 foo 属性已经存在,则会被覆盖成函数
例1
<script>
function a(b){
alert(b);
function b(){
alert(b);
}
b();
}
a(1);
</script>
【答案】:两次弹出
function b(){
alert(b);
}
【分析】
分析期:
0. AO = {}
1.
1.1 分析参数 AO = {b:undefined}
1.2 接收参数 AO = {b:1}
2. 分析 var 声明,此处函数没有 var
3. 分析函数声明,AO = {b:function(){alert(b);}}
执行期:
alert(b); // function
b(); // 由作用域寻找到 a 函数中的 b,即 function,alert() 出来
例2
<script>
function t(age){
alert(age);
}
t(5); //
t(); //undefined
</script>
【分析】
词法分析过程:
AO{ age = undefined }
运行过程:
t(5); → AO.age = 5; alert(AO.age); //5
t(); → AO.age = undefined; //AO.age 没有得到赋值,还是 undefined
例3
<script>
function t(age){
var age = 10;
alert(age);
}
t(5);
</script>
弹出 10。
【分析】
词法分析过程:
0. 形成AO = {}
1.
1.1 分析形参 AO = {age:undefined}
1.2 接收形参:AO = {age:5}
2. 分析 var age,发现 AO 已有 age 属性,不做任何影响
执行过程:
AO.age = 10
alert(age); //10
例4(和例1 做对比):
<script>
function t(greet){
var greet = 'hello';
alert(greet);
function greet(){
}
alert(greet);
}
t(null);
</script>
弹出两次 'hello'
【分析】
词法分析过程:
0. AO = {}
1.
1.1 分析形参:AO = {greet = undefined}
1.2 接收形参:AO = {greet:null}
2. 分析 greet 变量声明,AO 已经有 greet 属性,因此不做任何影响
3. 分析 greet 函数声明,AO.greet = function(){},被覆盖成函数
执行过程:
greet = 'hello';
alert(greet);
alert(greet);
【再分析】
var greet = 'hello';
这一句要当成两句看(两次执行):① 分析期的 var 声明过程 ② 运行期的 赋值 过程
由于在运行期被赋值成了 'hello',因此两次 alert 弹出的都是 'hello'
如果去掉该句(则和例 1 一样)或者改为 var greet; ,则弹出两次
function greet(){}
例5
<script>
function a(b){
alert(b);
b = function (){
alert(b);
}
b();
}
a(1);
</script>
分别弹出 1 和 function (){alert(b)}
【词法分析过程】:
0:AO = {}
1.分析参数 AO = {b:undefined} → {b:1}
2.分析 var 声明,没有
3.分析函数声明,没有
注:b = function(){alert(b)} ,是一个赋值过程,在执行器才起作用
【执行过程】:
alert(b); //b = 1
b = function(){
alert(b); //往上找,找到b = function(){}
}
b(); // funtion
【函数声明 与 函数表达式】:
函数可以赋值给变量,可以作为参数来传递
function t1(){
}
和
t2 = function(){
}
t1 是函数声明,虽然全局内也得到一个 t1 变量,值是 function;
t2 只是一个赋值过程,值是右侧的表达式的返回结果,即函数
因此 t1 和 t2 两种方式在词法分析时,有着本质区别:前者在词法分析阶段就发挥作用,后者在函数运行阶段才发挥作用
例如:
(function(window,undefined){
})(window)
这是 jQuery 的最外层代码
【分析】
(function(window,undefined){})
这是内层表达式,返回值是函数,包在小括号里,当成表达式来执行
(function(window,undefined){})(window)
立即调用
而内层函数又没有起名字,成为匿名函数
这种手法,匿名函数,立即执行,不污染全局,称为 立即执行匿名函数表达式
传 window 是为了速度,不传 undefined 是为了防止外界对 undefined 的污染(在 IE 、FF 低版本中,undefined 可以重新赋值,例如 undefined = 3;)
【作用域链】
指函数由内到外,产生的 AO 链
词法分析时由外至内,分析 AO 链;执行时由内到外,寻找 AO 链
更多词法作用域文章:JavaScript的词法作用域
Javascript 笔记与总结(1-2)词法分析的更多相关文章
- [Effective JavaScript 笔记] 第4条:原始类型优于封闭对象
js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...
- [Effective JavaScript 笔记] 第5条:避免对混合类型使用==运算符
“1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...
- [Effective JavaScript 笔记]第3章:使用函数--个人总结
前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...
- [Effective JavaScript 笔记]第27条:使用闭包而不是字符串来封装代码
函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...
- [Effective JavaScript 笔记]第28条:不要信赖函数对象的toString方法
js函数有一个非凡的特性,即将其源代码重现为字符串的能力. (function(x){ return x+1 }).toString();//"function (x){ return x+ ...
- 从头开始学JavaScript 笔记(一)——基础中的基础
原文:从头开始学JavaScript 笔记(一)--基础中的基础 概要:javascript的组成. 各个组成部分的作用 . 一.javascript的组成 javascript ECMASc ...
- 【原】javascript笔记之Array方法forEach&map&filter&some&every&reduce&reduceRight
做前端有多年了,看过不少技术文章,学了新的技术,但更新迭代快的大前端,庞大的知识库,很多学过就忘记了,特别在项目紧急的条件下,哪怕心中隐隐约约有学过一个方法,但会下意识的使用旧的方法去解决,多年前ES ...
- JavaScript笔记目录
JavaScript笔记目录 一.JavaScript简介 二.在HTML中使用JavaScript ...持续更新中,敬请期待
- 蛋糕仙人的javascript笔记
蛋糕仙人的javascript笔记:https://www.w3cschool.cn/kesyi/kesyi-nqej24rv.html
- JavaScript笔记(第一章,第二章)
JavaScript笔记(第一章,第二章) 第一章: <meta http-equiv="Content-Type" content="text/html; cha ...
随机推荐
- Ajax案例(使用ajax进行加法运算)
此案例功能实现了一边看视频一边进行加法运算,而加法运算时页面不会刷新请求 ajax代码: <script type="text/javascript" src="j ...
- 【读书笔记】读《JavaScript设计模式》之工厂模式
一个类或对象中往往会包含别的对象.在创建这种成员对象时,你可能习惯于使用常规方式,也即用new关键字和类构造函数.问题在于这回导致相关的两个类之间产生依赖性. 工厂模式用于消除这两个类之间的依赖性,它 ...
- Android之UI控件
本文主要包括以下内容 Spinner的使用 Gallery的使用 Spinner的使用 Spinner的实现过程是 1. 在xml文件中定义Spinner的控件 2. 在activity中获取Spin ...
- 实例讲解虚拟机3种网络模式(桥接、nat、Host-only)
转自:http://www.cnblogs.com/ggjucheng/archive/2012/08/19/2646007.html 前言 很多人安装虚拟机的时候,经常遇到不能上网的问题,而vmwa ...
- Android的四大组件
Android的四大组件:Activity.Service.BroadcastReceiver.Content Provider. Content Provider 属于Android应用程序的组件之 ...
- 【转】cloudera新增用户权限配置
转自 http://lookqlp.iteye.com/blog/2189119 . 配置起来较复杂,需要在有测试环境之后再进行配置测试. 之后是有上HUE的计划的,所以这个也是一定要做的. ...
- 人见人爱A^B
求A^B的最后三位数表示的整数.说明:A^B的含义是“A的B次方” Input 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B<=10000),如果A= ...
- Oracle TNS配置浅析
1. 什么是TNS? TNS是Oracle Net的一部分,专门用来管理和配置Oracle数据库和客户端连接的一个工具,在大多数情况下客户端和数据库要通讯,必须配置TNS,当然在少数情况下,不用配置T ...
- 关于StartCoroutine的简单线程使用
StartCoroutine在unity3d的帮助中叫做协程,意思就是启动一个辅助的线程. 在C#中直接有Thread这个线程,但是在unity中有些元素是不能操作的.这个时候可以使用协程来完成. 使 ...
- JAVA7遍历文件夹
在JAVA7中提供了新的遍历文件的方法,比原有File类的递归遍历效率要好大约30%左右. 测试结果: 测试用的File类的递归,是经过对比测试几种方法,找出相对效率较好的来和JAVA7进行测试. 1 ...