从JavaScript预编译看function的生存时间

今天做Ajax发现一个现象：Ajax部分刷新后，新生成的页面仍然能够调用刷新前页面的function。上网搜集资料后发现，该现象与JS的预编译有关。

--Brisk Yu

<script>var a = 1;function b() {alert(a);var a = 2;alert(a);}b();
</script>

观察以上JS代码，输出的结果是 undefined 和 2，而不是 1 和 2。

1）当JS执行到<script>标签时会首先进入“预编译”阶段。此时解释器会：

　　1 寻找var，将其作为window的属性，并赋值undefined；

　　2 寻找function，将其作为window的属性，并将方法体赋值给它。

因此此时window对象看起来像是这样：

window = {//document等属性。。。
    a:undefined,b:function b() {alert(a);var a = 2;alert(a);}
}

2）此时开始逐行执行JS代码，执行完var a=1;后，window对象中的属性值被更新：

window = {//document等属性。。。a:1,b:function b() {alert(a);var a = 2;alert(a);}
}

3）接下来执行代码b(); 此时进入方法体后会再次进行预编译，即寻找var 和 function关键字。

此时会创建活动对象AO（Active Object）^[2]：

在一个函数对象被调用的时候，会创建一个活动对象，首先将该函数的每个形参和实参，都添加为该活动对象的属性和值；将该函数体内显示声明的变量和函数，也添加为该活动的的属性（在刚进入该函数执行环境时，未赋值，所以值为undefined，这个是JS的提前声明机制）^[1]。

此时function b的AO形如：

AO = {//arguments等属性。。。
    a:undefined
}

4）逐步执行function b 中的代码。执行第一个alert时a:undefined，执行第二个alert时a:2。

5）综上所述，页面加载时，JS的预编译将var 和 function添加到了window对象作为其的属性。因此当Ajax部分刷新页面时，window对象的属性并没有变，所以新页面仍然能调用其方法。（我认为：JS执行方法不是到代码中去找方法体，而是去window对象中找是否有相关属性，其属性值即为方法体）

参考资料：

[1] https://www.cnblogs.com/amy-fox/p/5856771.html

[2] https://blog.csdn.net/q1056843325/article/details/52951114

转载于:https://www.cnblogs.com/brisk/p/9629234.html

从JavaScript预编译看function的生存时间相关推荐

JavaScript预编译过程
JavaScript预编译过程阶段(三个) 预编译过程 1. JavaScript代码执行之前的预编译案例说明 2. 函数执行前的预编译案例说明总结预编译两个小规则: 预编译前奏阶段(三个 ...
5单个编译总会编译全部_5分钟读懂JavaScript预编译
大家都知道JavaScript是解释型语言,既然是解释型语言,就是编译一行,执行一行,那又何来预编译一说呢?脚本执行js引擎都做了什么呢?今天我们就来看看吧. 1-JavaScript运行三部曲语法 ...
JavaScript预编译
前言:在JavaScript中存在一种预编译的机制,这也是Java等一些语言中没有的特性,也就正是因为这个预编译的机制,导致了js中变量提升的一些问题,下面这两句话能解决开发当中一部份问题,但不能解决 ...
Javascript作用域原理---预编译
问题的提出首先看一个例子: var name = 'laruence'; function echo() { alert(name); var name = 'eve'; alert(name); ...
JavaScript的预编译及执行顺序
从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序. 如果说,JavaScript引擎的工作机制比较深奥是 ...
JavaScript作用域原理——预编译
JavaScript是一种脚本语言, 它的执行过程, 是一种翻译执行的过程.并且JavaScript是有预编译过程的,在执行每一段脚本代码之前, 都会首先处理var关键字和function定义式(函数 ...
javascript运行过程中的“预编译阶段”和“执行阶段”
javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段而在javascript中也有类似的"预编译阶段"(javascrip ...
javascript代码块概念及预编译机制
JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript语言的运行机制,或者简单地 ...
javascript之预编译
首先要记住:预编译发生在函数执行的前一刻先来一个小知识: 函数声明整体提升 test(); function test(){...//省略n行代码 } 在预编译阶段,会把函数声明提升到代码顶部: f ...
JavaScript中函数作用域之精辟，函数原理的浅入深出，及程序执行预编译之通天编译？？？
1.程序执行的前一刻会先将代码预编译一遍,如果有语法错误则直接终止程序运行 //预编译之通天编译 --> 在执行的前一刻,会把文件通天扫描一遍 /** //预编译函数整体提升(即函数会放到程序 ...

从JavaScript预编译看function的生存时间

从JavaScript预编译看function的生存时间相关推荐

最新文章

热门文章