首先,JavaScript的特点是:

  1. 跨平台

    可以再不同的操作系统上运行。

  2. 弱类型

    与之相对的是强类型

    强类型:在定义变量的时候,需要将变量的数据类型表明。例如:Java

    弱类型:定义变量的时候不需要定义数据类型,数据类型根据变量值来确定。例如:JavaScript

  3. 解释执行,逐行执行

其次,JavaScript在浏览器中的执行过程分为三步:

  1. 语法检测 

    主要看你的代码有没有基本的语法错误。例如:中文,关键字等等

  2. 词法分析(预编译) ----- 重点介绍

  3. 逐行执行

词法分析(预编译)

  主要分为两种情况(全局,函数)

  1. 全局(直接是script标签中的代码,不包括函数中的):

  1. console.log(a);     //返回值:function a(){}
  2. var a = 100;
  3. console.log(a)      //返回值:100
  4. var b = 200
  5. var c = 300
  6. function a(){
  7.  
  8. }
  9. function fun(){
  10.  
  11. }

    1. 在函数执行前,会生成一个GO(global object)对象,这是一个看不到的对象,但是我们可以模拟出来分析。

  1. GO = {}

    2. 分析变量声明,变量名为属性名,值为underfined

  1. GO = {
  2. a : undefined,
  3. b : undefined,
  4. c : undefined
  5. }

    3. 分析函数声明,函数名为属性名,值为整个函数体,如果函数名与变量名相同,那么变量名的值将被无情覆盖

  1. GO = {
  2. a : function a(){
  3.  
  4. },
  5. b : undefined,
  6. c : undefined,
  7. fun : function fun(){
  8.  
  9. }
  10. }

    此时的GO对象就是预编译的最终结果。

    4. 逐行执行,分析过(变量声明、函数声明)不用管,只管赋值(变量赋值)

  1. a赋了一次值,值改变为100
    GO = {
  2. a : 100,
  3. b : undefined,
  4. c : undefined,
  5. fun : function fun(){
  6.  
  7. }
  8. }

  2 . 局部、函数执行时

  1. var num = 100;
  2. function fun(num){
       var a = 10
  3. console.log(num);
  4. }
  5. fun(5)

    1. 预编译:先是全局

  1. GO = {
  2. num : undefined,
  3. fun : function
  4. }
  1. GO = {
  2. num : 100,
  3. fun : function
  4. }

    2. 然后逐行执行,到fun(5),函数调用,回生成自己的作用域AO(active object),函数调用时,在执行前的一瞬间产生,如果有多个函数调用,就会产生多个AO,并且各不干扰,各不相同。

  1. fun.AO = {
  2.  
  3. }

    3. 分析参数,形参作为属性名,实参作为值

  1. fun.AO = {
  2. num : 5
  3. }

    4. 分析变量声明,变量名为属性名,值为underfined,如果遇到AO对象上属性同名,不去做任何改变

  1. fun.AO = {
  2. num : 5
  3. a underfined
  4. }

    5. 函数声明,函数名为属性名,值为整个函数体,如果遇到AO对象上属性同名,则无情覆盖(没有跳过)

    6. 逐行执行,分析过(变量声明、函数声明)不用管,只管赋值(变量赋值)

  1. fun.AO = {
  2. num : 5
  3. a underfined
  4. }

   最后的输出的为:5

两者在步骤上没有什么大的区别,只是函数多了形参与实参的那一步。

JavaScript浏览器解析原理的更多相关文章

  1. 浏览器解析JavaScript原理

    1.浏览器解析JavaScript原理特点: 1.跨平台 2.弱类型 javascript 定义的时候不需要定义数据类型,数据类型是根据变量值来确定的.    var a = 10; 数字类型    ...

  2. JavaScript的工作原理:解析、抽象语法树(AST)+ 提升编译速度5个技巧

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 14 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  3. 《浏览器工作原理与实践》<07>变量提升:JavaScript代码是按顺序执行的吗?

    讲解完宏观视角下的浏览器后,从这篇文章开始,我们就进入下一个新的模块了,这里我会对 JavaScript 执行原理做深入介绍. 今天在该模块的第一篇文章,我们主要讲解执行上下文相关的内容.那为什么先讲 ...

  4. 《浏览器工作原理与实践》<06>渲染流程(下):HTML、CSS和JavaScript,是如何变成页面的?

    在上篇文章中,我们介绍了渲染流水线中的 DOM 生成.样式计算和布局三个阶段,那今天我们接着讲解渲染流水线后面的阶段. 这里还是先简单回顾下上节前三个阶段的主要内容:在 HTML 页面内容被提交给渲染 ...

  5. 《浏览器工作原理与实践》<05>渲染流程(上):HTML、CSS和JavaScript,是如何变成页面的?

    在上一篇文章中我们介绍了导航相关的流程,那导航被提交后又会怎么样呢?就进入了渲染阶段.这个阶段很重要,了解其相关流程能让你“看透”页面是如何工作的,有了这些知识,你可以解决一系列相关的问题,比如能熟练 ...

  6. 《浏览器工作原理与实践》<11>this:从JavaScript执行上下文的视角讲清楚this

    在上篇文章中,我们讲了词法作用域.作用域链以及闭包,接下来我们分析一下这段代码: var bar = { myName:"time.geekbang.com", printName ...

  7. 《浏览器工作原理与实践》<10>作用域链和闭包 :代码中出现相同的变量,JavaScript引擎是如何选择的?

    在上一篇文章中我们讲到了什么是作用域,以及 ES6 是如何通过变量环境和词法环境来同时支持变量提升和块级作用域,在最后我们也提到了如何通过词法环境和变量环境来查找变量,这其中就涉及到作用域链的概念. ...

  8. 《浏览器工作原理与实践》<08>调用栈:为什么JavaScript代码会出现栈溢出?

    在上篇文章中,我们讲到了,当一段代码被执行时,JavaScript 引擎先会对其进行编译,并创建执行上下文.但是并没有明确说明到底什么样的代码才算符合规范. 那么接下来我们就来明确下,哪些情况下代码才 ...

  9. 【Web动画】CSS3 3D 行星运转 && 浏览器渲染原理

    承接上一篇:[CSS3进阶]酷炫的3D旋转透视 . 最近入坑 Web 动画,所以把自己的学习过程记录一下分享给大家. CSS3 3D 行星运转 demo 页面请戳:Demo.(建议使用Chrome打开 ...

随机推荐

  1. pandas的分布式执行框架之modin

    Scale your pandas workflows by changing one line of code       To use Modin, replace the pandas impo ...

  2. jQuery使用(十三):工具方法

    proxy() onConflict() each() map() parseJson() makeArray() proxy() $.proxy()的实现机制与原生javaScript中的bind( ...

  3. ElasticSearch 启动时加载 Analyzer 源码分析

    ElasticSearch 启动时加载 Analyzer 源码分析 本文介绍 ElasticSearch启动时如何创建.加载Analyzer,主要的参考资料是Lucene中关于Analyzer官方文档 ...

  4. JAVA传递带有空格的参数

    String s="b2 + b1"; Process child = Runtime.getRuntime().exec("C:\\eclipse-workspace\ ...

  5. 深入浅出UE4网络

    UE4中的官方文档结构比较混乱,且有部分错误,不方便学习.笔者试图通过本文,整理出一篇关于UE4网络的文章,方便朋友们对UE4中的网络同步部分的认识,并有进一步理解.如有讲得不清楚明白的地方,还望批评 ...

  6. luogu P5291 [十二省联考2019]希望

    luogu loj 无论最终结果将人类历史导向何处 \(\quad\)我们选择 \(\quad\quad\)\(\large{希望}\) 诶我跟你讲,这题超修咸的 下面称离连通块内每个点距离不超过\( ...

  7. Codeforces Round #447 (Div. 2) B. Ralph And His Magic Field 数学

    题目链接 题意:给你三个数n,m,k;让你构造出一个nm的矩阵,矩阵元素只有两个值(1,-1),且满足每行每列的乘积为k,问你多少个矩阵. 解法:首先,如果n,m奇偶不同,且k=-1时,必然无解: 设 ...

  8. 🍓vue & react 一些重要但没必要死记硬背的东西

  9. pythonのsimple_tag

    当我们需要在页面种直接调用py文件中的某些方法时,我们就要用到simple_tag.具体步骤如下: 1.在某个app下创建templatetags文件夹,切记该名称是不可以改变的. 2.在该文件夹下创 ...

  10. PostgreSQL快速入门

    一.PostgreSQL是什么? PostgreSQL是一个功能强大的开源对象关系数据库管理系统(ORDBMS). 用于安全地存储数据; 支持最佳做法,并允许在处理请求时检索它们. PostgreSQ ...