在写这篇博客时这本书我已经是看过一遍了,为了加深印象和深入学习于是打算做这系列的前端经典书籍导读博文,大家如果觉得这本书讲的好可以自己买来看看,我是比较喜欢看纸质版书的,因为这样才有读书的那种感觉。

本期我给大家讲述的是     前端经典js书籍   <<你不知道的javaScript(上卷)>> 第一章内容的知识点总结和讲解。

1.1 编译原理

尽管通常将js归类为“动态”或“解释执行”语言,但事实上它是一门编译语言。但与传统的编译语言不同,他不是提前编译的,编译结果也不能在分布式系统中进行移植。在传统编译语言的流程中,程序中的一段源代码在执行之前会经历三个步骤,统称为“编译”。

1>分词/词法分析

这个过程会将由字符组成的字符串分解成(对编程语言来说)有意义的代码块,这些代码块被称为词法单元。例如,考虑程序 var a=2;这段程序通常会被分解成为下面这些词法单元 :   var 、a、=、2、;。空格是否会被当做词法单元,取决于空格是否在这门语言中具有意义。

2>解析/语法分析

这个过程是将词法单元流(数组)转换成一个由元素逐级嵌套所组成的代表了程序语法结构的树。这个树称为“抽象语法树”(AST)。

3>代码生成

将AST转换为可执行代码的过程被称为代码生成。这个过程与语言、目标平台等息息相关。抛开具体细节,简单的来说就是有某种方法可以将   var  a=2 ;的AST转化为一组机器指令,用来创建一个叫做a的变量(包括分配内存等),并将一个值存储在a中。

1.2理解作用域

为了进一步理解,我们需要多介绍一点编译器的术语。在我们的例子中,引擎会为变量a进行LHS查询。另外一个查找的类型叫做RHS查询。我打赌你一定能猜到“L”和“R”的涵义,它们分别代表左侧和右侧。什么东西的左侧和右侧?是一个赋值操作的左侧和右侧。

换句话说,当变量出现在赋值操作的左侧时进行LHS查询,出现在右侧时进行RHS查询。讲得更准确一点,RHS查询与简单地查找某个变量的值别无二致,而LHS查询则是试图找到变量的容器本身,从而可以对其赋值。从这个角度来说,RHS并不是真正意义上的“赋值操作的右侧”,更准确的说是“非左侧”。

考虑以下代码:

1 console.log(a); 其中对a 的引用是一个RHS引用,因为这里a并没有赋予任何值。相应地,需要查找并取得a的值,这样才能将值传递给console.log(...)。

相比之下,例如:

1 a=2; 这里对a的引用则是一个LHS引用,因为实际上我们并不关心当前的值是什么,只是想要为=2这个值赋值操作找到一个目标。

1.3作用域嵌套

当一个块或函数嵌套在另一个块或函数中,就发生了作用域的嵌套。因此,在当前作用域中无法找到某个变量时,引擎就会在外层嵌套的作用域中继续查找,直到找到该变量,或抵达最外层的作用域(也就是全局作用域为止)。

考虑以下代码:

1 function foo(a){
2 console.log( a+b );
3 }
4 var b=2;
5 foo( 2 ); //4

对b进行的RHS引用无法在函数foo内部完成,但可以在上一级作用域(在这个例子中就是全局作用域)中完成。

把作用域链比喻成一个建筑:第一层楼代表当前的执行作用域,也就是你所处的位置。建筑的顶层代表全局作用域。LHS和RHS引用都会在当前楼层进行查找,如果没有找到,就会乘坐电梯前往上一层楼,如果还没找到就继续向上,以此类推。一旦抵达顶层(全局作用域),可能找到了你所需的变量,也可能没找到,但无论如何查找过程都将停止。

1.4异常

为什么区分LHS和RHS是一件重要的事情? 因为在变量还没有声明(在任何作用域中都无法找到该变量)的情况下,这两种查询的行为是不一样的。

考虑如下代码:

1 function foo(a){
2 console.log( a+b );
3 b=a;
4 }
5 foo( 2 );

第一次对b进行RHS查询时是无法找到该变量的。也就是说,这是一个“未声明”的变量,因为在任何相关的作用域中都无法找到它。

如果RHS查询在所有嵌套的作用域中遍寻不到所需的变量,引擎就会抛出  ReferenceError异常。相较之下,当引擎执行LHS查询时,如果在顶层(全局作用域)中也无法找到目标变量,全局作用域中就会创建一个具有该名称的变量,并将其返还给引擎,前提是程序运行在非严格模式下。

严格模式下在行为上有很多不同。其中一个行为就是禁止自动或隐式地创建全局变量。因此,在严格模式下LHS查询失败时,并不会创建并返回一个全局变量,引擎会抛出同RHS查询失败时类似的 ReferenceError异常。

小结:作用域是一套规则,用于确定在何处以及如何查找变量(标识符)。如果查找的目的是对变量进行赋值,那么就会使用  LHS查询;如果目的是获取变量的值,就会使用    RHS查询。赋值操作符会导致  LHS查询。=操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。js引擎首先会在代码执行前对其进行编译,在这个过程中,像  var  a=2 ;这样的声明会被分解成两个独立的步骤:

1.首先,var   a  在其作用域中声明新变量。这会在最开始的阶段,也就是代码执行前进行。

2.接下来,a=2   会查询(LHS查询) 变量a并对其进行赋值。

LHS和RHS查询都会在当前执行作用域开始,如果有需要(也就是说它们没有找到所需的标识符),就会向上级作用域继续查找目标标识符,这样每次上升一级作用域(一层楼),最后抵达全局作用域(顶层),无论找到还是没找到都将停止。

不成功的RHS引用会导致抛出   ReferenceError异常,不成功的LHS引用会导致自动隐式地创建一个全局变量(非严格模式下),该变量使用LHS引用的目标作为标识符,或者抛出  ReferenceError 异常(严格模式下)。

以上就是本次的内容,如果觉得这篇博文对你有用或者让你了解了一些新知识那就点波推荐吧。本人爱结交朋友,欢迎大家加我的QQ:825348114,一起进步。

你不知道的javaScript上卷(第一章 作用域是什么)的更多相关文章

  1. 读《你不知道的JavaScript(上卷)》后感-作用域闭包(二)

    github原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们, ...

  2. 读《你不知道的JavaScript(上卷)》后感-浅谈JavaScript作用域(一)

    原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们,也入手看看这 ...

  3. 《你不知道的 JavaScript 上卷》 学习笔记

    第一部分: 作用域和闭包 一.作用域 1. 作用域:存储变量并且查找变量的规则 2. 源代码在执行之前(编译)会经历三个步骤: 分词/此法分析:将代码字符串分解成有意义的代码块(词法单元) 解析/语法 ...

  4. 你不知道的JavaScript上卷笔记

    你不知道的JavaScript上卷笔记 前言 You don't know JavaScript是github上一个系列文章   初看到这一标题的时候,感觉怎么老外也搞标题党,用这种冲突性比较强的题目 ...

  5. 【你不知道的javaScript 上卷 笔记3】javaScript中的声明提升表现

    console.log( a ); var a = 2; 执行输出undefined a = 2; var a; console.log( a ); 执行输出2 说明:javaScript 运行时在编 ...

  6. 你不知道的JavaScript(上)作用域与闭包

    第一部分 作用域与闭包 第一章 作用域是什么 1.作用域 变量赋值操作会执行两个动作:首先编译器会在当前作用域中声明一个变量(如果之前没有声明过), 然后会在运行时引擎会在作用域中查找该变量,找到就会 ...

  7. 你不知道的JavaScript 上卷 2/11

    第一部分——作用域和闭包 第一章 作用域是什么 1.几乎所有编程语言最基本的功能之一,就是能够储存变量当中的值,并且能在之后对这个值进行访问或修改.事实上,正是这种储存和访问变量的值的能力将状态带给了 ...

  8. JavaScript词法作用域—你不知道的JavaScript上卷读书笔记(一)

    前段时间在每天往返的地铁上抽空将 <你不知道的JavaScript(上卷)>读了一遍,这本书很多部分写的很是精妙,对于接触前端时间不太久的人来说,就好像是叩开了JavaScript的另一扇 ...

  9. 《你不知道的JavaScript》第一部分:作用域和闭包

    第1章 作用域是什么 抛出问题:程序中的变量存储在哪里?程序需要时,如何找到它们? 设计 作用域 的目的:为了更好地存储和访问变量. 作用域:根据名称查找变量的一套规则,用于确定在何处以及如何查找变量 ...

随机推荐

  1. js with用法

    有标签的语句 with 语句用于设置代码在特定对象中的作用域. 它的语法: with (expression) statement 例如: var sMessage = "hello&quo ...

  2. ionic3.0--angular4.0 引入第三方插件库的方法

    ionic3.0 引入第三方插件 (swiper),方法很多,现详细说明下官方推荐(typings)做法. 1.全局安装Typings 1. npm install -g typings  2.搜索你 ...

  3. JavaScript系列----一切皆是对象

    1.判断对象类型 1.1.typeof 运算符 首先要认识到,typepof是一个运算符,其运算需要一个参数,返回值是参数的类型. typeof使用方法 typeof parameter //使用方法 ...

  4. 10.javaweb核心标签库详解

    一.JSTL简介及在项目中安装配置 1,  简介 使用JSTL标签的目的就是不希望jsp中出现java逻辑代码 分类 2,  JSTL的安装配置 首先将jar包中的各个标签库配置文件拷贝到项目WEB- ...

  5. PHP--最常用--必背函数总结!php学习者收藏必备!

    一.PHP系统函数 函数 功能 用法 var_dump() 打印变量结构信息,包括类型和值.数组将递归展开值 var_dump ( $arg1...); echo():是语法结构 输出一个或者多个字符 ...

  6. ML技术 - 特征选择

    1. 决策树中的特征选择 分类决策树是一种描述对实例进行分类的树型结构,决策树学习本质上就是从训练数据集中归纳出一组分类规则,而二叉决策树类似于if-else规则.决策树的构建也是非常的简单,首先依据 ...

  7. jQuery+ajax实现局部刷新

    在项目中,经常会用到ajax,比如实现局部刷新,比如需要前后端交互等,这里呢分享局部刷新的两种方法,主要用的是ajax里面的.load(),其他高级方法的使用以后再做详细笔记. 第一种: 当某几个页面 ...

  8. 堆排序HeapSort

    堆排序,顾名思义,是采用数据结构堆来进行排序的一种排序算法. 研究没有规律的堆,没有任何意义.特殊的堆有最大堆(父节点值大于等于左右字节点值),最小堆(父节点值小于等于子节点值).一般采用最大堆来进行 ...

  9. python进阶---Python中的socket编程

    初识socket编程 一.前言 socket基于C\S架构(客户端\服务端)的编程模型,在Python中是以socket模块存在的. Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是 ...

  10. linux expect自动登陆远程服务器 批量管理服务器

    #!/usr/bin/expect set ipaddress [lindex $argv 0] set passwd [lindex $argv 1] set timeout 3 spawn ssh ...