js高级知识---词法分析和AO 链
转载自https://www.cnblogs.com/OceanHeaven/p/4957704.html
上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代码:
var name = "test";
function t() {
var b = 1;
if (b === 1) {
var name = "test1";
} else {
var name = "test2";
}
console.log(name);
}
t();
这段代码的结果是test1
这个肯定是没有什么问题了,但是如果把代码作如下修改:
修改1:
var name = "test";
function t() {
console.log(name);
var name = "test1";
console.log(name);
}
t(); 修改2:
var name = "test";
function t() {
console.log(name);
/***********
// var b = 1;
// if (b === 1) {
// var name = "test1";
// } else {
// var name = "test2";
// }
// console.log(name);
******************/
}
t();
这两个都是基于原来的代码修改,运行的结果分别是undefine,test1和test,噫!
这个是修改1后的输出:
这个是什么原因呢?原来在js运行前会有一个类似编译的过程------词法分析。首先看下记法分析的过程,词法分析主要分三个步骤:
1、先分析参数
2、再分析变量的声明
3、分析函数说明
具体的步骤:
0:函数的在运行的瞬间,生成一个活动对象(Active Object)就是所谓的AO
1:分析参数
1-1:函数接收参数,添加到AO的属性上面,值全部都是undefine,如AO.age=undefine
1-2:接收实参,形成AO对应的属性值
2:分析变量声明,如var age,
2-1:如果AO上还没有age属性,则添加AO 属性,值是undefine
2-2:如果AO 上面已经有了age属性,则不做任何操作。
3:分析函数的声明,如果funcion foo(){},
3-1: 则把函数赋给AO.fooo,如果数据属性已经存在,则要被现在的新的值覆盖
下面开始分析上面修改1的执行的过程(自上崦下):
1、在window上面形成一个AO链,AO.name=undefine;
2、在函数的内部分析参数,函数没有参数,略过
3、在到变量声明阶段,在t函数的内部形成AO1,AO1.name=undfine;
4、分析函数声明,略过
执行过程:
1、首先是 在外层的AO.name=”test”
2、执行t函数,执行到console.log(name)时,函数内有name属性,就不会在到外面去寻找 执行输出undefine
3、执行赋值语句AO1.name=”test1”
4、输出当前的name值,”test1”;
这个问题解释清楚后,下面再分享几个代码:
function t(age) {
console.log(age);//1
var age = 99;
console.log(age);//2
function age() { }
console.log(age);//3
}
t(5);
这个问题看起来有点晕,但是事事都逃不过一个理,下面开始对这个进行词法分析
1-1、分析参数,有一个参数,形成一个AO.age=undefine;
1-2、接收参数AO.age=5;
2、分析变量声明,有一个var age,发现AO上面有一个AO.age,则不做任何处理
3、分析函数声明,有一个function age(){}声明, 则把原有的age覆盖成AO.age=function(){};
执行过程
1、执行第一个console.log(age)时,当前的AO.age是一个函数,所以输出的一个函数
2、这句var age=99;是对不AO.age的属性赋值,AO.age=99,所以在第二个输出的是99
3、同理第三个输出的是99,因为中间没有改变age值的语句了,
具体结果是,function age(){...},99,99,你算对了么?
如果把代码稍微再改下:
function t(age) {
var age;
console.log(age);
age = "99";
console.log(age);
function age() {
}
console.log(age);
}
t(5);
你发现这个和上面运行的结果一致,虽然js代码是从上到下到下执行的,但从这个例子可以看出,在执行前还有一定规则的“编译”。
好了,现在词法分析说的差不多了,万变不离其宗,下面开始再说几个容易混淆的问题:
对上面的代码再修改
1、
function t(age) {
var age;
console.log(age);
age = "99";
console.log(age);
function age() {
console.log(age);
}
age();//这里不一样
console.log(age);
}
t(5);
说明:这里的与前面的一样,但是这个唯一不同的是调用了age();呵呵,这个输出什么,这里的age根本不是一个函数了,所以肯定要报错了。不要被这个表现的现象忽悠了。
2、
function t(age) {
var age;
//age=99;这里被我注释掉了
console.log(age);
function age() {
console.log(age);
}
age();
console.log(age);
}
t(5);
现在想想答案会是什么?这里没有对age的赋值,说明age是一个函数,当这个函数执行的时候,age函数的内部没有age变量,根据作用域链到外层的函数去找,找到了一个age,但它还是一个函数,又再次输出函数,后面一个也是如此,所以结果是下面结果:
3、把函数声明函数变成用函数表达式
function t(age) {
// var age;
console.log(age);
var age=function () {
console.log(age);
}
age();
console.log(age);
}
t(5);
这个结果应该是?先说下函数的表达式,如果把表达式拆开也就明白了,拆成如下的结果:var age;age=function(){},也就是函数表达是其实是一个变量声明和赋值的过程,而不是一个真正的函数声明!所以有了前面的基础,这个输出就很简单了,答案是5,function(){},function(){};
4、把匿名函数转成“函数声明的形式”
function t(age) {
// var age;
console.log(age);
var age=function age () {
console.log(age);
}
age();
console.log(age);
}
t(5);
这个答案又是什么呢?是不是有点晕?这个结果和上面的结果是一个的,由这两个例子可以看出js的函数表达式只是一个赋值的过程。
好了说了这么多,今天的内容算是说完了, 希望能够让你从另一个全新的角度去考虑js的这门语言。后面会把js的原型链,js的继承链写出来,这三个链写完后,会把js中的this详细的总结下,js的部分有些“坑”说下,希望能够给你带来收获。
js高级知识---词法分析和AO 链的更多相关文章
- 第十九篇 js高级知识---词法分析和AO 链
上面一篇文章说了js的作用域链,这一节算是对上面的延申,有一个典型的例子,首先看原来的一段代码: var name = "test"; function t() { var b = ...
- JavaScript的高级知识---词法分析
JavaScript的高级知识---词法分析 词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 函数在运行的瞬间, ...
- 第20篇 js高级知识---深入原型链
前面把js作用域和词法分析都说了下,今天把原型链说下,写这个文章费了点时间,因为这个东西有点抽象,想用语言表达出来不是很容易,我想写的文章不是简单的是官方的API的copy,而是对自己的知识探索和总结 ...
- 第十八篇 js高级知识---作用域链
一直有想法去写写js方面的东西,我个人是最喜欢js这门语言,喜欢的他的自由和强大,虽然作为脚本语言有很多限制的地方,但也不失为一个好的语言,尤其是在H5出现之后.下面开始说说js的方面的东西,由于自己 ...
- js的高级知识---词法分析
词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active ...
- python成长之路【第十六篇】:JavaScript的高级知识---词法分析
一.词法分析方法 js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 二.具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active O ...
- JS基础知识——原型与原型链
1.如何准确判断一个变量的数组类型 2.写一个原型链继承的例子 3.描述new一个对象的过程 4.zepto(或其他框架中如何使用原型链) 知识点: (1)构造函数 function Foo(name ...
- 从零开始学 Web 之 JS 高级(二)原型链,原型的继承
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- JS高级---一个神奇的原型链
一个神奇的原型链 <script> var divObj=document.getElementById("dv"); console.dir(divObj); //d ...
随机推荐
- 【vue】项目目录结构及使用多的知识点
项目目录: Node_modules/npm安装的该项目的依赖库 vuex/文件夹存放的是和 Vuex store 相关的东西(state对象,actions,mutations) router/文件 ...
- springboot在eclipse中运行使用开发配置,打包后运行使用生产环境默认配置
java命令运行springboot jar文件,指定配置文件可使用如下两个参数中其中一个 --spring.config.location=配置文件路径 -Dspring.profiles.acti ...
- Linux内存管理 (14)匿名页面生命周期
专题:Linux内存管理专题 关键词:匿名页面.换入.换出. 如果要将匿名页面的生命周期进行划分,大概就是诞生.使用.换出.换入和销毁. 内核中使用匿名页面的地方有很多,产生缺页中断之后匿名页面就诞生 ...
- svn 钩子应用 - svn 提交字符限制, 不能为空
一.版本库钩子 1.1 start-commit 开始提交的通知 输入参数:传递给你钩子程序的命令行参数,顺序如下: 1. 版本库路径 2. 认证过的尝试提交的用户名 3. Depth,mer ...
- sass的使用
1.声明变量-全局声明-局部声明 中划线或下划线两种用法相互兼容 $nav-color: #F90; $highlight-border: 1px solid $nav-color; nav{ $ ...
- 646. Maximum Length of Pair Chain(medium)
You are given n pairs of numbers. In every pair, the first number is always smaller than the second ...
- 家庭记账本小程序之改(java web基础版五)
实现修改消费账单 1.main_left.jsp中该部分,调用Servlet中的list方法 2.Servlet中的list方法,调用Dao层的list方法,跳转到list.jsp页面 3.Dao层的 ...
- IRepository<Developer> repository 出现 Abp.Domain.Repositories.IRepository which was not registered.
“/”应用程序中的服务器错误. Can't create component 'SWJ.SSO.DomainServices.TestService' as it has dependencies t ...
- Excel Foundation Install
安装Excel API 函数库 1. 通过下载工具下载函数库 下载 ExcelAPI函数库更新工具 下载 ExcelAPI函数库离线包 ExcelAPI(WPS)函数库离线包 Exc ...
- Apache服务器配置与管理
一.Apache服务器的目录和文件 1.WEB站点目录 /var/www Apache站点文件的目录 /var/www/html 存放WEB站点的WEB文件 /var/www/cgi-bin CGI程 ...