近几天看了一本不错的 JavaScript 的书,是 Kyle Simpson 写的 <You Don't know JS>。这本书是 Kyle Simpson 在 Github 上的开源项目,截止到现在已经有 27,796 个 star 。本想看英文版本,不料在某东上看到了中文版,于是乎就买下了。结果,翻译得还不错,推荐。
原著github地址 ,某东链接自行搜索呵呵。
这本书属于JavaScript开发者的进阶读物,原著至今为止已经出了6本,中文版(上卷)涵盖了其中的两本,介绍了4个知识点,分别为作用域、闭包、this
和原型继承。
看完了作用域和闭包部分,以前对这块有很多不大理解的地方,我觉得现在清晰了很多。虽然有很多概念先前已经有所耳闻,比如说作用域、变量提升等,但始终停留在知其然而不知所以然的程度。但此书用简单的例子从相对比较底层的角度解释这些概念,着实为我打开了新世界的大门,总之是相见恨晚!
以下是我认为受益良多的部分:
1. 编译器、引擎和作用域的关系
我没有软件工程专业学位,在读这本书之前,我并不知道编译器、引擎是什么。当然,这本书也不是一本介绍编译器和引擎的书,但是至少到现在我知道了它们在大概是做什么的,以及在运行你写的代码的时候它们扮演了什么角色。
简单来说,编译器会事先拿到你的代码,然后把它们拆开,然后重组成特定的结构,再转换成计算机能够读懂的形式交给引擎,然后引擎会运行这些机器指令。由于JavaScript是一门 动态的、解释执行 的语言,编译发生在代码块执行前的极短时间内,这个过程可能会和传统语言有所出入,但是大同小异。
而作用域和编译器与引擎有什么关系?关系很大。 因为引擎执行一段代码之前,需要知道变量相关的情况。因为引擎需要弄清楚变量属于哪个作用域,这样引擎才能够对变量进行赋值等操作。
另外:变量查询分为两种:LHS查询 和 RHS查询 (分别代表Left和Right)。什么是LHS和RHS?如果查找的目的是对变量进行赋值,就会用到LHS;如果目的是获取变量的值,就是RHS。
2. 词法作用域和欺骗词法
好的,假设你已经在别的地方获知了作用域这个概念。那 词法作用域 是啥?
原来作用域分为 词法作用域 和 动态作用域。
词法作用域 就是在书写的时候就确定了的,而 动态作用域 是在函数被调用的时候确认的。观察一下的例子:
```
function foo() {
console.log(a);
}
function bar() {
var a = 3;
foo();
}
var a = 2;
bar();
```
-
如果是词法作用域,结果会是
2
。
由于词法作用域是书写时确定的,那么作用域就会根据 书写的位置 确定。在这个例子中,console.log()
查询a
变量的时候,在 foo() 作用域内部查找不到a
标识符,就会向外部的作用域查询,也就是window.a
啦。 -
如果是动态作用域的话,结果会是
3
。
动态作用域不关心函数是在何处声明的,只关心它是在何处被调用的。这个例子中,console.log()
查询a
变量的时候,同样在foo()
作用域内部查找不到a
标识符。但是它会根据foo()
被 调用的位置 来查找外部作用域,也就是bar()
啦。所以这里会输出3。
总之,一句话: 词法作用域只关心函数是在何处声明的,而动态作用域只关心函数是在哪里被调用的。JavaScript并没有动态作用域,但是可以用 this
、.apply()
、.call()
机制来实现动态作用域的效果。
3. 块级作用域
传统编程语言会有块作用域的概念,通常由大括号 {}
包住的诸如for
和 if
这些都会创建块作用域。
JavaScript并不是这样的。
来,我们回顾一下这个经典的案例:
for (var i = 0; i < 10; i++) {
console.log(i);
}
因为JavaScript没有块作用域,这时候 i
会污染全局作用域。所以通常建议这样写:
var i;
for (i = 0; i < 10; i++) {
console.log(i);
}
起码这样视觉上更加突出 i
污染了全局作用域的事实(笑)。那是不是说明JavaScript并没有快作用域?不是的。
实际上,with 和 try...catch 的 catch 分句会创建一个块作用域。
除此之外,ES6的 let
关键字会把变量锁定在块里面(真是不错啊)。另外一点需要注意的是使用 let
声明的变量并不会被提升。
4. 变量提升与函数提升
还是书中的例子:
console.log(a);
var a = 2;
请问结果是什么?答案是 undefined。前几天我刚在别的地方看到过这个问题,现在我懂了。
根据上述编译的原理。JavaScript会把代码中的声明都找出来,以把它们归为相应的作用域。所以说,这些声明是会在执行其他代码之前处理过的。
实际上,变量包括函数声明都会被提升到 相应作用域 之前运行。在以上例子中,实际上执行起来的顺序看起来是这样的:
var a;
console.log(a);
a = 2;
所以,结果是 undefined。
另外,我有一点猜测,没有证实过不知道对不对。LHS查询失败都会报ReferenceError,RHS查询不到值都会输出undefined。
5. 闭包
闭包是什么? 以下这句话能够很好的阐释闭包:
当函数可以记住并访问所在的词法作用域,即使函数是当前词法作用域之外执行,这时就产生了闭包。
可见,同时满足以下条件的实体才能够形成闭包:
1. 引用了外部作用域的变量(数据)
2. 在定义词法作用域以外被调用
(未完)