• JavaScript预编译和暗示全局变量


    1. 暗示全局变量

    未声明的变量称为暗示全局变量。

    var a = 1; //函数体外声明的变量称为全局变量
    b = 2; // 无论函数体外或函数体内未声明的变量都称为暗示全局变量
    function fn() {
        var c = 3; //函数体内声明的变量称为局部变量
        d = 4; // 暗示全局变量
    }
    fn(); // 若不执行函数,则不会进行函数预编译,d 就不会提升为全局变量
    console.log(c); // error: c is not defined
    console.log(d); // 4
    

    2. JavaScript执行过程

    1. 语法分析,若存在低级语法错误,则不编译执行;
    2. 预编译,包括变量声明提前和函数声明提前;
    3. 解释执行,解释一行,执行一行。
    

    3. 预编译

    预编译可分为全局预编译和函数预编译。

    1. 在js脚本加载之后,会先通篇检查是否存在低级错误;
    2. 在语法检测完之后,便进行全局预编译;
    3. 在全局预编译之后,就解释一行,执行一行;
    4. 当执行到函数调用那一行,会先进行函数预编译,再往下执行。
    

    全局预编译:

    1. 创建全局对象GO(window对象);
    2. 变量声明提前,将所有变量的声明放到最前面,作为GO对象的属性,
       并赋值undefined,若存在变量名相同,只声明一个;
    3. 函数声明提前,将函数声明也放到最前面,作为GO对象的属性,
       若函数名与变量名相同,变量名会被函数名覆盖,值是函数体。
       这就是函数定义放到函数调用之前或之后都可以的原因。
    

    函数预编译:

    1. 在函数执行前的一瞬间,函数预编译闪亮登场;
    2. 先创建一个AO对象(Active Object);
    3. 将形参和变量声明提前,赋值undefined,作为AO的属性;
    4. 将实参赋值给形参;
    5. 函数声明提前,值为函数体,作为AO的属性。
    

    栗子:

    var a = 1;
    function b(c){
        console.log(c);
        var c = 2;
        console.log(c);
        function c() {}
        var d = 3;
        function e() {}
    }
    b(4);
    

    先分析全局预编译,

    • 创建GO对象,GO = {}
    • 变量声明提前
    // 伪代码
    GO = { 
        a = undefined
    }
    
    • 函数声明提前
    // 伪代码
    GO = { 
        a = undefined
        b = f b(c) { console.log(c); ... }
    }
    

    再分析函数预编译,

    • 创建AO对象,AO = {}
    • 形参和变量声明提前;
    // 伪代码
    AO = { 
        c = undefined    // 与变量名相同,只声明一个
        d = undefined
    }
    
    • 将实参赋值给形参;
    // 伪代码
    AO = { 
        c = 4    // b(4),传入的实参是4
        d = undefined
    }
    
    • 函数声明提前
    // 伪代码
    AO = { 
        c = f c() {}   // 函数名会覆盖变量名
        d = undefined
        e = f e() {}
    }
    

    所以第一次打印变量c的时候,是输出函数体,而不是实参4

  • 相关阅读:
    javascript变量
    javascript数据类型
    javascript基本语法
    javascript用法
    javascript简介
    js 随机生成颜色值
    JS 判断传入的变量类型是否是Array
    swiper2 swiper-slide 之间的间距调整
    IE9以及以下不支持jquery ajax跨域问题
    HBuilder只提示html 不提示js
  • 原文地址:https://www.cnblogs.com/yezhechenyang/p/13594621.html
Copyright © 2020-2023  润新知