javascript function 声明及编译执行顺序Tips

wpw 发布于2019-08-20 14:20 / 2073人阅读

摘要：因为块中只能包含语句，而不能包含函数声明这样的源元素。但是，规范明确规定了表达式语句不能以关键字开头。所以我们代码中的是在中只能被视为函数表达式，而不是函数声明，不会被提前编译解析。

今天在学习前端工程师手册 > 关于函数章节时收获一点点知识，做个记录并分享一下。
我们先从看两段代码，再来分析。
代码1：

    function foo() { return 1; }
    var foo = function() { return 2; }
    foo(); //结果是 2

代码2：

    var foo = function(){ return 2;}
    function foo() { return 1; }
    foo(); //结果是 2

*知识点：在当前作用域下,函数声明会被最先提前被编译执行，如本文：function foo(){}

所以上面代码类似于：

代码1：

    function foo() { return 1; }
    var foo = function() { return 2; }
    foo();
     
    ↓↓ (编译后)
    
    var foo = function() { return 1; }
    foo = function() { return 2; }
    foo();

代码2：

    var foo = function() { return 2; }
    function foo() { return 1; }
    foo(); 
     
    ↓↓ (编译后)
    
    var foo = function(){return 1;}//function foo() { return 1; }被提到最前面了
    foo = function(){return 2;}
    foo();

再来看另一种情况：

    if (true) {
        function foo() { return 1; }
    }
    function foo() { return 2; }
    foo(); //结果 1

我们还是按照上面逻辑进行解读：

    if (true) {
        function foo() { return 1; }
    }
    function foo() { return 2; }
    foo(); 
    
    ↓↓ (编译后)
    
    var foo = function () { return 2; }
    if (true) {
        var foo = function () { return 1; }
    }
    foo();

可能有人会疑问：为什么function foo () { return 1; } 没有被提前呢？

因为函数声明只能出现在程序或函数体内。从句法上讲，它们不能出现在Block（块）（{ ... }）中，例如不能出现在 if、while 或for 语句中。因为 Block（块）中只能包含Statement语句，
而不能包含函数声明这样的源元素。另一方面，仔细看一看规则也会发现，唯一可能让表达式出现在Block（块）中情形，就是让它作为表达式语句的一部分。但是，规范明确规定了表达式语句不能以关键字function开头。而这实际上就是说，函数表达式同样也不能出现在Statement语句或Block（块）中（因为Block（块）就是由Statement语句构成的）。

所以我们代码中的function foo () { return 1; } 是在if中,只能被视为函数表达式，而不是函数声明，不会被提前编译解析。

私有云服务器托管 javascript执行顺序执行顺序执行顺序问逻辑执行顺序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81545.html

js预编译过程

摘要：所以变量声明提升和函数声明提升会出现一个先后顺序预编译过程结束。先科普： 1.javaScript是解释型语言,就是编译一行，执行一行.....2.javaScript没有块级及作用域......3.javaScript具有变量和函数声明提升功能.....4.AO对象和GO对象....5.预编译就是解决代码执行顺序问题,与java语言类似(jvm).... 例如： (function...

FWHeart 2019-08-22 16:39 评论0 收藏0
JavaScript 工作原理之三－内存管理及如何处理 4 类常见的内存泄漏问题(译)

摘要：这是因为我们访问了数组中不存在的数组元素它超过了最后一个实际分配到内存的数组元素字节，并且有可能会读取或者覆写的位。包含个元素的新数组由和数组元素所组成中的内存使用中使用分配的内存主要指的是内存读写。原文请查阅这里，本文有进行删减，文后增了些经验总结。本系列持续更新中，Github 地址请查阅这里。这是 JavaScript 工作原理的第三章。我们将会讨论日常使用中另一个被开发...

weknow619 2019-08-22 17:05 评论0 收藏0
JavaScript中的执行上下文和变量对象

摘要：以上简单总结了下对执行上下文和变量对象的理解，主要在于记录总结一下学习成果，目前文章的水平实在不敢谈分享。执行上下文(Execution Context) 文章同步到github javaScript中的执行上下文和变量对象 JavaScript代码执行的过程，包括编译和执行两个阶段，编译就是通过词法分析，构建抽象抽象语法树，并编译成机器识别的指令，在JavaScript代码编译阶段...

why_rookie 2019-08-26 12:10 评论0 收藏0
读书笔记(05) - 事件 - JavaScript高级程序设计

摘要：而事件分为个级别级事件处理程序，级事件处理程序和级事件处理程序。级中没有规范事件的相关内容，所以没有级事件处理。 showImg(https://segmentfault.com/img/bVburYR?w=499&h=400); HTML依托于JavaScript来实现用户与WEB网页之间的动态交互，接收用户操作并做出相应的反馈，而事件在此间则充当桥梁的重要角色。日常开发中，经常会...

tinylcy 2019-08-23 13:58 评论0 收藏0