javascript预编译练习（变态篇）

例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。

执行结果

 

posted @ 2019-06-13 18:20  一笑任逍遥  阅读(735)  评论(0)    收藏  举报