javaScript函数预编译与AO,理解起来费劲,我们用著名的小品《昨天今天明天》做例子,带大家了解一下预编译与AO的过程吧。
将小品中的白云(宋丹丹)、黑土(赵本山)作为变量,
var bai; //白云(宋丹丹)
var hei; //黑土(赵本山)
wutai();//舞台作为函数。

还记得javaScript函数预编译过程吗:
1、创建AO对象(执行期上下文 ),寻找函数形参和变量声明。
2、把形参和变量名作为AO属性名,值为undefined。
3、把实参赋给形参,实参形参相统一。
4、寻找函数声明,赋值函数体。
5、函数开始执行。
通过下面这个例子一,试着分析函数预编译过程吧:


对照代码和AO执行表格,看表格,一列一列的按照函数预编译过程走一遍,就能理解啦!
看看执行结果吧!最好你看上面的例子一,想一想之后,在看下面的执行结果。

前方高能——详细解析过程,请逐字逐句阅读。
首先javaScript的执行过程,会先扫描一下整体语法语句,如果存在逻辑错误或者语法错误,就直接报错喽!!程序停止执行。
没有错误的话呢,才开始从上到下解释一行执行一行。
计算机执行到wutai()函数时,在执行的前一刻会创建一个AO对象。
ao{
}
这是第一步,创建了一个ao对象。
第二步是将函数内所有的形参和变量声明储存到ao对象中,value值为undefined;

我们还是按照小品《昨天今天明天》来理解,舞台函数wutai()内有白云、黑土、和小崔,前俩人的值为undefined,而小崔没有,因为在函数wutai()内只有var bai和var hei。cui(小崔)没有声明。
第三步将形参和实参进行统一。

这一步,看上面代码第12行:
wutai("白云先说");
"白云先说"作为实参,传递进函数内,
也可以理解为导演(在舞台外)给函数内(舞台内)的白云传递一句话"白云先说",那导演能否得逞呢?看第四步。
第四步将所有的函数声明的函数名作为ao对象中的key,函数整体内容作为value,存储到ao对象中。

也就是函数wutai内的所有函数声明提前到wutai最顶部,函数提升。
结合小品也可以理解为白云、黑土、和小崔都想在舞台内站起来,谁能站起来呢?
看上图的表格,只看到白云和小崔站起来了,黑土呢?
向上翻到代码,可以看到第七行:
var hei = function(){return "黑土站起来"}
这是一个函数表达式,不是函数声明哟,所以黑土站不起来。
好了,到这里预编译结束,函数开始一行一行的执行,遇到console.log命令就打印结果。

函数执行到第二行,打印白云的结果,仍旧是预编译时,白云最后的状态:
function bai(){return "白云站起来"}
代码第三行,白云赋值字符串:“白云说”,从这里开始,白云的值变成了"白云说"。
结合小品可以理解为,舞台上,白云坐下,开始说话了。
第四行,打印白云的结果,仍旧是上一行赋予的值"白云说"。
第五行,函数声明早已经在预编译是被提升走了,不用看了。
第六行,打印白云的结果,仍旧是第三行赋予的值"白云说"。
结合小品可以理解为,舞台上,白云坐的稳稳当当,还在说话。 "白云站起来"那件事儿,早过去了,没有黑土和小崔什么事儿。
第七行,给黑土赋值函数。
第八行,打印黑土的结果,当然就是上一行赋值的函数喽。
结合小品可以理解为,舞台上,黑土费劲的站了起来。
第九行,小崔终于站起来了,但是也没他什么事儿了(函数运行结束,没有打印他)
看个视频轻松一下,再看第二个例子
改革春风吹满地
原版在哔哩哔哩,但是简书仅支持优酷和腾讯,没办法。
第二个例子,更深入一步。


看看执行结果吧!

这个我就不深入写了,大家看看小品,一行一行对照分析吧!
赵本山宋丹丹《昨天今天明天》 白云黑土乐翻天
网友评论