变量声明提升

xixi0条评论 65 次浏览

变量提升(函数声明提升)

变量提升的小例子:

console.log(a) // undefined
var a = 'hello';

num = 6;
num++;
var num;
console.log(num) //7 为什么给一个还没有声明的变量赋值不会报错

function hoistFunction(){
    foo();
    function foo(){
        console.log('running');
    }
}
hoistFunction();

console.log(a) //function a(){console.log(10)}
a() // 10
var a = 3;
function a(){
    console.log(10)
}
console.log(a) // 3
a = 6;
a() //throw error

分析原因:js引擎会在正式执行代码之前进行一次“预编译”,预编译简单理解就是在内存中开辟一些空间,存放一些变量和函数。
具体步骤如下:
(1)页面创建GO全局对象(Global Object)对象(window对象)。
(2)加载第一个脚本文件。
(3)脚本加载完毕后,进行语法分析。
(4)开始预编译
查找函数声明,作为GO属性,值赋予函数体(函数声明优先)
查找变量声明,作为GO属性,值赋予undefined

    GO/window = {
        //页面加载创建GO同时,创建了document、navigator、screen等等属性
        a:undeifned,
        c:undefined,
        b:function(y){
            var x = 1;
            console.log('console')
        }
    }

(5)解释执行代码(直到执行函数b,该部分也被叫做词法分析)
创建AO活动对象(Active Object)
查找形参和变量声明,值赋予undefined
实参值赋给形参
查找函数声明,值赋给函数体
解释执行函数中的代码

    GO/window = {
        //变量随着执行流得到初始化
        a:1,
        c:function(){
            //...
        },
        b:function(y){
            var x = 1;
            console.log('console')
        }
    }

(6)第一个脚本文件执行完毕,加载第二个脚本文件
(7)第二个文件加载完毕后,进行语法分析
(8)开始预编译
重复编译步骤

与解析机制使得变量提升(Hoisting),从字面上理解就是变量和函数的声明会移动到函数或者全局代码的开头位置。

通过一个例子加深理解:

    console.log(a); //执行之前变量提升作为window的属性,值被设为undefined
    var a = 'hello';

    /*JavaScript仅提升声明,而不是提升初始化*/
    num = 6;
    num ++ ;
    var num;
    console.log(num) //变量提升,值为undefined的num赋值为6,再自增 => 7

    function hoistFunction(){
        foo();
        function foo(){
            console.log('running')
        }
    }
    hoistFunction();//函数声明提升,可以在函数体之前执行

    console.log(a) //最后的声明为函数声明,因此a此时为函数体
    a(); //执行a函数,输出10

    //首先将所有函数声明放入变量对象中 a:function (函数声明优先)
    //其次将所有变量声明放入变量对象中,定义为a = undefined,再赋值为3
    var a = 3; // 3 赋值a
    function a(){
        console.log(10);
    }
    console.log(a) //3

    a = 6;
    a()//throw error

注:js并不存在真正的预编译,var 与function 的提升实际是在语法分析阶段就处理好的。而且js的预编译是一个脚本文件为块的。一个脚本文件进行一次预编译,而不是全文编译完再进行预编译的。

原文出处:https://juejin.im/post/5afcf1b96fb9a07abd0ddc43


发表评论

分类目录

2019年十二月
« 11月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

近期评论