你不知道的JavaScript笔记——作用域和闭包

第一章&＃xff1a;作用域是什么

程序中变量存储在哪里&＃xff0c;需要是怎么找到它&＃xff0c;这就需要设计一套存储以及能方便的找到它的规则&＃xff0c;这个规则就是作用域

编译原理

Javascript 是一门编译语言&＃xff0c;它与传统编译语言不同&＃xff0c;但编译步骤又非常相似&＃xff1b;它不是提前编译的&＃xff0c;编译结果也不能在分布式系统中进行移植。

传统编译步骤

分词 / 词法分析 将由字符组成的字符串分解成有意义的代码&＃xff0c;例如&＃xff1a;var a &＃61; 2;通常会被分解为var、a、&＃61;、;这些词法单元&＃xff0c;判断a是独立的词法单元还是其他词法单元一部分时&＃xff0c;如果调用的是有状态的解析规则那这个过程就是词法分析。

解析 / 语法分析 将词法单元流&＃xff08;数组&＃xff09;转换成一个由元素逐级嵌套所组成的代表程序语法结构的树&＃xff0c;叫做“抽象语法树”&＃xff08;Abstract Syntax Tree&＃xff0c;AST&＃xff09;

代码生成 将 AST 转换为可执行代码的过程被称为代码生成。简单说就是&＃xff1a;将var a &＃61; 2;的 AST 转化为一组机器指令&＃xff0c;用来创建一个a的变量&＃xff08;包括分配内存&＃xff09;&＃xff0c;并将一个值存储在a中。

理解作用域

var a &＃61; 2;在 Javascript 引擎看来是两个完全不同的声明。

1. 遇到var a首先编译器会向作用域询问是否有a变量存在这一作用域&＃xff0c;如果有就忽略&＃xff0c;没有就创建a。
2. 接下来处理a &＃61; 2这个赋值操作&＃xff0c;先向当前作用域询问是否有这个变量&＃xff0c;如果有就使用这个变量&＃xff0c;并赋值&＃xff1b;如果没有&＃xff0c;继续找。

LHS查询 RHS查询 LHS 赋值操作的目标是谁&＃xff1b;RHS 谁是赋值操作的源头&＃xff08;我要查找×××&＃xff0c;并把它给我&＃xff09;&＃xff1b;简单说如果查找的目的是对变量进行赋值&＃xff0c;会使用 LHS 查询&＃xff0c;如果查找的目的是为了获取变量值&＃xff0c;会使用 RHS 查询。 var a &＃61; foo(a){...} 这里的声明&＃xff0c;a &＃61; ...并不会做 LHS 查询。

function foo(a){var b &＃61; a;return a &＃43; b;
}
var c &＃61; foo(2)


LHS
c &＃61; ...
a &＃61; 2(隐示变量分配)
b &＃61; ...RHS
foo(...)
&＃61; a
a ...
... b


第二章&＃xff1a;词法作用域

词法作用域是在写代码时&＃xff0c;将变量和块级作用域写在哪里来决定的

词法阶段

function foo(a){var b &＃61; a * 2;function bar(c){console.log(a,b,c); //2,4,12}bar( b * 3);
}
foo(2);


1. 全局作用域下包含foo
2. foo作用域下包含a、b、bar
3. bar作用域下包含c 对b、c的 RHS 查询是在上一级作用域中完成的

欺骗词法

eval()接受一个字符串作为参数&＃xff0c;把它当做代码来执行&＃xff0c;在哪个作用域下调用它&＃xff0c;它的作用域就在哪边

function foo(str,a){eval(str);console.log(a,b); //2,3
}
var b &＃61; 2;
foo(&＃39;var b &＃61; 3;&＃39;,2)


with可以简化单调重复的赋值操作 如

var obj &＃61;{a &＃61; 1,b &＃61; 2,c &＃61; 3
};
//单调重复的赋值
obj.a &＃61; 4;
obj.b &＃61; 5;
obj.c &＃61; 6;
//用with简化
with(obj){a &＃61; 7;b &＃61; 8;c &＃61; 9;
}


function foo(obj){with(obj){ //相当于 obj.a &＃61; 2&＃xff0c;区别 with 创建了全局变量 aa &＃61; 2;}
}
var o1 &＃61; {a:3;
}
var o2 &＃61;{b:3;
}
foo(o1)
console.log(o1.a) //2
foo(o2)
console.log(o2.a) //undefined
console.log(a) //2


eval()、with实际工作中不推荐使用&＃xff0c;会影响性能。

第三章&＃xff1a;函数作用域和块作用域

函数中的作用域

函数内部可以访问函数外部的变量&＃xff0c;函数外部不可以访问函数内部变量

函数作用域

函数的名称也会污染全局作用域&＃xff0c;可以用匿名函数&＃43;立即执行函数来实现

立即执行函数

有一个bug&＃xff0c;上一行表达式必须要分号结尾&＃xff0c;省略会报错

var a &＃61; 2;
(function(global){var a &＃61; 3;console.log(a); //3console.log(global.a) //2
})(window)


var a &＃61; 2;
(function(){var a &＃61; 3;console.log(a); //3
}())


作用域闭包

在自己定义的作用域以外的地方执行&＃xff1b;使用回调函数也是闭包

function foo(){var a &＃61; 2function bar(){console.log(a)}return bar
}
var baz &＃61; foo()
baz() //2 这里就用了闭包


bar是在foo里面定义的&＃xff0c;所以它是在foo作用域下&＃xff0c;但调用它的地方是在foo作用域外&＃xff0c;就这构成了闭包。 在来看一个

function foo(){var a &＃61; 2function bar(){console.log(a)}baz(bar)
}
function baz(fn){fn() //2&＃xff0c;在这里执行了bar&＃xff0c;这里构成了闭包
}
foo()


还有

var fn
function foo(){var a &＃61;2function bar(){console.log(a)}fn &＃61; baz
}
function baz(){fn()
}
foo()
baz() //2&＃xff0c;构成了闭包&＃xff0c;这里执行了 bar&＃xff0c;构成了闭包。


在循环中使用闭包

for(var i &＃61; 1; i <&＃61; 3; i&＃43;&＃43;){setTimeout(function(){console.log(i) //打印出 3 个 4&＃xff0c;这是一个闭包没有立即执行},1000)
}


优化1

for(var i &＃61; 1; i <&＃61; 3; i&＃43;&＃43;){setTimeout((function(){console.log(i) //1,2,3&＃xff0c;用立即执行函数&＃xff0c;})(i),1000)
}


优化2

for(let i &＃61; 1; i <&＃61; 3; i&＃43;&＃43;){setTimeout(function(){console.log(i) //1,2,3&＃xff0c;用 let 声明变量&＃xff0c;在循环的过程中不止一次的声明},1000)
}


模块中闭包 模块中闭包需要具备两个条件&＃xff1a;

1. 必须有外部的封闭函数&＃xff0c;该函数至少被调用一次
2. 封闭函数至少返回一个内部函数&＃xff08;可以用 return 或 window&＃xff09; 例&＃xff1a;

var foo &＃61; function(){function a(){console.log(1)}function b(){console.log(2)}return {a:a,b:b}
}
var c &＃61; foo()
c.a() //1