JavaScript解析过程分为两个阶段:

一是:编译阶段.就是JavaScrip预解析阶段,在这个阶段JavaScript解析器将完成把JavaScript脚本代码转换到字节码;

二是:执行阶段.在编译阶段JavaScript解析器借助执行环境把字节码生成机械码,并顺序执行;

预解析:在当前的作用域中,js代码执行之前浏览器会默认把所有带var 和function的进行提前的声明或者定义;

eg:var num=1;

sum();

function sum(){console.log(num)};//1

执行过程:

1.预解析:查找var,找到num变量,按照与解析的规则,变量的预解析是只声明不赋值.

相当于把num变量放在了全局变量仓库里,但是此时的num并没有赋值,值为undefined.

查找function关键字,发现了函数素描,按照与解析的规则,声明并定义,相当于把sum函数放在全局的仓库,并且赋值了.

2.执行:代码从上到下执行,预解析过的直接略过.

*定义函数的方式有函数声明函数表达式两种,通过对预解析机制的简单了解我们可以知道只有函数声明的方式才可以将函数执行写在函数声明之前,而使用函数表达式定义的函数则不能先调用后声明

handel1(); //1 函数声明的方式,函数整体被预解析
function handel1(){
alert(1);
}

handel2(); //Uncaught TypeError: undefined is not a function 函数表达式仅仅将变量名进行了预解析
var handel2 = function(){
alert(1);
}

*简单了解我们可以知道只有函数声明的方式才可以将函数执行写在函数声明之前,而使用函数表达式定义的函数则不能先调用后声明,

alert(a); //function a(){alert(4)}
var a = 1;
alert(a); //1

function a(){
alert(2);
}
alert(a); //1

var a = 3;
alert(a); //3

function a(){
alert(4);
}
alert(a); //3

*由于JS是自上而下的执行顺序,单个script标签内为一个完整的执行域,所以会逐个script标签进行以上两步操作

* 当JS解析器执行代码到fn()执行的时候重新执行预解析过程,如果在执行函数里面的代码的时候没有在执行环境中找到相应变量则会在其父级作用域中寻找,这种方式叫做作用域链.

eg:var a=1;

function fn(){

alert(a);//1

a=2;

}

alert(a);//1

fn();

alert(a);//2

*除了var和function会被预解析之外,函数的参数也会被执行环境预解析:

var a = 1;
function fn(a){
alert(a); //undefined
a = 2; //这里修改的是函数作用域内的局部变量a
}
fn();
alert(a); //1

作用域:

全局作用域:在代码中任何地方都能访问到的对象,

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域.

eg:var num=1;

function sum(){console.log(num)};

(2)所有未定义直接复制的变量自动声明为拥有全局作用域,

eg:function sum(){

var num1=10;//局部变量

num2=20;//全局变量

}

(3)所有window对象的属性拥有全局作用域

一般情况下,window对性的内置属性都拥有全局作用域.

局部作用域:一般只在固定的代码片段内可以访问到,最常见的就是函数内部,所以在一些地方也会看到有人把这种作用域称为是函数作用域.

eg:var num=1;//全局作用域

function sum(number){//number是局部变量

var num2=2;//局部变量

console.log(num);//num为全局变量

num=3;//全局变量

}

函数有一个内部属性[[Scope]],该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,他决定了哪些数据能被函数访问.

javascript预解析和作用域的更多相关文章

  1. Javascript预解析、作用域、作用域链

    最近在看js的一些资料,总结一下昨晚看到的js作用域方面的知识,不准确的地方希望留言指正! 先看片段js代码如下: < script type="text/javascript&quo ...

  2. JavaScript 之有趣的函数(函数声明、调用、预解析、作用域)

    前言:“函数是对象,函数名是指针.”,函数名仅仅是指向函数的指针,与其他包含函数指针的变量没有什么区别,话句话说,一个函数可能有多个名字. -1.函数声明,function+函数名称.调用方法:函数名 ...

  3. JavaScript预解析

    定义:JavaScript"预解析",可以理解为把变量或函数预先解析到它们被使用的环境中. 通俗点讲,即认为浏览器在正式运行JavaScript代码前, 第一步,会预先根据关键字v ...

  4. JavaScript 预解析机制

    首先我们来看一段代码: <script> console.log(a); var a = 10; </script> 此时运行结果为   为什么会显示undefined呢?这就 ...

  5. JavaScript 预编译与作用域

    JavaScript 预编译与作用域 JavaScript 预编译的过程和作用域的分析步骤是 JS 学习中重要的一环,能够帮助我们知道代码的执行顺序,更好理解闭包的概念 预编译 JavaScript ...

  6. javascript 预解析

    内容来源:http://www.cnblogs.com/TomXu/archive/2011/12/28/2286877.html JavaScript中,你可以在函数的任何位置声明多个var语句,并 ...

  7. 轻松搞定javascript预解析机制(搞定后,一切有关变态面试题都是浮云~~)

    hey,guys!我们一起总结一下JS预解析吧! 首先,我们得搞清楚JS预解析和JS逐行执行的关系.其实它们两并不冲突,一个例子轻松理解它们的关系: 你去酒店吃饭,吃饭前你得看下菜谱,点下菜(JS预解 ...

  8. js---07 js预解析,作用域---闭包

    js解析器首先不会逐行读代码,这是第二部了. 首先 根据var找到变量,根据function找函数,找到变量var a = 1,js解析器只会读取等号前面的var a,并把a设置值未定义,并不会读取等 ...

  9. js的预解析和作用域

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

随机推荐

  1. [转]使用git命令上传代码

    http://jiajing.elastos.org/2013/04/15/%E4%BD%BF%E7%94%A8git%E5%91%BD%E4%BB%A4%E4%B8%8A%E4%BC%A0%E4%B ...

  2. Spring框架的反序列化远程代码执行漏洞分析(转)

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  3. 使用XIB实现一个简单view

    技术处女贴 欢迎来探讨 转帖请注明出处 http://www.cnblogs.com/andy-zhou/p/4962135.html 微信: @Andy 1. AppDelegate AppDele ...

  4. python 练习 16

    #!/usr/bin/python # -*- coding: UTF-8 -*- import time myD = {1: 'a', 2: 'b'} for key, value in dict. ...

  5. [saiku] 系统登录成功后查询Cubes

    一.系统启动时初始化ds和conn 1.查询出目前系统拥有的Datasources和Connections放入内存中 2.比对saiku-datasources中的ds是否有新增的,如果有,创建新的d ...

  6. python3 安装scrapy Exception: Traceback (most recent call last): File "/usr/lib/python3/dist-packages/pip/req/req_install.py", line 1006, in check_if_exists解决方法

    错误代码: Exception: Traceback (most recent call last): File , in check_if_exists self.satisfied_by = pk ...

  7. hdu---(3779)Railroad(记忆化搜索/dfs)

    Railroad Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  8. JQ添加移除css样式

    1. addClass() - 添加CSS类 $("#target").addClass("newClass"); //#target 指的是需要添加样式的元素 ...

  9. How to decide on the correct number of clusters?

    Determining the number of clusters/segments in hierarchical clustering/segmentation algorithms 由于uni ...

  10. jQuery学习小结3——AJAX

    一.jQuery的Ajax方法 jQuery对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装: 最底层的封装方法为——$.ajax ...