JS读书笔记摘抄

阅读《你不知道的js》书笔记摘抄

作用域的理解

牵涉的角色

  • 引擎:从头到尾负责整个 JavaScript 程序的编译及执行过程。
  • 编译器: 负责语法分析及代码生成等脏活累活
  • 作用域: 负责收集并维护由所有声明的标识符(变量) 组成的一系列查
    询, 并实施一套非常严格的规则, 确定当前执行的代码对这些标识符的访问权

对于var a =2 的理解

1. 遇到 var a,编译器会询问作用域是否已经有一个该名称的变量存在于同一个作用域的
集合中。如果是,编译器会忽略该声明,继续进行编译;否则它会要求作用域在当前作用域的集合中声明一个新的变量,并命名为 a2. 接下来编译器会为引擎生成运行时所需的代码,这些代码被用来处理 a = 2 这个赋值
操作。引擎运行时会首先询问作用域,在当前的作用域集合中是否存在一个叫作 a 的变量。如果是,引擎就会使用这个变量;如果否,引擎会继续查找该变量(查看 1.3
节)。

总结:变量的赋值操作会执行两个动作,首先编译器会在当前作用域中声明一个变量(如果之前没有声明过),然后在运行时引擎会在作用域中查找该变量,如果能够找到就会对它赋值。总之无论是编译器还是引擎都需要询问作用域是否存在该声明变量

引擎在作用域中的查找流程

在上面第二步中的引擎查找声明变量会牵涉到LHS 和 RHS两个查询方式:
- RHS:通俗理解获得某某的值
- LHS:试图找到存放变量的容器本身

LHS 与 RHS的查询引发的异常种类
function foo(a) {
    console.log( a + b );
    b = a;
}
foo( 2 );

RHS:
    第一次对 b 进行 RHS 查询时是无法找到该变量的。如果 RHS 查询在所有嵌套的作用域中遍寻不到所需的变量,引擎就会抛出 ReferenceError
异常。

    如果 RHS 查询找到了一个变量,但是你尝试对这个变量的值进行不合理的操作,比如试图对一个非函数类型的值进行函数调用,或着引用 nullundefined 类型的值中的
属性,那么引擎会抛出另外一种类型的异常,叫作 TypeError。

LHS:
引擎执行 LHS 查询时,如果在顶层(全局作用域)中也无法找到目标变量,
全局作用域中就会创建一个具有该名称的变量,并将其返还给引擎,前提是程序运行在非
“严格模式”下。因此,在严格模式中 LHS 查询失败时,并不会创建并返回一个全局变量,引擎会抛出同 RHS 查询失败时类似的 ReferenceError 异常。

当进行变量的查找时(无论是RHS还是LHSS),就会向上级作用域继续查找目标标识符,这样每次上升一级作用域(一层楼),最后抵达全局作用域(顶层),无论找到或没找到都将停止。

词法作用域

词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段基本能够知道全部标识符在哪里以及是如何声明的,从而能够预测在执行过程中如何对它们进行查找。

当由于嵌套词法作用域导致全局变量被隐藏的时候,可以采用window.变量名来访问隐藏的全局变量

欺骗词法作用域的方法
- eval():通常被用来执行动态创建的代码,把参数代码伪装成原来就是写在eval()函数出现的位置
- with():一般用于访问同一个对象的多个属性的快速访问

function foo(obj) {
    with (obj) {
    a = 2;
}
}
var o1 = {
    a: 3
};
var o2 = {
    b: 3
};
foo( o1 );
console.log( o1.a ); // 2
foo( o2 );
console.log( o2.a ); // undefined
console.log( a ); // 2——不好,a 被泄漏到全局作用域上了!

至于为什么会泄漏到全局域上,书上这样解释的:with 声明实际上是根据你传递给它的对象凭空创建了一个全新的词法作用域但当我们将 o2 作为作用域时,其中并没有 a 标识符,因此进行了正常的 LHS 标识符查找(查看第 1 章)。找不到就会LHS在全局作用域上自己私自建了一个变量

函数作用域

在任意代码片段外部添加包装函数,可以将内部的变量和函数定义“隐
藏”起来,外部作用域无法访问包装函数内部的任何内容,更进一步,如果不希望污染作用域可以用IIFE来实现

(function foo(){ // 
    ....//业务逻辑
})();

原生JS没有块作用域
从 ES3 开始,try/catch 结构在 catch 分句中具有块作用域。

在 ES6 中引入了 let 关键字(var 关键字的表亲),用来在任意代码块中声明变量。但是let声明没有变量提升的作用。if
(..) { let a = 2; } 会声明一个劫持了 if 的 { .. } 块的变量,并且将变量添加到这个块中。

const也是es6支持的局部作用域关键字,但是一般用于修饰常量,不能被修改!!

变量提升

先有声明 ,才有赋值

函数声明和变量声明都会被提升。但是一个值得注意的细节(这个细节可以出现在有多个
“重复”声明的代码中)是函数会首先被提升,然后才是变量。(函数表达式不会被提升)

var a;
a = 2;
console.log( a ); 

输出2

console.log( a );
var a = 2;
 输出 undefined

猜你喜欢

转载自blog.csdn.net/whp404/article/details/81939697
今日推荐