`
liukemin
  • 浏览: 8065 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

JavaScript预编译与执行顺序的关系

 
阅读更多
在Javascript中,function才是Javascript的第一型。当我们写下一段函数时,其实不过是建立了一个function类型的实体。
就像我们可以写成这样的形式一样:

function Hello() {
    alert("Hello");
}
Hello();
var Hello = function() {
    alert("Hello");
}
Hello();

其实都是一样的。
但是当我们对其中的函数进行修改时,会发现很奇怪的问题。
function Hello() {
    alert("Hello");
}
Hello();
function Hello() {
    alert("Hello World");
}
Hello();

我们会看到这样的结果:连续输出了两次Hello World。而非我们想象中的Hello和Hello World。
这是因为Javascript并非完全的按顺序解释执行,而是在解释之前会对Javascript进行一次“预编译”,在预编译的过程中,会把定义式的函数优先执行,也会把所有var变量创建,默认值为undefined,以提高程序的执行效率。也就是说上面的一段代码其实被JS引擎预编译为这样的形式:
var Hello = function() {
    alert("Hello");
}
Hello = function() {
    alert("Hello World");
}
Hello();
Hello();


我们可以通过上面的代码很清晰地看到,其实函数也是数据,也是变量,我们也可以对“函数“进行赋值(重赋值)。

当JavaScript引擎解析脚本时,它会在预编译期对所有声明的变量和函数进行处理。
做如下处理:
1. 在执行前会进行类似“预编译”的操作:首先会创建一个当前执行环境下的活动对象,并将那些用var申明的变量设置为活动对象的属性,但是此时这些变量的赋值都是undefined,并将那些以function定义的函数也添加为活动对象的属性,而且它们的值正是函数的定义
2. 在解释执行阶段,遇到变量需要解析时,会首先从当前执行环境的活动对象中查找,如果没有找到而且该执行环境的拥有者有prototype属性时则会从prototype链中查找,否则将会按照作用域链查找。遇到var a = ...这样的语句时会给相应的变量进行赋值(注意:变量的赋值是在解释执行阶段完成的,如果在这之前使用变量,它的值会是undefined)
所以,就会出现当JavaScript解释器执行下面脚本时不会报错:
alert(a);    // 返回值undefined
var a =1;
alert(a);    // 返回值1

由于变量声明是在预编译期被处理的,所以在执行期间对于所有代码来说,都是可见的。但是,你也会看到,执行上面代码,提示的值是undefined,而不是1。这是因为,变量初始化过程发生在执行期,而不是预编译期。在执行期,JavaScript解释器是按着代码先后顺序进行解析的,如果在前面代码行中没有为变量赋值,则JavaScript解释器会使用默认值undefined。由于在第二行中为变量a赋值了,所以在第三行代码中会提示变量a的值为1,而不是undefined。
分享到:
评论

相关推荐

    JavaScript的执行过程详细研究

    javascript编译以及执行过程详细讲解,包括预编译和执行

    JavaScript执行顺序

    JavaScript的执行顺序主要涉及到三个关键点:HTML文档流顺序、预编译与执行顺序的关系以及按块执行JavaScript代码。理解这些概念对于编写高效且无错的JavaScript代码至关重要。 首先,HTML文档流顺序决定了嵌入在...

    JavaScript运行过程中的“预编译阶段”和“执行阶段”

    预编译>执行),了解javascript引擎的执行机理,将有助于在写js代码过程中的思路总结 首先科普下javascript中的两种声明方式,var和function,前者声明的是变量,后者声明的是方法 在预编译中,javascript对这两种...

    javascript编译工具

    结合CSS预处理器如Sass或Less,JavaScript编译工具还能帮助我们将预处理器的代码转换为浏览器可识别的CSS,简化样式编写,并实现模块化管理。 总之,JavaScript编译工具是提升JavaScript开发效率的关键,它们提供了...

    JavaScript 详解预编译原理

    大家要明白,这个预编译和传统的编译是不一样的(可以理解js预编译为特殊的编译过程) JavaScript是解释型语言, 既然是解释型语言,就是编译一行,执行一行 传统的编译会经历很多步骤,分词、解析、代码生成...

    JavaScript编译工具

    8. **自动化工作流**:通过与构建工具如Gulp、Grunt或现代的Webpack结合,JavaScript编译工具可以无缝地融入开发者的构建流程,自动处理代码的编译、压缩和版本控制。 总的来说,JavaScript编译工具是现代Web开发中...

    浅析JavaScript预编译和暗示全局变量

    // 若不执行函数,则不会进行函数预编译,d 就不会提升为全局变量 console.log(c); // error: c is not defined console.log(d); // 4 2. JavaScript执行过程 1. 语法分析,若存在低级语法错误,

    探讨JavaScript语句的执行过程

    废话不多说,直奔主题了。javascript的运行原理总结如下: 1、按照html文档流顺序执行javascript代码 浏览器是按照文档流从上到下逐步解析...2、预编译和执行顺序的关系 首先看如下这段代码: <script type=text

    javascript v8执行引擎源码

    V8引擎的设计目标是将JavaScript代码直接编译为机器码,从而实现快速执行。它不仅被用在Chrome浏览器上,还被许多其他项目,如Node.js,采用以提供服务器端的JavaScript运行环境。 1. **即时编译(JIT)技术** V8...

    vc 程序源代码 执行JavaScript文件中代码

    在IT领域,尤其是在软件开发中,有时候我们需要在C++程序中执行JavaScript代码,这通常用于实现脚本功能或者与Web相关的交互。这个压缩包“vc程序源代码 执行JavaScript文件中代码”提供了一个示例,它包含了一套C++...

    Linux 程序编译过程详解.docx

    预处理是编译过程的第一步,主要包括以下过程:删除所有的#define宏定义,展开所有的宏定义,处理所有的条件预编译指令,处理#include预编译指令,删除所有注释,添加行号和文件标识,以便编译时产生调试用的行号及...

    javascript运行机制之执行顺序理解

    JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行。如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的...

    08-调用栈:为什么JavaScript代码会出现栈溢出?_For_vip_user_0011

    1. 当 JavaScript 执行全局代码的时候,会编译全局代码并创建全局执行上下文,且在整个页面的生命周期内,全局执行上下文只有一页。 2. 当调用一个函数的时候,函数体内的代码会被编译,并创建函数执行上下文,一般...

    JavaScript内核系列 pdf

    了解和处理JavaScript运行时可能出现的错误,如TypeError、RangeError等,以及如何利用console工具、断点和debugger语句进行程序调试,对于开发过程中的问题排查至关重要。 八、DOM操作与事件处理 在Web开发中,...

    jit JavaScript

    JavaScript原本是一种解释型语言,代码在运行时逐行解析并执行,但JIT的引入使得部分代码在运行过程中可以被编译成机器码,从而提升了程序性能。 JIT的工作原理是,在程序运行期间,当某个函数或代码块被频繁调用时...

    编译原理完美前端开发

    - **性能提升**:理解编译过程,可以更有效地利用缓存、预编译模板,以及理解编译器如何优化代码。 - **框架设计**:对于框架和库的开发者,编译原理是设计高效编译时特性的基础,如Vue.js的单文件组件和React的JSX...

    编译后的js文件

    在“编译后的js文件”这个场景下,我们讨论的是经过编译或打包过程的JavaScript代码,这样的文件通常是为了提高性能、优化加载速度以及便于部署。 编译在传统意义上是指将高级语言转换为机器可执行的二进制代码的...

    V8Javascript脚本引擎源码

    总之,V8 JavaScript引擎的源码是一个宝贵的资源,它揭示了JavaScript运行时环境的内部细节,涵盖了从解析、编译、执行到内存管理等多个关键领域的知识。通过深入研究,开发者不仅可以提升JavaScript编程技能,还...

Global site tag (gtag.js) - Google Analytics