go 变量在其中一个函数中赋值另一个函数_了解js中的变量提升机制

谁践踏了优雅 2023-01-10 12:00 139阅读 0赞

**什么叫变量提升？**

变量提升：**在当前上下文中（全局/私有/块)**，js代码自上而下执行之前，浏览器会提前处理一些事情(可以理解为词法解析的一个环节，词法解析一定发生在代码执行之前)

**会把当前上下文带var/function关键字的进行提前的声明或定义**

var a =10
    
    声明是创建变量的过程：
    
    声明 declare : var a
    
    定义defiend:   a=10  定义是将变量和值关联到一起

**变量提升的意义：\***\*是让我们在创建这个变量之前能够使用这个变量而不报错\*\*

> 我们来看一道题目

代码执行之前：全局上下文中的变量提升

带var的只会提前声明

**带function的会提前声明定义**

/**
    *  代码执行之前：全局上下文中的变量提升
    var a ;默认值是undefined
    */
    console.log(a);  //undefined
    var a = 12;//=>创建值12 不需要再声明了（变量提升阶段完成了，完成的事情不会重新处理） a=12赋值
    a = 13;  //=>创建值 13  全局变量  a=13
    console.log(a);

**提升var和function哪个先声明**：自上而下，哪个先出现就先声明，只是声明过的不会重复声明

/**
    *不会报错，因为function在执行代码之前会进行全局上下文中的变量提升
    * 全局上下文变量提升的时候与函数中的var a=12 没有任何关系，因为在函数执行之前他就是一个代码字符串而已并且变量提升只发生在当前上下文中
    * func = 函数  函数在这个阶段赋值都做了
    */
    func()
    function func(){
         
        var a=12
        console.log('ok')
    }
    func()  //Uncaught TypeError: func is not a function
    //真实项目中建议用函数表达式创建函数，因为这样在变量提升阶段只会声明func，不会赋值
    var func = function(){
         
        console.log('ok')
    }
    func() //这里才能执行
    
    //把原本作为值的函数表达式匿名函数'具名化'(虽说是起了名字,但是这个名字不能在外面访问=>也就是不会再当前上下文中创建这个名字)
    var func = function AAA(){
             
        console.log('ok')
    }
    AAA() // VM98:4 Uncaught ReferenceError: AAA is not defined

var func = function AAA()\{ console.log('ok') \}

‘具名化’的意义：

1.  为了JS语法的规范性
2.  当函数执行，在形成的私有上下文中，会把这个具名化的名字作为私有上下文中的变量(值就是这个函数)来进行处理

### **基于‘var 或者function’在全局上下文中声明的变量（全局变量）会映射到GO(全局对象window)上一份，作为他的属性；而且接下来是一个修改，另一个也会跟着修改** ###

var a = 12;
    console.log(a); //=>12  全局变量
    console.log(window.a); //=>12 映射到GO上的属性a
    
    
    window.a = 13;
    console.log(a); //=>13 映射机制是一个修改另外一个也会修改

> 再看道题

/*
     * EC(G):全局上下文中的变量提升
     *    不论条件是否成立，都要进行变量提升（细节点：条件中带FUNCTION的在新版本浏览器中只会提前声明，不会再提前的赋值了）
     *   [老版本]
     *      var a;
     *      func=函数;
     *   [新版本]
     *      var a;   全局上下文中声明一个a也相当于 window.a
     *      func;
     */
    console.log(a, func); //=>新版本浏览器（ie10以上）：因为新版本只声明不赋值  undefined undefined
    if (!("a" in window)) {
         
        //=>"a" in window 检测a是否为window的一个属性   !TRUE => FALSE
        var a = 1;  //变量提升阶段声明过a了
    
        function func() {}
    }
    console.log(a); //=>undefined

> 题目

/*
     * EC(G)变量提升阶段
     *    fn=>1  声明+定义
     *      =>2
     *    var fn; 这一步不处理, 已经声明过了
     *      =>4
     *      =>5
     * 变量提升阶段结束后全局上下文中有一个全局变量fn,值是输出5的函数（此时window.fn=>5）
     */
    fn(); //=>5
    function fn(){
          console.log(1); }  //=>不再处理，变量提升阶段搞过了
    fn(); //=>5
    function fn(){
          console.log(2); }
    fn(); //=>5
    var fn = function(){
          console.log(3); }  //=>var fn不用在处理了，但是赋值在变量提升阶段没处理过，此处需要处理  fn=window.fn=>3
    fn(); //=>3
    function fn(){
          console.log(4); }
    fn(); //=>3
    function fn(){
          console.log(5); }
    fn(); //=>3
     var foo = 1;
    function bar() {
         
        if (!foo) {
         
            var foo = 10;
        }
        console.log(foo);
    }
    bar();

![4e192352143b9cdda783cc68319f285f.png][]

[4e192352143b9cdda783cc68319f285f.png]: /images/20221119/10f9d2ea977e467ea6322fd979e84583.png