js预编译原理

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>js预编译原理</title>
</head>
<body>
<script type="text/javascript">
	// var a = 0.1 , b = 0.2;
	// if(a + b == 0.1){
	// 	document.write('√');
	// }else{
	// 	document.write('×');
	// }   注释内容可自行操作一下看看结果，这里lz告诉你结果是×


	test();
	function test() {
		document.writeln('有输出');
	} //结果是可以输出


	document.write(a);
	var a = 123; //结果输出的是undefined


</script>  <!--3.125e7-->
</body>
</html>

可见javascript的预编译过程遵循2个要素：

1.函数声明整体提升

2.变量声明提升

<!DOCTYPE html>
<html>
<head>
	<title>js预编译处理</title>
	<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
	function fn(a) {

		console.log(a);

		var a = 123;

		console.log(a);

		function a () {}

		console.log(a);

		var b = function () {}

		console.log(b);

		function d () {}
	}

	fn(1);


//预编译过程:
// 1.首先创建一个AO对象（ Action Object ） （ 执行期上下文 ） 
// 2.查看函数体形参和变量声明，将其作为AO属性名并赋值为undefined
// 3.实参和形参统一
// 4.在函数体里找函数声明，值赋予函数体

// AO {

// 1. 	a : undefined,
// 		b : undefined,

// 2. 	a : 1,
// 		b : undefined;

// 3.   a : function a () {},
// 		b : undefined,
// 		d : function d () {}
// }

// 所以打印结果:   123   function a() {}   function b() {}   123


</script>
</body>
</html>

以为这就完了？学懂让你怀疑以前函数白学了。

<!DOCTYPE html>
<html>
<head>
	<title>预编译处理2</title>
	<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
	//上述预编译处理是在函数内部，而全局预编译处理大同小异，全局预编译会先生成一个GO对象，这里G0 === Window，举个小例子： 

	var c = 123;
	function c() {}
	console.log(c);    //整体先预编译后才有内部编译，因此AO对象会覆盖GO对象



	function test() {
		var a = b = 234;
		console.log();
		console.log(window.b); //未经声明呗赋值的变量归全局对象所有，结果234
		console.log(window.a); //a是AO对象而非全局对象，结果为undefined
	}
	test();
</script>
</body>
</html>

<script type="text/javascript">
	//弄懂了再看这个例子
	global = 100;
	function fn () {
		console.log(global);
		global = 200;
		console.log(global);
		var global = 300;
		console.log(window.global);
	}
	fn();
	var global;

	//结果： undefined   200    undefined //lz看了一晚上才弄懂，比较搅，各位想搞懂可以去找资料详看
	//分析：
	//       首先创建  GO {
   //            		global : 100,
			// 		}
			//  执行fn()
			//  然后  AO {
			//  	global : undefined,
			//  	global : 200,
			//  	global : 300, window.global : 100;
			//  } 

	//  GO {
	//	x : undefined,
	//	z : 234,
	//}

	function fx() {
		console.log(y);    //AO执行完，undefined
		if(x) {
			var y = 100;
		}
		console.log(y);     //x无值，undefined
		z = 234;
		console.log(z);      //AO无此变量，上GO要，234
	}

	var x;
	AO {
		y : undefined,

	}
	fx();
	x = 10;
	console.log(z);    //全局，234

</script>

猜你喜欢