JavaScript浏览器解析原理
发布日期:2021-08-11 02:51:22 浏览次数:46 分类:技术文章

本文共 1696 字,大约阅读时间需要 5 分钟。

首先,JavaScript的特点是:

  1. 跨平台

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

  2. 弱类型

    与之相对的是强类型

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

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

  3. 解释执行,逐行执行

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

  1. 语法检测 

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

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

  3. 逐行执行

词法分析(预编译)

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

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

console.log(a);     //返回值:function a(){}

var a = 100;
console.log(a)      //返回值:100
var b = 200
var c = 300
function a(){
}
function fun(){
}

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

GO = {}

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

GO = {    a : undefined,    b : undefined,    c : undefined}

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

GO = {    a : function a(){                    },    b : undefined,    c : undefined,    fun : function fun(){    }}

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

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

a赋了一次值,值改变为100 GO = {    a : 100,    b : undefined,    c : undefined,    fun : function fun(){    }}

  2 . 局部、函数执行时

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

    1. 预编译:先是全局

GO = {    num : undefined,    fun : function}
GO = {    num : 100,    fun : function}

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

fun.AO = {                }

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

fun.AO = {    num : 5}

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

fun.AO = {    num : 5,    a : underfined}

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

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

fun.AO = {    num : 5,    a : underfined}

   最后的输出的为:5

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

转载于:https://www.cnblogs.com/mercy-up/p/10133241.html

转载地址:https://blog.csdn.net/weixin_30609287/article/details/98634115 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Oracle子句【group by、having】
下一篇:windows下批量杀死进程

发表评论

最新留言

很好
[***.229.124.182]2024年04月02日 21时30分45秒