关于javascript中作用域的碎碎念

作用域是什么

几乎所有编程语言最基本的功能之一，就是能够储存变量当中的值，并且能在之后对这个 值进行访问或修改。事实上，正是这种储存和访问变量的值的能力将状态带给了程序。
接下来我们介绍两个概念：LHS 查询和 RHS 查询
我打赌你一定能猜到“L”和“R”的含义，它们分别代表左侧和右侧。
什么东西的左侧和右侧? 是一个赋值操作的左侧和右侧。
换句话说，当变量出现在赋值操作的左侧时进行 LHS 查询，出现在右侧时进行 RHS 查询。

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

你可以将 RHS 理解成 retrieve his source value(取到它的源值)，这意味着“得到某某的 值”。
让我们继续深入研究。
请看以下代码:
console.log(a);

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

相比之下，例如:

a = 2;

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

LHS 和 RHS 的含义是“赋值操作的左侧或右侧”并不一定意味着就是“= 赋值操作符的左侧或右侧”。赋值操作还有其他几种形式，因此在概念上最 好将其理解为“赋值操作的目标是谁(LHS)”以及“谁是赋值操作的源头(RHS)”。

作用域是一套规则，用于确定在何处以及如何查找变量(标识符)。如果查找的目的是对变量进行赋值，那么就会使用 LHS 查询; 如果目的是获取变量的值，就会使用 RHS 查询。

赋值操作符会导致 LHS 查询。= 操作符或调用函数时传入参数的操作都会导致关联作用域 的赋值操作。

JavaScript 引擎首先会在代码执行前对其进行编译，在这个过程中，像 var a = 2 这样的声 明会被分解成两个独立的步骤:

1. 首先，var a 在其作用域中声明新变量。这会在最开始的阶段，也就是代码执行前进行。
2. 接下来，a = 2 会查询 (LHS 查询) 变量 a 并对其进行赋值。

无论函数在哪里被调用，也无论它如何被调用，它的词法作用域都只由函数被声明时所处 的位置决定。

如果词法作用域完全由写代码期间函数所声明的位置来定义，怎样才能在运行时来“修改”(也可以说欺骗)词法作用域呢?

JavaScript 中有两种机制来实现这个目的。

eval 和 with

JavaScript 中的 eval(..) 函数可以接受一个字符串为参数，并将其中的内容视为好像在书 写时就存在于程序中这个位置的代码。换句话说，可以在你写的代码中用程序生成代码并 运行，就好像代码是写在那个位置的一样。

在执行 eval(..) 之后的代码时，引擎并不“知道”或“在意”前面的代码是以动态形式插 入进来，并对词法作用域的环境进行修改的。引擎只会如往常地进行词法作用域查找。

eval(..) 调用中的 “var b = 3;” 这段代码会被当作本来就在那里一样来处理。由于那段代 码声明了一个新的变量 b，因此它对已经存在的 foo(..) 的词法作用域进行了修改。事实 上，和前面提到的原理一样，这段代码实际上在 foo(..) 内部创建了一个变量 b，并遮蔽 了外部 (全局) 作用域中的同名变量。

当 console.log(..) 被执行时，会在 foo(..) 的内部同时找到 a 和 b，但是永远也无法找到 外部的 b。因此会输出“1, 3”而不是正常情况下会输出的“1, 2”。

JavaScript 中 还 有 其 他 一 些 功 能 效 果 和 eval(..)很 相 似。setTimeout(..)和 setInterval(..) 的第一个参数可以是字符串，字符串的内容可以被解释为一段动态生成的 函数代码。这些功能已经过时且并不被提倡。不要使用它们!

在程序中动态生成代码的使用场景非常罕见，因为它所带来的好处无法抵消性能上的损 失。

小结

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

JavaScript 中有两个机制可以“欺骗”词法作用域:eval(..) 和 with。前者可以对一段包 含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域(在 运行时)。后者本质上是通过将一个对象的引用当作作用域来处理，将对象的属性当作作 用域中的标识符来处理，从而创建了一个新的词法作用域(同样是在运行时)。

这两个机制的副作用是引擎无法在编译时对作用域查找进行优化，因为引擎只能谨慎地认 为这样的优化是无效的。使用这其中任何一个机制都将导致代码运行变慢。不要使用它们。

函数作用域

var a = 2;
function foo() { // <-- 添加这一行
var a = 3; console.log(a); // 3
} // <-- 以及这一行 foo(); // <-- 以及这一行
     console.log(a); // 2

虽然这种技术可以解决一些问题，但是它并不理想，因为会导致一些额外的问题。首先，必须声明一个具名函数 foo()，意味着 foo 这个名称本身“污染”了所在作用域 (在这个 例子中是全局作用域)。其次，必须显式地通过函数名(foo()) 调用这个函数才能运行其 中的代码。

var a = 2;
(function foo(){ // <-- 添加这一行 var a = 3;

console.log(a); })(); // <-- 以及这一行  3
console.log(a); // 2

区分函数声明和表达式最简单的方法是看 function 关键字出现在声明中的位 置(不仅仅是一行代码，而是整个声明中的位置)。如果 function 是声明中 的第一个词，那么就是一个函数声明，否则就是一个函数表达式。

函数声明和函数表达式之间最重要的区别是它们的名称标识符将会绑定在何处。

(function foo(){..})作为函数表达式意味着 foo 只能在.. 所代表的位置中 被访问，外部作用域则不行。foo 变量名被隐藏在自身中意味着不会非必要地污染外部作 用域。

var a = 2;

(function foo() { var a = 3;

 console.log(a); // 3
      })(); 

 console.log(a); // 2

由于函数被包含在一对 () 括号内部，因此成为了一个表达式，通过在末尾加上另外一个 () 可以立即执行这个函数，比如 (function foo(){..})()。第一个 () 将函数变成表 达式，第二个 () 执行了这个函数。

社区给它规定了一个术语:IIFE，代表立即执行函数表达式

相较于传统的 IIFE 形式，很多人都更喜欢另一个改进的形式:(function(){..}())。仔 细观察其中的区别。第一种形式中函数表达式被包含在 () 中，然后在后面用另一个 () 括 号来调用。第二种形式中用来调用的 () 括号被移进了用来包装的 () 括号中。

这两种形式在功能上是一致的。选择哪个全凭个人喜好。

好啦，今天就碎碎念到这里啦，端午安康啊 everybody～