js预解析问题总结

Posted 2020-07-11 还能再菜点吗？

//示例 1
alert(a)       // undefind。
alert(fn)      // function 整个函数块。

var a = 1;
function fn(){ 
    return falss;
};

为什么？第一个是 undefind , 第二个是 functin 函数块。这是怎么运行的？

js解析器在运行js代码的时候 分为两步：

1. 第一步 把所有的 变量、函数、参数 提前到当前作用域的顶部。
2. 第二步 逐行解读代码 从左到右、从上至下。

//示例 1 解释
var a;              //  a 变量 提前到整个作用域的前面 当前值 为 undefind。
function fn(){
    return false;
};                  //  fn 函数 提前整个作用域的前面 当前值 就是整个函数块。

alert(a);           //  undefind。
alert(fn);          //  function 整个函数块。
a=1;                //  a 赋值 1 现在 a  变量才拥有 值：1
function fn(){ 
    return false;
};                  //  函数 一直没变只不过被提前的 作用域 前面了。我记着有句话是这样说的：
                    //  函数在那定义 不重要 重要的是在那调用。
                    // （因为定义完以后它都会被提前到 当前 作用域 的前面，在那调用 在哪个作用域生效）

tips:解析引擎以块为单位级别，执行所有Var变量的创建，并赋予一个初始值undefined。

// 示例 3 

alert(a);         // a 函数块。
var a = 1;
alert(a)          // a 赋值后 等于 1。
function a(){
    return false;
}

// 示例 3 解释

var a;                  // 首先提前 变量 当前值 为：undefind。
function a(){
    return false;
};                      // 遇到函数 提前函数 注意：当前函数命 和 上面的变量名 一样 竟然一样怎么办呢？ 
                        // 不要急 js解析器已经做了处理 同名的函数会替换掉 同名的 变量 现在就只剩下 a 函数块 自己了。


alert(a);               // 因为 上面 只剩下 a 函数了 所以现在就弹出 a函数的整个函数块。
a = 1;                  // a = 1 表达式赋值 所以就又把 a 函数给替换成了 变量 值为：1。
alert(a);               // 现在 弹出 的值就是被改变过的 a 值为 1； 
function a(){           // 这个函数现在就没用了。
    return false;
};

 

带参数的预解析方式：注意此处就有了作用域的问题了

//示例 4
var a = 1;
function fn1(a){
    alert(a);
    a = 2;
}；
fn1();                                // undefind。
alert(a);                             // a 值为： 1。

//示例 4 解释
var a;                                // a 变量 提前 当前值：undefind。（全局变量）
function fn1(a){
    alert(a);
    a = 2;
}；                                   // fn1 函数块提前 值为： 整个函数
                                      // 该提前的都提前的现在开始 逐行 解读代码，
                                      // 等等  有人会说那 参数 呢？ 哈哈哈 不要着急还没到它呢。


var a = 1;                            // a = 1 赋值表达式 改变 变量 a 值为：1。
function fn1(a){                    
        var a;                        //参数被当成变量 解析到当前函数 顶部。
    alert(a);                         // a 当前函数内 a 值为：undefined.
    a = 2;                            // a = 2 复制表达式 无用
}；                                   // 函数块 没有遇到调用 无用。
fn1();                                // 现在遇到函数fn1 的调用了 咱们就去它里面看看 。                             
                                      // 调用成功后 弹 undefind。
alert(a);                             // 这个 还是调用 全局的变量 a 值 为 1。