例1、

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<script type="text/javascript">

    global = 100

    function fn(){

        console.log(global);

        global = 200;

        console.log(global);

        var global = 300

    }

    fn()

    var global;

</script>

</body>

</html>

执行分析

先生成GO{}

GO{

　　global:100

　　fn:function(){}

}

函数fn执行前生成AO{}

AO{

　　global:undefined

}

AO中有自己的变量global，不调用GO的global。（就近原则）

执行结果

例2

<!DOCTYPE html>

<html>

<head>

	<title></title>

</head>

<body>

<script type="text/javascript">

	function test(){

		console.log(b)

		if(a){

			var b = 100;

		}

		c = 234;

		console.log(c);

	}

	var a;

	test();

	a = 10;

	console.log(c);

</script>

</body>

</html>

执行分析

首先生成GO

GO{

　　a:undefined

　　test:function test(){}

}

执行test()行时生成AO{}  不要受 if 的影响。

AO{

　　b:undefined

}

//第一个输出为undefinded

接着执行if()模块

此时a为undefined，if()模块为false

接着GO{}中添加一个属性c，值为234

第二个输出为234  第三个输出是234.

执行结果

例3（百度2013笔试题

1）

<!DOCTYPE html>

<html>

<head>

	<title></title>

</head>

<body>

<script type="text/javascript">

	function bar(){

		return foo;

		foo = 10;

		function foo(){

		}

		var foo = 11;

	}

	document.write(bar())

</script>

</body>

</html>

2）

<!DOCTYPE html>

<html>

<head>

    <title></title>

</head>

<body>

<script type="text/javascript">

    function bar(){

        foo = 10;

        function foo(){

        }

        var foo = 11;

        return foo;

    }

    document.write(bar())

</script>

</body>

</html>

1）的预编译分析

执行bar()生成一个AO对象 bar(){}函数中有var foo = 11，即有变量声明foo,值为undefined，  接着有函数function foo(){} ,foo的值被覆盖 为functoin(){}

AO{

　　foo:undefined   --->   foo:function(){}

}

执行结果

2)的预编译分析

同上，最后foo的值被覆盖为11  并return。

执行结果

javascript预编译练习（变态篇）的更多相关文章

  1. 关于JavaScript预编译和执行顺序以及函数引用类型的思考

    昨晚在对项目中的一部分做模块化处理的时候,遇到了一个问题,一个重新定义的function对一个通用类中的function进行赋值覆盖的时候,失败了.问题抽象出来是这样的: <script > ...

  2. javaScript 预编译过程浅尝

    javaScript 预编译过程 1.创建AO对象(Activation Object) AO{ a: } 2.找形参和变量声明,将变量和形参作为AO属性名,值为undefined AO{ a:und ...

  3. JavaScript 预编译与作用域

    JavaScript 预编译与作用域 JavaScript 预编译的过程和作用域的分析步骤是 JS 学习中重要的一环,能够帮助我们知道代码的执行顺序,更好理解闭包的概念 预编译 JavaScript ...

  4. javascript预编译的过程

    预编译的两种情况 全局: 1.全局 直接是script标签中的代码,不包括函数执行执行前:1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析2.分析变量声明,变量 ...

  5. Javascript - 预编译与函数词法作用域

    预编译与函数词法作用域(Precompiled & Scoped) 预编译 Javascript脚本的宿主在执行代码之前对脚本做了预编译处理,比如浏览器对Js进行了预编译,编译器会扫描所有的声 ...

  6. JavaScript预编译详解

    一.js运行三部曲: 1.语法分析(通篇扫描看有没有语法错误) 2.预编译 3.解释执行 二.预编译前奏 1.imply global 暗示全局变量:任何变量如果未经声明就赋值,此变量为全局对象所有 ...

  7. 浅谈JavaScript预编译原理

    这两天又把js的基础重新复习了一下,很多不懂得还是得回归基础,大家都知道js是解释性语言,就是编译一行执行一行,但是在执行的之前,系统会做一些工作: 1,语法分析: 2,预编译: 3,解释执行. 语法 ...

  8. javascript预编译和执行过程总结

    javascript相对于其它语言来说是一种弱类型的语言,在其它如java语言中,程序的执行需要有编译的阶段,而在javascript中也有类似的“预编译阶段”(javascript的预编译是以代码块 ...

  9. JavaScript预编译过程理解

    1-JavaScript运行三部曲 语法分析 预编译 解释执行 语法分析很简单,就是引擎检查你的代码有没有什么低级的语法错误: 解释执行顾名思义便是执行代码了: 预编译简单理解就是在内存中开辟一些空间 ...

随机推荐

  1. 关于HTML5视频标签的问题

    一.基本 video标签在兼容性上还是比较差的,如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8的(Opera.Mozilla.Chrome),支持H.264的( ...

  2. web添加学生信息（首发web）

    程序思路,先在JSP上画好页面,然后再创建一Servlet文件用于判断在网页上操作是否正确,还需要与数据库相连接,用DBUtile文件连接数据库,用Dao层来实现数据的增加,用Service来服务于D ...

  3. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  4. HTML5测试题整理Ⅱ

    1.哪个元素被称为媒体元素的子元素? 答案:<track>. <track> 标签为媒体元素(比如 <audio> and <video>)规定外部文本 ...

  5. maven项目创7 配置分页插件

    页面编写顺序   首先确定是否拥有想要的pojo(对象实体类)———>dao层mybatis配置——>service层的接口及实现类——>controller(web下) 分页插件作 ...

  6. c++几个通用工具

    Pairs(对组) 1.class pair可以将两个值视为一个单元,C++标准程序库内多处使用这个class.尤其容器类别map和multimap,就是使用pairs来管理其键值/实值(key/va ...

  7. python3 基本数据类型转换

    '''基本数据类型1:虽然python中的变量不需要声明,但使用时必须赋值 1.整形变量 2.浮点型变量 3.字符型2:可以一个给多个变量赋值,也可以多个给多个变量赋值3:python3中有6个标准数 ...

  8. Nodepad++中将Tab键替换为空格

    Nodepad++是一个非常优秀的文本编辑工具,本人经常使用其编辑shell脚本,如果不进行设置,Tab键和空格混用,脚本上传到linux后,格式错乱,不容易查看. 设置方式 菜单栏选择"设 ...

  9. koa 基础（二十五）数据库 与 art-template 模板 联动 --- 新增数据

    1.视图层 根目录/views/index.html <!DOCTYPE html> <html lang="en"> <head> <m ...

  10. is幻梦 Linux命令之文件和目录操作命令（二）——查看文件内容cat、more、less、tail、head

    一.cat命令 用法:cat [选项][文件] 1.主要用来查看文件内容 2.-n 在文件内容的每一行上加上行号 3.再不加任何选项和文件名的时候,将标准输入的内容复制到标准输出 这个时候一般用于重定 ...