本篇文章给大家带来了关于javascript中预编译的相关知识,其中主要通过示例来介绍预编译的相关问题,希望对大家有帮助。
这章主要讲预编译过程
预编译也分为2个时间点:
但是JavaScript代码之前,之前的预编译只发生一次,函数执行之前的预编译是多次的。
window
对象,也可以理解为GO(Global Object
)对象,我们是看不到的(无法打印)var
和let
声明的变量放到GO对象中,并且赋值为undefined
(联想到“变量提升”)<script> var a = 1; console.log(a); console.log(b); var b = 10; function fun (a) { console.log(b); var a = b = 2; var c = 123; console.log(a); console.log(b); } var a2 = 20 fun(1); </script>
结合上面说的步骤:
首先,<script></script>
中的代码执行之前会创建一个GO对象(window对象)
GO = { //自带的属性都不写 }
将所有声明的全局变量、未使用var
和let
声明的变量放到GO对象中,并且赋值为undefined
GO = { a : undefined, b : undefined, a2 : undefined }
分析函数声明,函数名为属性名,值为函数体,如果函数名和变量名相同,则无情覆盖
GO = { a : undefined, b : undefined, a2 : undefined, function fun (a) { var a = b = 2; var c = 123; } }
此时完成了js代码执行之前的预编译过程,开始执行js代码,首先是给a进行赋值为1,在GO对象里边也会进行对应的改变:
GO = { a : 1, b : undefined, a2 : undefined, function fun (a) { var a = b = 2; var c = 123; } }
然后打印a,此时会在GO对象上去找变量a,然后此时的a的值为1,所以console.log(a)
是等于1的。接着打印b,也会去GO对象上找,找到了b的值为undefined
,所以console.log(b)是等于undefined
。
接着执行到赋值语句:b = 10;
此时GO对象里b的值变成了10
GO = { a : 1, b : 10, a2 : undefined, function fun (a) { var a = b = 2; var c = 123; } }
接着下一行代码是一个**fun
函数,此时不会去执行该函数**,因为在前面的预编译过程中实际上是被放到了代码的最前端,就是传说中的声明提前,所以忽略掉了。接着给a2进行赋值操作:a2 = 20
,GO对象也发生变化:
GO = { a : 1, b : 10, a2 : 20, function fun (a) { var a = b = 2; var c = 123; } }
接着是执行fun
函数,如上面说到的另外一个时间点发生的预编译,就是执行函数之前,现在就来说一下函数执行前的预编译是怎么样的。
函数调用,也是会生成自己的作用域(**AO:**Activetion Object,执行期上下文)AO活动对象。函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO
undefined
如果遇到AO对象上属性同名,则无情覆盖
逐行执行。
拿的是上文中的代码示例。
第一步创建AO对象
AO{ }
查找形参和变量声明放到AO对象并赋值为undefined
;
注意:
fun
函数里边的b是未经var声明的,所以是全局变量,不会被放在fun
的AO上。
AO{ a: undefined,//形参a与局部变量a同名 c: undefined }
将实参赋值到形参上
AO{ a: 1, c: undefined, }
查找函数声明放到AO对象并赋值为函数体,fun函数没有函数声明,所以忽略这一步。
函数执行之前的预编译完成,开始执行语句
执行代码
首先执行打印变量b,而此时fun
的AO里边并没有变量b,所以会去GO对象里边找,此时的GO对象b的值为10,所以第一行代码打印出10;
第二行代码首先要看的是b = 2
,然后GO对象里边b的值就被改为2了。
GO = { a : 1, b : 10, a2 : 20, function fun (a) { var a = b = 2; var c = 123; } }
然后b再赋值给a,变量a是属于局部变量a,所以fun
的AO对象里边a的值被改为2。
AO{ a: 2, c: undefined, }
接着下一个赋值语句是c = 123
,所以AO对象中c的值被改为了123
AO{ a: 2, c: 123, }
此时再执行console.log(a)
的值就是AO对象里边a的值 2;执行console.log(b)
的值就是GO对象b的值 2,至此函数fun执行完毕,紧跟着fun的AO也会被销毁。
综上所述,依次打印出来的值为:1,undefined,10,2,2
。
undefined
)imply global(暗示全局变量-专业术语)
即:任何变量,如果未经声明就赋值,则此变量就位全局变量所有。(全局域就是window
,这里再一次说明了JavaScript是基于对象的语言,base on window
)window
的属性;var a=12;
等同于window.a = 12;
(会造成window
这个对象特别臃肿)相关推荐:javascript学习教程、web前端开发视频教程
以上是完全掌握JavaScript预编译过程的详细内容。更多信息请关注PHP中文网其他相关文章!