js解析器首先不会逐行读代码，这是第二部了。

首先 根据var找到变量，根据function找函数，找到变量var a = 1,js解析器只会读取等号前面的var a,并把a设置值未定义，并不会读取等号后面的a = 1,所以a的值是未定义，并加入仓库，根据function找到函数后，function a (){ alert(2); }，找到函数是函数整体，这是js的预解析（预解析只找var 和函数）。遇到重名的留下后面的，变量和函数重名了，函数在后面，只留下函数。

正式读取代码的时候，是从上到下从左到右，上面<script/>块中定义的变量可以直接在下面的<script/>中使用。

alert(a);

var a = 1;

读取到alert(a);时候，因为之前a是未定义，所以这个报错，遇到表达式a = 1,就把之前a是未定义变成1。

var a = 1;

function fn1(){

    alert(a);

    var a = 2;

}

fn1();

alert(a);

首先预解析找到var a = 1,此时a未定义，和函数，加入仓库(预解析只解析var 和 函数的定义)。

预解析完了，从上到下执行，遇到函数调用fn1(); 函数是一个局部的域,会新开一个局部作用域，遇到域就进行预解析和逐行执行代码，局部预解析时var a 是未定义，局部预解析完了就开始逐行执行代码，alert(a)只会在函数局部域内找a是未定义，var a = 2只是改变局部域中a为2不会改变全局域的a，最后alert(a)弹出1

var a = 1;

function fn1(){

    alert(a);

    a = 2;

}

fn1();

alert(a);

首先预解析，a是未定义，函数fn1也加入仓库，全局域的预解析完了。下面开始逐行执行代码。var a = 1把仓库中的a改成1，找到函数的定义，这里不动它，然后找到函数的调用fn1()，开始函数局部域的预解析，局部域中没有var 和函数定义，局部域的预解析完了，然后逐行执行函数内部，读到alert(a),在局部域中没有找到a，则会向上级域中去找，找到全局域的a = 1，弹出a = 1,在执行a = 2,局部作用域没有a则找到上级域，把a改成了2，最后弹出2.

var a = 1;

function fn1(a){

    alert(a);    //a是局部域中的仓库中的a,相当于写了var a;

    a = 2;

}

fn1();

alert(a);

首先预解析var a = 未定义 ，和函数fn1()加入仓库。

逐行执行代码a = 1,函数调用fn1(),看到参数a,会在函数局部作用域解析a = 未定义，alert(a)弹出未定义，a= 2改变局部作用域中的a的值，最后alert(a),弹出1。

var a = 1;

function fn1(a){

    alert(a);//a是局部域中的仓库中的a,相当于写了var a = 1;

    a = 2;

}

fn1(a);

alert(a);

全部预解析，a=未定义，函数就是一个函数。

读代码，全局a=1，函数定义不动。函数调用，局部开始新的预解析和逐行读代码，局部没有var 没有function，有参数a,加入局部域的仓库a = 未定义，接下来局部域逐行读代码，首先从参数开始读，a= 1,是从全局前面传进来的，局部作用域的a等于1了，alert（a）弹出1，a=2修改局部作用域的a =  2,全局a没有改变，因为a参数传进来相当于局部域定义了一个新变量a，最后弹出1

function fn2(){

    var a = '9999999克拉钻石23456789';

    fn3(a);

}

fn2();

function fn3(a){

    alert(a); //相当于写了var a = '99923456678';

}

全局解析：把函数fn2()和fn3()加入全局的仓库。

逐行读代码： fn2()调用：

             局部解析 var a = 未定义，无函数定义

             局部逐行读代码，a = '9999999克拉钻石23456789',函数调用fn3(a),局部域仓库中没有找到fn3()的定义，去全局域中找，找到了，fn3(a)调用开始：

                           局部的局部解析，参数相当于新定义一个局部变量，a = 未定义

                           局部的局部逐行执行代码，a = 全局传进来的值9999999克拉钻石23456789，alert(a)
             
<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script>

window.onload = function (){

    var aBtn = document.getElementsByTagName('input');

    for( var i=0; i<aBtn.length; i++ ){

        aBtn[i].onclick = function (){

            alert( i );            // 一直是3，因为for执行完之后i一直等于3

            //aBtn[i].style.background = 'yellow';

            for( var i=0; i<aBtn.length; i++ ){

                aBtn[i].style.background = 'yellow';

            }

        };

    }

};

</script>

</head>

<body>

<input type="button" value="按钮1" />

<input type="button" value="按钮2" />

<input type="button" value="按钮3" />

</body>

</html>
全局预处理和执行：

创建全局LexicalEnvironment === window对象,保存全局var 和函数的定义（保存函数名作为变量指向函数），

    var f = 5;

    g = 6;

    function xx(){};

    window对象{

         f : 未定义

         xx : 指向函数

    }

    g前面没有var ，预处理阶段不会保存到window对象，会报错。

alert(f);//弹出函数体

var f = 5;

function f(){};

---------------------------

alert(f);//还是函数体

function f(){};

var f = 5;

有冲突时后面出现的是函数，则覆盖前面的变量，如果后面出现的是变量，则不能覆盖前面的函数，后面的函数覆盖前面的函数是重新赋值，后面的变量覆盖前面的变量也是重新赋值。

alert(f);//弹出后面的

function f(){alert(2)};

function f(){alert(1)};

alert(f1);//undefined

var f1 = 5;

var f1 = 6;

var f1=5;
var f2=6;
alert(f2);//6

alert(f2);//弹出后面

var f2 = 5;

function f2(){alert(1)};

alert(f3);//弹出前面

function f3(){alert(1)};

var f3 = 5;

alert(f4);//弹出后面函数

function f4(){alert(1)};

var f4 = 5;

function f4(){alert(2)};

---------------------------------------------

alert(a);//undefined

alert(b);//预处理阶段，b前面没有var,不会加入到Window对象中，报错

alert(f);//函数体

alert(g);//undefined

var a = 5;//执行阶段window对象中a : 5

b = 6;//预处理阶段没有将b加入windown对象中，但是在执行阶段会将加入b : 6到window对象

alert(b);//弹出6

function f(){

 console.log('f');

}

var g = function (){

 console.log('g');

}

alert(g);//弹出函数体

预处理阶段，window对象

window｛

    a : undefied

    f ： 指向函数

    g : undefined  ////预处理阶段只会保存 g : undefined，后面函数不是声明方式的函数，不会保存在window对象中。

｝

执行阶段

window{

    a: 5

    b :6

    f:指向函数

    g :指向函数

}
函数预处理和执行：

function f(a,b,c){//参数传递相当于在函数体写了 var a = 1,var b = 2,

    alert(a);//弹出函数体

    alert(b);//

    var b = 100;

    function a(){

    }

}

f(1,2);

函数局部预解析过程中：

局部

｛

  a : 1   //局部作用域的a  ，不影响全局作用域的a,

  b : 2   //局部作用域的b  ，不影响全局作用域的b,

  c : undefined

  arguments :

｝

执行过程中

｛

  a : 执行函数的引用   //冲突覆盖变量

  b：2   //变量不会覆盖

  c : undefined

｝

-------------------------------------------

function f1(){

    function f2(){

      b = 100；//函数体中没有通过var声明的变量，会加入到全局window作用域中，window{ b : 10},不是加入到f2和f1函数的局部作用域中，

    }

    f2();

}

f1();

js---07 js预解析，作用域---闭包的更多相关文章

  1. JS中的预解析

    js预解析对于很多学习web前端开发的新手们很困扰,总是很难搞懂到底是个什么东西,今天零度就为大家简单的分析一下,争取让大家都明白! 首先,看一下下面的代码: alert(a); var a = 1; ...

  2. JS基础语法---预解析

    预解析:就是在解析代码之前   1. 预解析做什么事? 把变量的声明提前了----提前到当前所在的作用域的最上面 函数的声明也会被提前---提前到当前所在的作用域的最上面   举例: function ...

  3. 第112天：javascript中函数预解析和执行阶段

    关于javascript中的函数:  1.预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前  2.执行 :从上到下执行,但有例外(setTimeout,setInterval,aja ...

  4. javascript的执行和预解析

    很久以前遇到过一个面试题目,的的确确是面试官问我的问题,下面是这个问题的代码部分.由于年少无知,没有回答上,被无情pass了. var u ='hello world'; ;(function(){ ...

  5. JS作用域概念-预解析规则

    // 作用域: // 域:空间.范围.区域…… // 作用:读.写 script 全局变量.全局函数 自上而下 函数 由里到外 {} 浏览器: “JS解析器” 1)“找一些东西” :var funct ...

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

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

  7. 关于js语法中的一些难点(预解析，变量提前，作用域)

    ******标题很吓人************ 其实就是一个小小的例子 ,从例子中简单的分析一下作用域.预解析和变量提前的概念 <!DOCTYPE html> <html> & ...

  8. 第06课：作用域、JS预解析机制

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

  9. 14 (H5*) JS第4天 函数、作用域、预解析

    目录 1:函数的其他定义 2:函数作为参数 3:函数作为返回值 4:作用域 5:作用域链 6:预解析 7:预解析分段 复习 <script> /* * 复习: * 函数:把一些重复的代码封 ...

随机推荐

  1. 设计url 通过分发的方式 Xadmin_demo

    如 urlpatterns = [ url(r'^Xadmin/',([ url(r'^add/$', views.add) url(r'^delete/$', views.delete) ], No ...

  2. Angular2/Ionic2集成Promact/md2.md

    最近想找一套比较完整的基于Material风格的Angular2的控件库,有两个选择一个是Angular官方的Material2,但是这套库的DatePicker控件目前只能支持年月日,不支持时分秒, ...

  3. mysql 导出到 mongodb 与快速插入测试数据

    快速插入数据: 因为 MongoDB 的底层引擎是 JS 引擎,所以完全可以使用一些 Js 的语法.   for(var i=0;i<10000;i++){    db.ceshi.insert ...

  4. php八大设计模式之单例模式

    单例模式的好处: 实例化后只得到一个对象,减少内存的开销. 实现单例模式: 提供一个私有的属性用来存储实例后的对象. 禁止外部实例化对象,提供公共的的方法,返回实例化后的对象. 避免继承此类,然后重写 ...

  5. [USACO07DEC]道路建设Building Roads

    题目:洛谷P2872.POJ3625. 题目大意:给你n个点的坐标,有些点已经有边连通,现在要你连上剩下的所有点,求这些边的最小长度是多少(不包括原来的边). 解题思路:最小生成树,把所有边处理出来, ...

  6. Java基础学习总结（12）——一哈希编码HashCode

    一.哈希编码 现在是站在JAVA虚拟机的角度来看内存里面的布局,站在JAVA虚拟机的角度,在内存里面有好多好多个对象,这里用椭圆来代表一个个对象.一个程序运行起来的时候,可能会有很多个对象在内存里面分 ...

  7. CodeForces 400A Inna and Choose Options

    Inna and Choose Options Time Limit: 1000ms Memory Limit: 262144KB This problem will be judged on Cod ...

  8. Spring Cloud学习笔记【十】配置中心（消息驱动刷新配置）

    上一篇中讲到,如果需要客户端获取到最新的配置信息需要执行refresh,我们可以利用 Webhook 的机制每次提交代码发送请求来刷新客户端,当客户端越来越多的时候,需要每个客户端都执行一遍,这种方案 ...

  9. Windows安装两个mysql数据库步骤

    因为新旧项目数据库版本号差距太大.编码格式不同.引擎也不同,所以仅仅好装两个数据库. 本次安装两个mysql数据库.版本号各自是4.0.18,5.5.36.都是可运行文件直接安装. 本机上之前已经安装 ...

  10. Codeforces Round #105 (Div. 2) 148C Terse princess(脑洞)

    C. Terse princess time limit per test 1 second memory limit per test 256 megabytes input standard in ...