JS-预解析

• 预解析指的是：代码执行之前，对代码的通读与解释
• 预解析中解释的内容：
  • var声明变量（变量提升）
    • 告诉浏览器，在代码执行之前，已经有这个变量了，但是未赋值
  • 声明式定义的函数（函数提升）
    • 告诉浏览器，在代码执行之前，已经有函数名这个变量了，值为一个函数
• 注意：
  1. var声明的变量名如果与声明式定义函数的函数名同名了的话
     • 以声明式定义函数的预解析为准
  2. 页面打开，只会预解析全局（函数外部）中的代码
     • 函数内的代码，只有当函数调用的时候才会预解析
       • 函数内代码的预解析（变量、函数提升，只会在函数内部提升，不会作用于外部）
     • 函数调用的时候，如果有形参赋值，则先形参赋值，然后再函数内预解析

案例1

console.log(n);
var n = 100;
console.log(n);

/* 
页面打开预解析：
    1. var声明变量n
        - 在代码执行之前，已经有变量n了，但是未赋值

代码执行：
    console.log(n);         // 有变量n，但是未赋值，输出undefined
    n = 100;                // 给变量n赋值为100
    console.log(n);         // 此时变量n的值为100，输出100
*/

案例2

console.log(fn);
fn();
function fn() { console.log(666); }
fn();

/* 
页面打开预解析：
    1. 声明式定义的函数fn
        - 在代码执行之前，已经有变量fn了，值为一个函数

代码执行：
    console.log(fn);        // 有变量fn，值为一个函数，输出变量fn
    fn();                   // 变量fn的值为一个函数，正常函数调用
    fn();                   // 变量fn的值为一个函数，正常函数调用
*/

案例3

console.log(fn);
fn();
var fn = function() { console.log(666); }
fn();

/* 
页面打开预解析：
    1. var声明变量fn
        - 在代码执行之前，已经有变量fn了，但是未赋值

代码执行：
    console.log(fn);        // 有变量fn，但是未赋值，输出undefined
    fn();                   // 变量fn的值为undefined，不是函数，此处函数调用报错
    fn();                   // 不执行
*/

案例4

console.log(fn);
fn();
var fn = 999;
function fn() { console.log('fn执行'); }
fn();

/* 
页面打开预解析：
    1. var声明变量fn
        - 在代码执行之前，已经有变量fn了，但是未赋值
    2. 声明式定义的函数fn
        - 在代码执行之前，已经有变量fn了，值为一个函数
    - 以上变量fn同名，则以函数预解析为准

代码执行：
    console.log(fn);        // 有变量fn，值为一个函数，输出变量fn
    fn();                   // 变量fn的值为一个函数，正常函数调用
    fn = 999;               // 给变量fn赋值为999
    fn();                   // 变量fn的值为数值999，不是函数，此处函数调用报错
*/

案例5

function fn() {
    console.log(n);
    var n = 100;
    console.log(n);
}
fn();
console.log(n);

/* 
页面打开预解析：
    1. 声明式定义的函数fn
        - 在代码执行之前，已经有变量fn了，值为一个函数

代码执行：
    fn();                   // 变量fn的值为一个函数，正常函数调用

    <--
    - fn函数内预解析：
        1. var声明变量n
            - 在函数内的代码执行之前，函数内已经有变量n了，但是未赋值

    - fn函数内代码执行：
        console.log(n);     // 函数内有变量n，但是未赋值，输出undefined
        n = 100;            // 给函数内的变量n赋值为100
        console.log(n);     // 此时函数内的变量n的值为100，输出100
    -->

    console.log(n);         // 函数外部没有变量n，此处报错
*/

案例6

function fn(f) {
    console.log(f);
    function f() {}
}
fn(10);

/* 
页面打开预解析：
    1. 声明式定义的函数fn
        - 在代码执行之前，已经有变量fn了，值为一个函数

代码执行：
    fn(10);                 // 变量fn的值为一个函数，正常函数调用

    <--
    - fn函数调用有形参赋值，先完成形参赋值
        1. 给函数内的形参变量f赋值为10
            - 在函数内的代码预解析之前，函数内已经有变量f了，值为数值10

    - fn函数内预解析：
        1. 声明式定义的函数f
            - 在函数内的代码执行之前，函数内已经有变量f了
            - 变量f中的值经过预解析被赋值（覆盖）为了一个函数

    - fn函数内代码执行：
        console.log(n);     // 函数内有变量fn，值为一个函数，输出变量fn
    -->
*/