JS预编译及相关练习

Posted 2020-12-21 SvenWayne

 

一些相关概念

imply global 暗示全局变量：
如果变量没有声明直接赋值，系统不会报错.此时该变量归为全局对象window对象所有。
等效于在全局用 var 关键字声明该变量。
例如， 直接 a = 10; 这时候 window.a == 10 --- this.a == 10，这里this指向window。
window就是JS全局的域，任何全局变量都是window的属性。 例如

预编译：发生在函数和页面执行之前。函数整体提升(声明+赋值)，变量声明提升，即把声明函数和变量的行都移动到前几行读取解析。具体步骤如下：

1. 创建活跃对象(AO),又名执行期上下文 AO{}，对于全局读取，会生成全局对象(GO),用法和AO相同。全局对象就是window。 GO === window。
2. 找函数形参和变量声明，作为AO和GO的属性
3. 将实参和形参相统一，即实参的值赋予给AO相应的形参属性
4. 在函数内找函数声明(非匿名函数)，作为AO的属性，并且把该函数作为属性值赋予这个属性

 

预编译练习

/*预编译*/
    function f(a){
        console.log(a);
        var a = 100;
        console.log(a);
        function a() {}
        console.log(a);
        var b = function() {}
        console.log(b);
        function d(){}
    }
    /*预编译后，g(1)等效于*/
    function g(a){
        var a;
        var b;
        a = 1
        b = function(){}
        a = function a(){}
        var d = function d(){}
        console.log(a);
        a = 100;
        console.log(a);
        console.log(b);
    }
    // 规律: 函数内如果有形参同名的函数，则预编译后，函数执行前，该形参或者变量的初始值就是那个函数
    // 预编译也发生在全局，因此会导致变量提升

    function test(){
        // b没有声明，因此是全局变量，不存在AO中，存在于window中
        // a已声明，因此是局部变量，存在AO中不存在window中
        var a = b = 10;
    }

    /*练习*/
    global = 100;
    function fn(){
        console.log(global); // undefined
        global = 200;
        console.log(global); // 200
        var global = 300;
        console.log(global); // 300
    }
    var global;

    /*练习*/
    function tst(){
        console.log(b); // undefined
        if(a){
            var b = 100;
        }
        console.log(b); // undefined,因为运行该函数时a还没有赋值，是undefined==false
        c = 234; // 没有在函数内声明，放入全局变量
        console.log(c); // 234
    }
    var a;
    tst();
    a = 10;
    console.log(c); //234

    /*难题*/
    a = 100;
    function demo(e){
        function e(){}
        arguments[0] = 2;
        console.log(e); // 2
        if(a){
            var b = 123;
            function c(){
                // 谷歌不允许
            }
        }
        var c;
        a = 10;
        var a;
        // a已在demo内声明，因此if里读取AO内的a，又因为a没有赋值，所以if内的语句不执行
        console.log(b); // undefined
        f = 123;
        console.log(c); // undefined
        console.log(a); // 10
    }
    var a;
    demo(1);
    console.log(a); // 100
    console.log(f); // 123