<你不知道的JavaScript>读书笔记

近几天看了一本不错的 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. 在定义词法作用域以外被调用

（未完)

posted @ 2016-03-15 15:08 ZioLau 阅读(448) 评论(0) 编辑收藏举报

刷新页面返回顶部