你不知道的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 引擎看来是两个完全不同的声明。

遇到var a首先编译器会向作用域询问是否有a变量存在这一作用域&＃xff0c;如果有就忽略&＃xff0c;没有就创建a。
接下来处理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);

全局作用域下包含foo
foo作用域下包含a、b、bar
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;构成了闭包。