javaScript函数预编译与AO，理解起来费劲，我们用著名的小品《昨天今天明天》做例子，带大家了解一下预编译与AO的过程吧。
将小品中的白云（宋丹丹）、黑土（赵本山）作为变量，
var bai; //白云（宋丹丹）
var hei; //黑土（赵本山）
wutai();//舞台作为函数。
小品《昨天今天明天》截图
还记得javaScript函数预编译过程吗：
1、创建AO对象（执行期上下文 ），寻找函数形参和变量声明。
2、把形参和变量名作为AO属性名，值为undefined。
3、把实参赋给形参，实参形参相统一。
4、寻找函数声明,赋值函数体。
5、函数开始执行。
通过下面这个例子一，试着分析函数预编译过程吧：
第一个例子
例1的AO执行过程
对照代码和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 "白云站起来"}
代码第三行，白云赋值字符串：“白云说”，从这里开始，白云的值变成了"白云说"。
结合小品可以理解为，舞台上，白云坐下，开始说话了。
第四行，打印白云的结果，仍旧是上一行赋予的值"白云说"。
第五行，函数声明早已经在预编译是被提升走了，不用看了。
第六行，打印白云的结果，仍旧是第三行赋予的值"白云说"。
结合小品可以理解为，舞台上，白云坐的稳稳当当，还在说话。 "白云站起来"那件事儿，早过去了，没有黑土和小崔什么事儿。
第七行，给黑土赋值函数。
第八行，打印黑土的结果，当然就是上一行赋值的函数喽。
结合小品可以理解为，舞台上，黑土费劲的站了起来。
第九行，小崔终于站起来了，但是也没他什么事儿了（函数运行结束，没有打印他）
看个视频轻松一下，再看第二个例子
改革春风吹满地
原版在哔哩哔哩，但是简书仅支持优酷和腾讯，没办法。
第二个例子，更深入一步。
第二个例子
例2的AO执行过程
看看执行结果吧！
例2执行结果
这个我就不深入写了，大家看看小品，一行一行对照分析吧！
赵本山宋丹丹《昨天今天明天》 白云黑土乐翻天
网友评论