前端面试系列-JavaScript-变量提升、预编译(附面试题)

曾经终败给现在 2022-11-12 02:49 201阅读 0赞

### 文章目录 ###

*  js预编译
 *   *  1.全局预编译GO(Global Object)
     *  2.函数预编译AO (Activation Object)
     *  3.预编译小结
 *  变量提升
 *   *  let & const提升
     *  class提升
 *  练习题
 *   *  面试真题

# js预编译 #

js执行前会进行预编译。  
会产生一个 GO ,也就是我们说的全局作用域 ， 当一个方法被调用时会形成一个局部作用域 AO。

全局代码在执行的时候，先是 变量提升 , 在全局作用域内添加 属性，然后是 函数（以函数声明创建的函数）提升,再是代码执行。

## 1.全局预编译GO(Global Object) ##

1.  创建GO对象,即window
2.  给全局变量赋值 undefined
3.  将全局的函数申明的函数名作为key,value为函数整体赋值到GO对象中

## 2.函数预编译AO (Activation Object) ##

1.  创建AO对象
2.  将函数内的形参和变量声明存储到AO对象中，值为undefined
3.  将实参和形参统一
4.  将函数内的函数申明的名称作为AO对象的key，函数的整体内容为value 存储到AO对象

**来个例子：**

**代码分析：**

1.  创建AO对象

AO={}

1.  找形参和变量声明，将变量和形参名作为AO属性名，值为undefined

AO={
        a:undefined,
        b:undefined
    }

1.  将实参值和形参统一

AO={
        a:1,
        b:undefined
    }

1.  在函数体里面找函数声明,值赋予函数体：由于在函数中有 function a() \{\} ，这一函数因此此时AO中 a = function a() \{\}

AO={
     a:function a(){},
     b:undefined,
     d:function d(){}
    }

然后代码依次执行，第一个console时取AO中的a为function a()\{\},然后a=123,改变AO中的a为123

AO={
     a:123,
     b:undefined,
     d:function d(){}
    }
    
    接着打印a为123

## 3.预编译小结 ##

*  函数声明整体提升-(具体点说，无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
 *  变量声明提升-(具体点说，无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）
 *  任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是Window)
 *  一切声明的全局变量，全是window的属性； var a = 12;等同于Window.a = 12;
 *  函数预编译发生在函数执行前一刻。

# 变量提升 #

根据上文所提到的，**变量提升**：在预编译的时候会将函数内变量**声明**存储到AO对象中，值为**undefined**

console.log(name)   // 'undefined'
    var name = 'John Doe'
    console.log(name)   // John Doe

## let & const提升 ##

console.log(a)  // ReferenceError: a is not defined
    let a = 3

function, var, let, const, class 都会被“提升”。但是let和const声明的变量不会被初始化值为undefined，  
只有在执行阶段JavaScript引擎在遇到他们的词法绑定(赋值)时，他们才会被初始化。这意味着在JavaScript引擎在声明变量之前，无法访问该变量。

let a
    console.log(a)  // undefined
    a = 5

## class提升 ##

同let和const一样，class在JavaScript中也是会被“提升”的，在被真正赋值之前都不会被初始化值。

# 练习题 #

helloWorld();  // TypeError: helloWorld is not a function
    var helloWorld = function(){
      console.log('Hello World!');
    }
    //Uncaught TypeError: helloWorld is not a function

helloWorld();
    function helloWorld(){
      console.log('Hello World!');
    }
    //Hello World!

foo();
    var foo; 
    function foo(){
        console.log('tom');
    }
    foo = function(){
        console.log('jack');
    }
    //tom

## 面试真题 ##

变形一

变形二

[本文链接:https://blog.csdn.net/qq\_39903567/article/details/115080104][https_blog.csdn.net_qq_39903567_article_details_115080104]

[https_blog.csdn.net_qq_39903567_article_details_115080104]: https://blog.csdn.net/qq_39903567/article/details/115080104