首页 > 代码库 > 我也来谈javascript高级编程之:javascript函数编译过程

我也来谈javascript高级编程之:javascript函数编译过程

前言

题目有点大,其实也就是手痒。。。跟大家来扯一下javascript编译过程。

那么到底什么是“编译”呢

这个。。。本人文笔太差,我还是直接举例子吧。

相信玩过js童鞋应该都看过下面这样一个面试题:

       var a=3;
       function fn(){ alert(a); function a(){ a=5; }
         a();
         alert(a); 
       } 
       fn();
       alert(a); 
 

请问上面的题目执行结果如何呢?

各位童鞋答对了没。没答对?。。。没关系。别急。下面进一段js科普:

各位童鞋都听过js是一门解释型语言。什么不知道“解释型语言”是啥。。。

“解释型语言”,通俗点说就是指从上往读一行执行一行。什么还是不知道。。。出门左拐 百度百科。

不错,js确实是一门解释型语言。但是,他是“有编译的”解释执行。

什么叫“有编译”,其实就是在执行前是先对整个程序进行整理(其他语言则是通过编译将源代码整理出目标程序)。

下面我们来看一下js的编译过程到底是怎么样的呢;

就拿上面这个例子来说吧:

首先他声明了一个激活对象,用来存储window内变量

active={a:"",fn:""}

然后对函数变量进行赋值

active.fn=function(){  
              alert(a);
              function a(){
              a=5;
}
             a();
             alert(a); 
           } 

然后就开始执行js脚本程序

active.a=a=3;//赋值

 active.fn();//执行函数】

执行到这里又发现一个函数,所以又在他的外层建立了一个“激活对象”。用来保存 fn 函数的变量

fnActive={a:3}//已存在变量直接引用了外层的active;

然后对函数变量进行赋值

 fnActive.a=function{

    a=5;

  }

然后又开始执行js脚本程序

 alert(a);//这时候a是啥啊。。。大家应该知道吧。相当于  alert(fnActive.a);

 

就这样一层一层进行挖掘。。。

 
a();运行到这一步以后fnActive.a=5了

后面 运行 alert(a); 这里相当于 alert(fnActive.a=5);相信答案已经很明确了
 
最后是。最外层那个 alert(a);了 那么值到底是哪一个呢 由于 fn()这个方法里面操作的其实不是active.a这个值 所以a的值一直没有改变

这里不明确给出答案。只是希望大家自己去试验

 

总结

第一次写,,,语言表达有不妥之处希望各位童鞋见谅。。。大家试试(为了防止大家哪来主义,答案就不给出了。 大家进来自己敲着试试):