第一章：作用域是什么
程序中变量存储在哪里，需要是怎么找到它，这就需要设计一套存储以及能方便的找到它的规则，这个规则就是作用域
编译原理
JavaScript 是一门编译语言，它与传统编译语言不同，但编译步骤又非常相似；它不是提前编译的，编译结果也不能在分布式系统中进行移植。
传统编译步骤
分词 / 词法分析
将由字符组成的字符串分解成有意义的代码，例如：var a = 2;通常会被分解为var、a、=、;这些词法单元，判断a是独立的词法单元还是其他词法单元一部分时，如果调用的是有状态的解析规则那这个过程就是词法分析。
解析 / 语法分析
将词法单元流（数组）转换成一个由元素逐级嵌套所组成的代表程序语法结构的树，叫做“抽象语法树”（Abstract Syntax Tree，AST）
代码生成
将 AST 转换为可执行代码的过程被称为代码生成。简单说就是：将var a = 2;的 AST 转化为一组机器指令，用来创建一个a的变量（包括分配内存），并将一个值存储在a中。
理解作用域
var a = 2;在 JavaScript 引擎看来是两个完全不同的声明。
- 遇到
var a首先编译器会向作用域询问是否有a变量存在这一作用域，如果有就忽略，没有就创建a。 - 接下来处理
a = 2这个赋值操作，先向当前作用域询问是否有这个变量，如果有就使用这个变量，并赋值；如果没有，继续找。
LHS查询 RHS查询
LHS 赋值操作的目标是谁；RHS 谁是赋值操作的源头（我要查找×××，并把它给我）；简单说如果查找的目的是对变量进行赋值，会使用 LHS 查询，如果查找的目的是为了获取变量值，会使用 RHS 查询。
var a = foo(a){...} 这里的声明，a = ...并不会做 LHS 查询。
function foo(a){
var b = a;
return a + b;
}
var c = foo(2)
LHS
c = ...
a = 2(隐示变量分配)
b = ...
RHS
foo(...)
= a
a ...
... b
第二章：词法作用域
词法作用域是在写代码时，将变量和块级作用域写在哪里来决定的
词法阶段
function foo(a){
var b = a * 2;
function bar(c){
console.log(a,b,c); //2,4,12
}
bar( b * 3);
}
foo(2);
- 全局作用域下包含
foo -
foo作用域下包含a、b、bar -
bar作用域下包含c
对b、c的 RHS 查询是在上一级作用域中完成的
欺骗词法
eval()接受一个字符串作为参数，把它当做代码来执行，在哪个作用域下调用它，它的作用域就在哪边
function foo(str,a){
eval(str);
console.log(a,b); //2,3
}
var b = 2;
foo('var b = 3;',2)
with可以简化单调重复的赋值操作
如
var obj ={
a = 1,
b = 2,
c = 3
};
//单调重复的赋值
obj.a = 4;
obj.b = 5;
obj.c = 6;
//用with简化
with(obj){
a = 7;
b = 8;
c = 9;
}
function foo(obj){
with(obj){ //相当于 obj.a = 2，区别 with 创建了全局变量 a
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
eval()、with实际工作中不推荐使用，会影响性能。
第三章：函数作用域和块作用域
函数中的作用域
函数内部可以访问函数外部的变量，函数外部不可以访问函数内部变量
函数作用域
函数的名称也会污染全局作用域，可以用匿名函数+立即执行函数来实现
立即执行函数
有一个bug，上一行表达式必须要分号结尾，省略会报错
var a = 2;
(function(global){
var a = 3;
console.log(a); //3
console.log(global.a) //2
})(window)
var a = 2;
(function(){
var a = 3;
console.log(a); //3
}())
作用域闭包
1. 在自己定义的作用域以外的地方执行
2. 使用回调函数也是闭包
function foo(){
var a = 2
function bar(){
console.log(a)
}
return bar
}
var baz = foo()
baz() //2 这里就用了闭包
bar是在foo里面定义的，所以它是在foo作用域下，但调用它的地方是在foo作用域外，就这构成了闭包。
在来看一个
function foo(){
var a = 2
function bar(){
console.log(a)
}
baz(bar)
}
function baz(fn){
fn() //2，在这里执行了bar，这里构成了闭包
}
foo()
还有
var fn
function foo(){
var a =2
function bar(){
console.log(a)
}
fn = baz
}
function baz(){
fn()
}
foo()
baz() //2，构成了闭包，这里执行了 bar，构成了闭包。
在循环中使用闭包
闭包是函数和声明该函数的词法环境的组合。
回到我们上面说的：在自己定义的作用域以外的地方执行，这里声明的i是全局变量，使用全局变量不构成闭包。
for(var i = 1; i <= 3; i++){
setTimeout(function(){
console.log(i) //打印出 3 个 4，这里没有闭包
},1000)
}
如果要写成闭包的样子，必须要在外面用函数包裹一层，并调用它，才能形成闭包
function xxx(){
for(var i = 1; i <= 3; i++){
setTimeout(function(){
console.log(i) //打印出 3 个 4，这是一个闭包没有立即执行
},1000)
}
}
xxx()
优化1：这里setTimeout里面的i和立即执行函数的形参构成闭包，阻隔了与for循环的i形成闭包。
function xxx(){
for(var i = 1; i <= 3; i++){
(function(i){ //这个形参 i 和外面的 i 不是同一个变量
setTimeout(function(){
console.log(i) //1,2,3，用立即执行函数，
},1000)
})(i)
}
}
xxx()
优化2：用let声明
function xxx(){
for(let i = 1; i <= 3; i++){
setTimeout(function(){
console.log(i) //1,2,3，用 let 声明变量，在循环的过程中不止一次的声明
},1000)
}
}
xxx()
模块中闭包
模块中闭包需要具备两个条件：
- 必须有外部的封闭函数，该函数至少被调用一次
- 封闭函数至少返回一个内部函数（可以用 return 或 window）
例：
var foo = function(){
function a(){
console.log(1)
}
function b(){
console.log(2)
}
return {
a:a,
b:b
}
}
var c = foo()
c.a() //1
网友评论