对于Javascript基本运行原理的理解和总结

2018-11-15 admin

编译

在传统编译语言流程中,程序中的一段源代码在执行前会经历三个步骤,统称为“编译”。

  1. 分词/词法分析
```
 将字符组成的字符串分解成有意义的代码块,这些代码块被称为词法单元(token)。例如:

 var a = 2;

 这段程序被分解为var、a、=、2四个词法单元,PS:空格是否被当作词法单元,取决于空格在这么语言中的意义。

```
  1. 解析/语法分析
```
 将词法单元流(数组)转换成抽象语法树(Abstract Syntax Tree,AST)。例如:

 var a = 2;

 以上程序的抽象语法树如下所示:

```
{
"type": "Program",
"body": [
    {
        "type": "VariableDeclaration",
        "declarations": [
            {
                "type": "VariableDeclarator",
                "id": {
                    "type": "Identifier",
                    "name": "a"
                },
                "init": {
                    "type": "Literal",
                    "value": 2,
                    "raw": "2"
                }
            }
        ],
        "kind": "var"
    }
],
"sourceType": "script"
}
关于JavaScript代码与抽象语法树转化关系  [看这里](http://esprima.org/demo/parse.html)

3\. 代码生成

    将 AST 转换为可执行代码(计算机懂得的机器指令)的过程。

执行环境(EXECUTION CONTEXT)

作用域(Scope)

  1. 什么是作用域

    作用域是用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称查找变量的一套规则。

  1. 作用域的分类

    词法作用域和动态作用域,而JavaScript遵循的是词法作用域的工作模型。

  1. 什么是词法作用域

    大部分标准编程语言的第一个编译阶段是词法化,词法化的过程会对程序的源代码进行检查,而词法作用域就是定义在词法阶段的作用域。也就是说词法作用域是你在写代码是将变量和块作用域写在哪里决定的,因此词法分析器在处理代码时会保持作用域不变(大多数情况下)。

tip:在javaScript中作用域分为全局作用域和函数作用域,新出得ES6中的let、const会产生块作用域。

作用域链(Scope Chain)

变量对象(Variable Object)

活动对象(Activation object)

[转载]原文链接:https://segmentfault.com/a/1190000017026206

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-45551.html

文章标题:对于Javascript基本运行原理的理解和总结

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
html5+JavaScript教程-微信打飞机小游戏源码
js // JavaScript Document var c = document.getElementById("dotu"); var cxt = c.getContext("2d&q...
2015-11-12
vue 数组遍历方法forEach和map的原理解析和实际应用
一、前言 forEach和map是数组的两个方法,作用都是遍历数组。在vue项目的处理数据中经常会用到,这里介绍一下两者的区别和具体用法示例。 二、代码 1. 相同点 都是数组的方法 都用来遍历数组 两个函数都有4个参数:匿名函数中可传3...
2018-11-15
JavaScript编辑器推荐
主流编辑器有SublimeText,Notepad++,webstorm等,是使用最广泛的编辑器,但也有一些JavaScript编辑器提供有着各自的特性和功能,适应不同人的需求,以下是几款优秀的编辑器,相信你一定能找到自己喜欢的。 1. W...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: <template...
2017-03-13
回到顶部