Javascript中作用域的详细介绍


Posted in Javascript onOctober 06, 2016

1、编译原理

在传统编译语言的流程中,程序中的一段代码执行前会经历三个步骤。统称为“编译”。

词法分析

将代码字符串分解成有意义的代码块,这些代码块称为词法单元。例如:在js中,var a = 2;。这段程序通常被拆分为以下词法单元。var、a、2、;。至于空格是否会被当成词法单元,取决于空格在这门语言中是否有意思。
语法分析

将词法单元流(数组)转换为“抽象语法树”(AST,Abstract Syntax Tree。编译原理课程中提到过)。
代码生成

将AST转换为可执行代码。与语言,平台有关(java跨平台)。简单来说:var a = 2;的AST被转换成一组机器指令,用来创建一个a的变量(分配内存等),并将2存储在a中。


而对于Javascript而言,尽管通常它被归类为“动态”或“解释执行”语言,但实际上它是一门编译语言。所不同的是,在它编译时引擎要执行更复杂的操作过程。


首先,Javascript引擎不会有大量的(向其他编译器那么多的)时间来进行优化,因为与其他语言不同,它的编译过程不是在构建之前的。


对于Javascript而言,大部分编译发生在代码执行前的几微秒(甚至更短)。所以引擎会用尽各种方法(比如JIT)来保证性能最佳。


简单的说,任何Js代码在执行前都要编译(几微秒前)。因此,在执行var a = 2;这段代码前,引擎会先编译,然后做好执行它的准备(加入到代码队列)。通常是马上执行。

2、理解作用域

引擎

负责整个编译以及执行过程。
编译器

引擎的好朋友之一,负责语法分析和代码生成等脏活累活。
作用域

引擎的另一个好朋友,负责收集和维护所有变量,并实施一套非常严格的规则,以保证当前代码(作用域)对变量的访问权限。

对于var a = 2;,它不仅仅是一句简单的声明。声明它有两个过程。编译时:编译器进行相关操作。执行时,Js引擎进行相关操作。

var a,编译器会在当前作用域查找是否有a这个变量。如果有,则编译器忽略此声明。否则,在当前作用域创建一个a变量(分配内存)。

a = 2,接下来编译器(语法分析,代码生成…)生成运行时所需的代码用来处理这个赋值操作。具体的赋值操作由Js引擎负责。Js引擎会在当前作用域查找a这个变量,如果找到,就进行赋值操作。否则,在父级作用域查找(作用域嵌套),直至全局作用域。如果找到,进行赋值操作。找不到抛出异常。

在查找作用域的过程中,会涉及到LHS查询和RHS查询。它们分别代表赋值操作的目标和赋值操作的源头。不仅仅是赋值操作,更有函数赋值操作等等。比如:

function foo(a){
  console.log(a);
}
foo(2);

最后一行foo()函数的调用需要对foo()本身进行RHS查询。在全局作用域中找到了foo的声明。并且()意味着要把foo当做一个函数执行,所以foo最好是一个函数,否则会报错。


还有一个容易忽视的细节。在把2作为实参传入到foo的形参时,会有一个隐式的a=2操作。a是赋值操作的源头,2是赋值操作的目标。所以这里对a进行了一次LHS查询。由于在编译过程中在当前作用域(函数作用域)将a声明为foo的一个形参了,所以可以找到。


然后就是console.log(a);,console本身也需要一个LHS查询,它是在window下面的内置对象,所以可以找到。然后对a进行RHS查询。幸运的是,在将2赋值给函数形参a的时候,a已经声明并赋值了。所以这个RHS是可以进行的。

3、作用域嵌套

在之前我们说过,作用域负责收集和维护所有变量,并实施一套非常严格的规则,以保证当前代码(作用域)对变量的访问权限。考虑以下代码:

function foo(a){
  console.log(a+b);
}
var b = 2;
foo(2);

我们只考虑这里对b的RHS引用。Js引擎开始试图在foo函数作用域查找b变量,但是并没有找到。于是,Js引擎就会突破当前限制,去外层作用域查找。哎呀,找到了!于是就对b进行RHS引用成功了。当然呢,要是没找到的话,Js引擎也不会放弃,会继续往外层作用域查找,直到找到全局作用域。然后遵循的规则参照a=2赋值那块。

4、异常

在一个变量还没有声明(任何作用域都无法查到)的情况下,LHS和RHS查询失败后的操作是不一样的。可以预料,RHS查询失败会抛出一个异常,那么LHS查询失败呢?

function foo(a){
  console.log(a+b);
  b = a;
}
foo(2);

第一次对b进行RHS查询时,在任何作用域无法找到该变量的声明。那么有小伙伴就疑惑了,b=a呢?不是对b的声明吗?答案是:是。这里确实是对b的声明。

但在对作用域查找的过程中,只会向上查找声明(涉及到声明提升)。由于这里b是在console.log()后面定义的。所以是失败的,抛出ReferenceError异常。值得注意的是,ReferenceError是非常重要的异常类型。再考虑下述代码:

function foo(a){
  b = a;
  console.log(a+b);
}
foo(2);

这里呢,第一次对b进行的是LHS查询。如果在顶层(全局)作用域也无法查到foo的话,那么Js引擎就会很热心的帮你在全局作用域创建一个b变量,前提是在非“严格模式”下,在一个作用域内加上代码“use strict”,表明使用严格模式。在严格模式下,LHS查询失败时,并不会创建一个全局变量,而是抛出同RHS查询失败时类似的ReferenceError异常。


接下来,加入你找到了这个变量,但是你试图对这个变量进行不合理的操作。如:对一个非函数类型的变量进行()函数调用、对null或undefined类型的值进行访问,那么引擎会抛出另一种类型的异常,叫做TypeError。


总之,RefercenError同作用域判别失败相关,而TypeError表示作用域判别成功,但是对结果的操作是不合法的。

5、小结

作用域是一套规则,规定在何处以及如何查找变量(加上之前说的,重要的事情说三遍)。如果查找的目的是赋值,就是进行LHS查询。如果目的是获取变量的值,就会进行RHS查询。


Js引擎会在代码执行前对其进行编译。var a = 2;,这样的操作会被分成两个步骤。


1.编译时, 编译器声明a变量,即var a。

2. 运行时,对a变量进行赋值。a=2。

LHS查询和RHS查询失败会进行不同的操作。RHS查询失败会抛出ReferenceError异常。LHS查询失败会在全局作用域创建变量(非严格模式),在严格模式下抛出ReferenceError异常。

以上就是本文的全部内容,希望对大家有所帮助,希望大家继续关注三水点靠木的最新内容。

Javascript 相关文章推荐
ExtJS下书写动态生成的xml(兼容火狐)
Apr 02 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
jquery中done和then的区别(详解)
Dec 19 jQuery
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
js实现非常棒的弹出div
Oct 06 #Javascript
jQuery事件用法详解
Oct 06 #Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
Oct 05 #Javascript
js改变html的原有内容实现方法
Oct 05 #Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 #Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 #Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 #Javascript
You might like
PHP使用imagick扩展实现合并图像的方法
2017/04/25 PHP
jquery 防止表单重复提交代码
2010/01/21 Javascript
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
html a标签-超链接中confirm方法使用介绍
2013/01/04 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
在AngularJS应用中实现一些动画效果的代码
2015/06/18 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
vue.js 实现评价五角星组件的实例代码
2018/08/13 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
新手入门js闭包学习过程解析
2019/10/08 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
python strip()函数 介绍
2013/05/24 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python global关键字的用法详解
2019/09/05 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
HTML5 UTF-8 中文乱码的解决方法
2013/11/18 HTML / CSS
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
介绍一下SQL Server的全文索引
2013/08/15 面试题
医学检验专业大学生求职信
2013/11/18 职场文书
机械系大学毕业生推荐信
2013/11/27 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
培训班通知
2015/04/25 职场文书
房屋维修申请报告
2015/05/18 职场文书
Docker下安装Oracle19c
2022/04/13 Servers