【js预解析机制】
先来说说js的解析机制吧,浏览器在解析js代码时是从上到下解析的。
解析顺序如:
(1)预解析
    找var和function

(2)逐行代码解析
    表达式
    函数调用
    fn1()函数内部再发生
{
    (1)预解析
    (2)逐行代码解析
}

解析:
由子级到父级寻找变量,称作用域链

如:函数参数,为局部变量

<script type="text/javascript">
var a=1;
function fn1(a){//把a作为参数传进来,但是并没有在他的局部作用域定义
console.log(a);//函数内预解析为a=undefined
a=2;//后又将a改为2
}
fn1();
console.log(a);//输出1,在全局中找到的a=1
</script>

如:

<script type="text/javascript">
var a=1;
function fn1(a){
console.log(a);//输出1
a=2;
}
fn1(a); //传的参数为var a=1;为局部的
console.log(a);//输出1,此1为全局var a=1;
</script>

【js预解析器】通俗的讲就是在浏览器解析js代码前,他的预解析器会首先找到一些变量或把代码中的一些变量放入自己的仓库,在进行解析。
如:
预解析:

找一些东西:var、 function、 参数、a=未定义  
所有变量,在正式运行代码之前,都提前赋一个值:未定义undefined
fn1=function fn1(){alert(2);} //所有的函数,在正式运行代码之前都是整个函数块

注意:遇到重名,变量和函数重名,就留下函数,与上下关系没有关系,注:只先找var ,function声明的,

如:

 console.log(a);
var a=1;
console.log(a);
function a(){console.log(2);}
console.log(a);
var a=3;
console.log(a);
function a(){console.log(4);}
console.log(a);

具体过程:
1.找到第一个var存值为undefined(注意不会为其赋值为1,而是undefined)
2.function a(){console.log(2);}代替前面var
3.var =3不会替代function
4.function a(){console.log(4);}替代function a(){console.log(2);}
5.预解析结果:把a=function a(){console.log(4);}存在预解析的仓库里面

(2)逐行解读代码

表达式= + - / ++ -- !参数等,(一个动作能够去做一些改变

如:

alert(a);undefined
var a=1;
alert(a);//

表达式可以预解析该仓库里面的值
而function a(){alert(2);}只是一个声明并不会改变a的值
逐行解读代码的结果:

 console.log(a);//function a(){console.log(4);}
var a=1;
console.log(a);//
function a(){console.log(2);}
console.log(a);//
var a=3;
console.log(a);//
function a(){console.log(4);}
console.log(a);//
//最后存在仓库里面的就是a=3一个数字

如:利用局部改全局

 var str="";
function fn1(){
var a='哈哈哈~';
str=a;
}
fn1();
//console.log(a);//Uncaught ReferenceError: a is not defined
console.log(str);//哈哈哈~,利用局部改全局

如:函数内部调用外部函数:

 function fn2(){
var a='这是fn2的东西!';
fn3(a);
} fn2();
function fn3(b){
console.log(b);//注:与fn2里面的a不一样,输出为这是"fn2的东西!"
}

注:
if(){}
for(){}  while()
不是作用域

注:

<script type="text/javascript">
window.onload=function(){
var Btn=document.getElementsByTagName('input');
var i=0;
for(i=0;i<Btn.length;i++){
Btn[i].onclick=function(){
for(i=0;i<Btn.length;i++){
Btn[i].style.background='red';//如果没有下面的for会出现Uncaught TypeError: Cannot read property 'style' of undefined
} }
}
};
</script>

JS解析+预解析相关总结的更多相关文章

  1. js的预解析

    在ES6之前,变量使用var声明,会存在变量的预解析(函数也有预解析).ES6引了let和const,但是现阶段ES6并没有完全普及,而且很多比较老的代码都还是按照ES5的标准甚至是ES3的标准来书写 ...

  2. 两个实例轻松理解js函数预解析

    js函数预解析 例子1: 先上一段代码,看看能不能写出最终的执行结果. console.log(a); var a = 1; console.log(a); function a(){ console ...

  3. 怎样理解JS的预解析机制

    JS的预解析包括两部分: 1. 变量提升 2. 函数声明 对于变量提升, 可以看下下面这块代码 console.log(name); // undefined var name = "Lil ...

  4. JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念

    JavaScript中hoisting(悬置/置顶解析/预解析) 实例解释,全局对象,隐含的全局概念 <html> <body> <script type="t ...

  5. js的预解析详解

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 2.2、js基础---预解析和严格模式

    一.语言特性         1.预解析:js会把变量的声明(仅仅是声明)提到顶部,但是不会突破作用域.                 alert(a);var a= 12; //结果,undefi ...

  7. js之预解析

    一.所谓的预解析就是:在当前作用域中,JavaScript代码执行之前,浏览器首先会默认的把所有带var和function声明的变量进行提前的声明或者定义. 1)var声明的变量在预解析的时候只是提前 ...

  8. js的预解析和作用域

    预解析指的就是,在js文件或者script里面的代码在正式开始执行之前,进行的一些解析工作.这个工作很简单,就是在全局中寻找var关键字声明的变量和通过function关键字声明的函数. 1.寻找 v ...

  9. js的预解析和代码执行相关规则

    JavaScript解析过程分为两个阶段,一个是编译阶段,另外一个就是执行阶段. 1.编译阶段:又称为预解析阶段,在这个阶段JavaScript解释器将完成把JavaScript脚本代码转换到字节码. ...

随机推荐

  1. MiniUI 在线示例

    引用 http://miniui.com/demo/#src=datagrid/celledit.html

  2. Java的==与equals之辨

    =======================原理速记=================================== equals重载后比较内容,==比较指针.否则equls等同于== (Ja ...

  3. CentOS 7.4 下安装Epel源和Nginx

    EPEL (Extra Packages for Enterprise Linux)是基于Fedora的一个项目,为“红帽系”的操作系统提供额外的软件包,适用于RHEL.CentOS和Scientif ...

  4. OpenCV3计算机视觉+python(三)

    使用OpenCV3处理图像 下面要介绍的内容都与图像处理有关,这时需要修改图像,比如要使用具有艺术性的滤镜.外插(extrapolate)某些部分.分割.粘贴或其他需要的操作. 不同色彩空间的转换 O ...

  5. time函数计算时间

    学过C语言的都知道有个time函数可以计算时间, 也好像知道time(NULL)返回的是一个距离1970年1月1日0时0分0秒的秒数. #include <stdio.h> #includ ...

  6. 基于R语言的数据分析和挖掘方法总结——中位数检验

    3.1 单组样本符号秩检验(Wilcoxon signed-rank test) 3.1.1 方法简介 此处使用的统计分析方法为美国统计学家Frank Wilcoxon所提出的非参数方法,称为Wilc ...

  7. 笔记:git和码云

    背景:之前使用GitHub,无奈网速原因,有时候竟无法连接,搜索解决方案而又鱼龙混杂淹没在信息的海洋. 于是尝试码云,界面简单,全中文,用起来很是顺手. 码云使用git来管理,操作上都是git的基本指 ...

  8. nf_conntrack之解决方案

    1.现象 在/var/log/message中出现以下信息 Dec 8 11:22:29 product08 kernel: nf_conntrack: table full, dropping pa ...

  9. mini2440移植uboot 2014.04(六)

    上一篇博文:<mini2440移植uboot 2014.04(五)> 代码已经上传到github上:https://github.com/qiaoyuguo/u-boot-2014.04- ...

  10. iOS_多线程(一)

    在学习多线程之前首先搞清楚以下几个问题. 并发:在同一时刻,只有一条指令被执行,多条指令进行快速切换执行. 并行:在同一时刻,多个处理器可以处理多条指令 1.什么是进程?      一个运行的程序就是 ...