zoukankan      html  css  js  c++  java
  • 还原真实,javascript之预编译 / 预解析

    今天在群里吹水时,有群友提出一个问题。我一看很简单,就立马给出了答案:因为存在变量提升,所以输出undefined。本以为无人反驳,可确招来口诛笔伐。作为写实派的我,一贯以来坚持真实是我的使命,岂能容忍这等虚头巴脑的言论攻击。遂以此文记之,本在还原真实。奈何文笔拙劣,恐表述不当,误人子弟。若有不当之处,还请众佬及时斧正,以正视听。


    就是下面这段代码:

    var obj = {
      say: function () {
          
          console.log(obj)
    
      }()
    }
    
    // 输出 undefined
    

    为什么是undefined?

    这个问题看似简单,不值一提,可实际上是小孩没娘,说来话长!

    尽管如此,我还是长话短说。很简单,因为在javascript执行之前,是存在一个“预编译”或者说是“预解析”这样的过程,在这个过程当中,进行了变量提升。

    什么是变量提升?
    变量提升就是将变量名提升到其所在作用域的顶部并赋值为undefined。与之相关的还有函数提升,不同的是,函数提升是将函数名及函数体全部提升到其所在作用域的顶部

    与其说“预编译”,“预解析”可能更合理一点。为什么这样说?
    因为在编程语言(如java,C#)当中,代码都是要先编译,后执行。而javascript作为脚本语言,不同于编程语言的一点是没有编译过程,但是它需要脚本解释器边解析边执行,而脚本解释器在解释执行代码前会先扫描一遍,这个过程就是“预解析”过程。

    那么为什么会存在变量提升和函数提升呢?
    在ES5当中,没有块级作用域的概念,只有全局作用域和函数作用域。声明变量可以用var关键字,也可以直接声明,只不过直接声明的变量是全局变量,而用var关键字声明的变量在全局作用域下就是全局变量,在函数体内就是局部变量。并且var关键字声明的变量在其所在的作用域下存在变量提升。

    em... 那变量提升跟上面的代码输出的结果是undefined有什么关系呢? 好,请坐下,陈独秀同学。

    我们来用代码还原一下真实过程:

    预解析阶段:
    生成全局对象,浏览器当中是window对象,node环境下是global对象
    变量提升:
    全局作用域下,变量obj提升到顶部,直接挂在window对象下,相当于window.obj = undefined;
    say方法是一个匿名函数。匿名函数的函数体赋值给了变量say。所以变量say也会进行变量提升,它所在的作用域也是全局window下,相当于window.say = undefined;

    函数提升:

    function(){ 
      console.log(obj);  //obj = window.obj = undefined
    }
    

    执行阶段:
    1,创建一个执行上下文(execution context),函数压栈,生成active object(活动对象)
    1,执行/解释上下文中的function,为变量赋值
    2,

    参考:https://www.jianshu.com/p/edb2be5866eb

    • 需要记住的是:
      • 变量提升只提升变量名,函数提升会提升函数名及其函数体。
      • 变量提示优先级大于函数提升优先级。也就是说不管变量声明在前还是函数声明在前,都是先进行变量提升,再进行函数提升。

    执行阶段:

    function(){
      console.log(obj); //输出undefined
    }()
    
  • 相关阅读:
    centos7下部署iptables环境纪录(关闭默认的firewalle)
    JVM性能调优2:JVM性能调优参数整理
    增加swap分区,文件形式
    常用nginx rewrite重定向-跳转实例:
    nginx反向代理解决跨域
    Python,Jupyter Notebook,IPython快速安装教程
    Python之NumPy实践之数组和矢量计算
    Python之IPython开发实践
    技术应用涉及到的四个方面的问题
    Python Base of Scientific Stack(Python基础之科学栈)
  • 原文地址:https://www.cnblogs.com/xiaohuangmao/p/10697725.html
Copyright © 2011-2022 走看看