JS的解析机制,是JS的又一大重点知识点,在面试题中更经常出现,今天就来唠唠他们的原理。首先呢,我们在我们伟大的浏览器中,有个叫做JS解析器的东西,它专门用来读取JS,执行JS。一般情况是存在作用域就存在解析,那它是怎么运行的呢。首先呢,然后分成两大步骤。

1 第一步叫做JS预解析,这一步骤实际上是一种准备工作把,在执行之前,它会先浏览整个代码,然后寻找三种东西。 1var  2 函数声明    我来分别解释一下。首先它会提取带var声明的变量,然后放到作用域中,但是不会提取变量的值,会先给他赋值为undefined。然后呢会找到函数声明(关于函数声明上个博文有说),然后会把整个函数包括内容放到作用域。函数的参数也会被放进去。

所以我们可以知道在代码运行前,所有带var声明的变量都提前被赋值为undefined,找到所有有名字的函数所有的内容和参数,都提前被解析。

2 第二步就是执行了,JS解析器会逐行解读代码,在这过程中,只有表达式可以修改预解析的值(比如 = + - * / % -- ++ ! 参数....()),其他的会跳过。

下面来看个简单的栗子

    var a; 

    alert(a); //undefined 来自预解析

    a = 3;  //逐行解读代码到这句的时候,表达式修改了预解析中a的值。

    alert(a); //

这是个很简单的代码,我们按照解析机制来分析下:

第一步,找函数声明和var,然后找到了 var a=1; 这一句,就把 a提取出来然后赋值为undefined。即此时 a=undefined。

第二步,逐行解读代码, var a; 不是表达式,跳过,第一个alert(a);由第一步可知此时a=undefined, a = 3;  是表达式,并且更改了a的值,于是现在a=3,

所以最后弹出的是3。

下面再看个稍微复杂点的栗子。

var a=1;
function fn1(){
  alert(a);
  var a =2 ;
alert(a);
}
fn1();
alert(a);

我们按照解析机制来分析下:
1 预解析:找到带var的a和函数fn1(),放到全局作用域。

全局仓库:

a =undefined
function fn1(){
  alert(a);
  var a =2 ;
alert(a);
}

2 运行,逐行解读代码

var a=1;  // 将全局a的值改成1
function fn1(){ // 这里不是能够产生改变的表达式,所以运行的时候直接跳过。
  alert(a); // 先找局部变量a undefined
  var a =2 ; // 更改了局部作用域里a的值
  alert(a); // 2
}
fn1(); // 注意,当遇见函数的调用的时候,也会对函数进行预解析和运行两步操作。原理是相同的。只是作用域需要注意。
alert(a);// 在全局作用域里找a.显然等于1
函数的解析过程:

1  预解析:有点需要注意,当函数有参数的时候,参数也会被预解析,根据var a =2 ;找到 a 放到局部仓库  且a =undefined (注意这和全局作用域里的不是一个a,因为作用域不同,所以互相是不影响的),

所以此时是有两个作用域

全局仓库:

a =1;
function fn1(){
  alert(a);
  var a =2 ;
  alert(a);
}

函数里的局部仓库:

a =undefined ;

2  逐行解读函数里面的代码:当读取到这里 alert(a); 会优先在局部仓库里找a ,弹出未定义 ,当局部没有的时候 会去全局找

解读到var a =2 ; 优先在局部仓库里找a,把值改为2;所以解读到函数里面的第二个 alert(a); 就等于2了,

解读到最后一个alert(a),因为在全部环境里执行,所以会在全局仓库里找a;弹出1。

这个栗子,比较长,认真看几遍,一定会会收获良多的。

再看一个有参数存在的栗子:

有参数函数:

var a = 1;
function fn1(a){
  alert(a); // 1 来自局部作用域参数a,而且这个值是全局作用域里面的a作为参数传进来的值。
  a = 2 ; 修改了局部作用域里的a的值
  var a;
  alert(a); //
}
fn1(a);
alert(a); // 1 来自全局作用域

这里全局的预解析就不用多说了,找到了整个函数,和 a =undefined  然后执行a =1 ,到函数调用的时候,开始了函数的解析.

函数解析过程

1 预解析的时候,也会找到参数a,并且把它放到局部作用域,赋值为a = undefined.

2 逐行解读代码:会从参数开始解读 参数相当于局部变量 fn1(a); 这里把全局作用域里面的a的值,当作参数传入,注意只是把值传入,两个a是互不影响的,

不在同一个作用域。所以函数中先弹出1,后来局部作用域里的a值被改为2,就弹出了2 ,。最后一句弹出了a是1,可以发现函数里面优先更改的是局部作用域里面的a.(当在局部找不到a的时候,会去全局找 并且可以修改全局的值,所以大家可以实验把参数去掉,弹出的就是1 2 2 了)

下面再看一种比较特殊的情况,

1 就是在预解析过程中,遇到重名的情况,这个时候规律就是这样的,会优先留下有内容的,简单来说就是:当函数与变量重名,留下函数,当函数与函数重名,留下后面的函数。栗子就不举了,大家自己实验一下。

2 当有多个作用域的时候 解析器 会先预解析第一块的作用域中的东西 然后运行完成以后 再去预解析下一块的作用域的东西 再运行,后面的作用域可以找到前面作用域留下的东西,反过来就不行。

注意 if for等不是一个作用域。

   今天写的比较多,其实知识点原理都差不多,都是我平常学习的笔记总结,希望对大家有用。我是沐晴,下篇不见不散喔。

JS的解析机制的更多相关文章

  1. [妙味JS基础]第六课:作用域、JS预解析机制

    知识点总结 浏览器的解析方法 script 全局变量,全局函数 自上而下 函数 由里到外 "JS的解析器": 1)“找一些东西”:var function 参数 var a=未定义 ...

  2. JS预解析机制

    JS的预解析过程: 1,预解析 2,再逐行解读代码, 实例: ---------------------------- <script>        var name="xm& ...

  3. 第06课:作用域、JS预解析机制

    从字面上理解----域就是空间.范围.区域,作用就是读.写,所以作用域我们可以简单理解为:在什么样空间或者范围内对数据进行什么样的读或写操作. 看一下代码 alert(a); // 为什么是undef ...

  4. javascript-初级-day06作用域、JS预解析机制

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. JavaScript解析机制与闭包原理实例详解

    js代码解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字; 2.用var定义的变量 ...

  6. js学习笔记6----作用域及解析机制

    1.作用域: 域:空间.范围.区域… 作用:读.写 script  全局变量,全局函数 自上而下 函数 由里到外 {} 2.js解析: ⑴   “找一些东西”:var. function. 参数…… ...

  7. JS的运行机制

    代码块: JS中的代码块是指由<script>标签分割的代码段.JS是按照代码块来进行编译和执行的,代码块间相互独立(即就算代码块1出错,但不影响代码块2的加载和执行),但变量和方法共享. ...

  8. 轻松搞定javascript变量(闭包,预解析机制,变量在内存的分配 )

    变量:  存储数据的容器     1.声明        var   2.作用域       全局变量. 局部变量. 闭包(相对的全局变量):   3.类型         a.基本类型(undefi ...

  9. javascript解析机制、闭包详解

    js解析机制: js代码解析之前会创建一个如下的词法环境对象(仓库):LexicalEnvironment{ } 在扫描js代码时会把: 1.用声明的方式创建的函数的名字: 2.用var定义的变量的名 ...

随机推荐

  1. mysql ---复制表结构---创建新表

    1.复制表结构及数据到新表CREATE TABLE 新表SELECT * FROM 旧表这种方法会将oldtable中所有的内容都拷贝过来,当然我们可以用delete from newtable;来删 ...

  2. memcpy函数

    实现1:<高质量c++,c编程指南> void *mymemcpy(void *dst,const void *src,size_t num) { assert((dst!=NULL)&a ...

  3. java Memorymapfile demo

    String lineseperator = java.security.AccessController .doPrivileged(new sun.security.action.GetPrope ...

  4. openfire+asmack搭建的安卓即时通讯(二) 15.4.9

    上期没有放成果图呢!忘了=-=,这就是上次的成果图,textview里面会显示登陆的名字(这个是默认管理员帐号=-=) 好吧,登陆了服务器我们就有了交互的功能啦可以说是前进了一大步呢!下面能我们就要试 ...

  5. 怎么学习计算电磁学【QUORA】

    链接 There are several resources. But it depends on what you actually want to learn...Let me explain: ...

  6. 【Ext.Net学习笔记】05:Ext.Net GridPanel的用法(包含Filter、Sorter、Grouping、汇总(Summary)的用法)

    GridPanel是用来显示数据的表格,与ASP.NET中的GridView类似. GridPanel用法 直接看代码: <ext:GridPanel runat="server&qu ...

  7. ASP.NET URL伪静态重写实现方法

    ASP.NET URL伪静态重写实现方法 首先说下,ASP.NET URL伪静态只是将~/a_1.html指向到了~/a.aspx?ID=1,但a.aspx还是真实存在的,你不用./a_1.html来 ...

  8. 怎样用Zbrush中的Curves Tubes创建手指

    之前我们已经能够初步完成了模型的人体躯干,今天的Zbrush教程将继续使用Curves Tubes创建手指,实现更细致的塑形.文章内容仅以fisker老师讲述为例,您也可以按照自己的想法,跟着老师的步 ...

  9. 如何对ZBrush中面部进行快速布线

    面部布线的最重要目的是为了表情动画.人物内心的各种不同的心里活动,主要是通过面部表情反映出来.而面部变化最丰富的地方是眼部(眉毛)和口 部,其他部位则相应的会受这两部分的影响而变化.对于面部表情,必须 ...

  10. AC日记——铺地毯 洛谷 P1003(水水水水水~)

    题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照编号从小到大的顺序平行于 ...