JS预编译

一。了解。JS运行三部曲

预编译:(表象)   1.函数声明 整体提升

                              2.变量声明 声明提升

二。预编译前奏

全部变量:任何变量未经声明就被赋值,就是全局变量。

var a = b = 123;
console.log(a);
console.log(b);

结果:
123
123



解释:
//var a ;
//b=123;
//a=b;   (3)
// b :全局变量

AO{ a:undefined }
GO{ b:123 } 

在执行到   (3)   时,AO中的a被123值覆盖。
这里的AO,GO只是针对执行期上下文而言,即仅仅是预编译过程中值的情况。预编译结束后进行函数的执行,执行过程中的赋值语句会对AO,GO中的变量进行一个覆盖,应该以执行结束后的结果为最终的变量标准。

预编译发生在函数执行的前一刻。

三。预编译的过程(分四步):

1.创建AO对象(执行期上下文)

2.找形参和变量声明,将变量名和形参名作为AO属性名,初始值为undefined

3.将实参值和形参统一

4.在函数体里面找变量声明,值赋予函数体

注意:这里的AO,GO只是针对执行期上下文而言,即仅仅是预编译过程中值的情况。预编译结束后进行函数的执行,执行过程中的赋值语句会对AO,GO中的变量进行一个覆盖,应该以执行结束后的结果为最终的变量标准。

实例一:

<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);
	</script>


运行结果:
ƒ a(){}
123
123
ƒ (){}

解释: 预编译结束时,执行期上下文应该是:
                 AO{
                        a : ƒ a(){} ,
                        b : undefined ,
                        c : ƒ b(){}
                   }
在执行到 var a = 123; 时,a 被123覆盖

 

实例二:这个实例教给大家的知识点是:

AO和GO中都有某一个相同名字的变量时,当用到这个变量的时候,系统会先从AO中进行查找,如果AO中不存在,再去GO中查找该变量。

<script type="text/javascript">
		global = 100;
		function fn(){
			console.log(global); //undefined
			global = 200;
			console.log(global); //200
			var global = 300;
		}
		fn();
		var global;
	</script>

      ->  表示的是在执行环境中变量的变化

	AO{
		global:undefined -> 200 ->300
	}
	GO{
		global:undefined ->100
	}

实例三:  大家看下面这个代码的时候,一些细节性的问题要理解仔细,否则的很容易对自己造成误解,并且容易出错。

所有的  =  操作都是在函数执行时 进行的。在编译过程中不进行,哪怕是全局变量的 = 也是在代码执行过程中才进行赋值操作的。

<script type="text/javascript">
		function text(){
			console.log(b); //undefined
			if(a){
				var b = 100;
			}
			console.log(b);
			//console.log(c);  在这里添加这一行他会报错,c未定义 
			c = 234;        //这里定义了一个全局变量c,函数执行到这一步,赋值234给c
			console.log(c); //234  
		}
		var a;  //这里声明了a,对于text函数来说是一个全局变量。上面全局变量c未声明,所以打印会报错。如果把这一行删除,那么a的打印也会报错。
		text();
		a = 10;
		console.log(c);
	</script>

	AO{
		b:undefined 
	}
	GO{
		a:undefined ->10
		c: undefined ->234
	}

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值