《你不知道的JavaScript》读书总结

第一章 作用域是什么

总结：

作用域是一套规则，用于确定在何处以及如何查找变量(标识符)。
如果查找的目的是对变量进行赋值，那么就会使用 LHS 查询;如果目的是获取变量的值，就会使用 RHS 查询。 赋值操作符会导致 LHS 查询。=操作符或调用函数时传入参数的操作都会导致关联作用域 的赋值操作。

JavaScript引擎首先会在代码执行前对其进行编译，在这个过程中，像var a = 2这样的声 明会被分解成两个独立的步骤:1. 首先，var a 在其作用域中声明新变量。这会在最开始的阶段，也就是代码执行前进行。 2. 接下来，a = 2 会查询(LHS 查询)变量 a 并对其进行赋值。

LHS 和 RHS 查询都会在当前执行作用域中开始，如果有需要(也就是说它们没有找到所 需的标识符)，就会向上级作用域继续查找目标标识符，这样每次上升一级作用域(一层 楼)，最后抵达全局作用域(顶层)，无论找到或没找到都将停止。

不成功的 RHS 引用会导致抛出 ReferenceError 异常。不成功的 LHS 引用会导致自动隐式 地创建一个全局变量(非严格模式下)，该变量使用 LHS 引用的目标作为标识符，或者抛 出 ReferenceError 异常(严格模式下)。

---

2021-06-09更新

---

第二章 词法作用域

词法作用域意味着作用域是由书写代码时函数声明的位置来决定的。编译的词法分析阶段 基本能够知道全部标识符在哪里以及是如何声明的，从而能够预测在执行过程中如何对它 们进行查找。

JavaScript 中有两个机制可以“欺骗”词法作用域:eval(…) 和 with。前者可以对一段包 含一个或多个声明的“代码”字符串进行演算，并借此来修改已经存在的词法作用域(在 运行时)。后者本质上是通过将一个对象的引用当作作用域来处理，将对象的属性当作作 用域中的标识符来处理，从而创建了一个新的词法作用域(同样是在运行时)。

这两个机制的副作用是引擎无法在编译时对作用域查找进行优化，因为引擎只能谨慎地认 为这样的优化是无效的。使用这其中任何一个机制都将导致代码运行变慢。不要使用它们。

---

2021-06-10更新

---

第三章 函数作用域和块作用域

函数是 JavaScript 中最常见的作用域单元。本质上，声明在一个函数内部的变量或函数会
在所处的作用域中“隐藏”起来，这是有意为之的良好软件的设计原则。 但函数不是唯一的作用域单元。块作用域指的是变量和函数不仅可以属于所处的作用域，也可以属于某个代码块(通常指 { … } 内部)。
从 ES3 开始，try/catch 结构在 catch 分句中具有块作用域。

在 ES6 中引入了 let 关键字(var 关键字的表亲)，用来在任意代码块中声明变量。if (…) { let a = 2; } 会声明一个劫持了 if 的 { … } 块的变量，并且将变量添加到这个块 中。

有些人认为块作用域不应该完全作为函数作用域的替代方案。两种功能应该同时存在，开 发者可以并且也应该根据需要选择使用何种作用域，创造可读、可维护的优良代码。

---

2021-06-11更新

---

第四章 提升

我们习惯将var a = 2;看作一个声明，而实际上JavaScript引擎并不这么认为。它将var a
和 a = 2 当作两个单独的声明，第一个是编译阶段的任务，而第二个则是执行阶段的任务。
这意味着无论作用域中的声明出现在什么地方，都将在代码本身被执行前首先进行处理。 可以将这个过程形象地想象成所有的声明(变量和函数)都会被“移动”到各自作用域的 最顶端，这个过程被称为提升。

声明本身会被提升，而包括函数表达式的赋值在内的赋值操作并不会提升。 要注意避免重复声明，特别是当普通的 var 声明和函数声明混合在一起的时候，否则会引
起很多危险的问题!

---

2021-06-15更新

---

第五章 作用域闭包

闭包就好像从 JavaScript 中分离出来的一个充满神秘色彩的未开化世界，只有最勇敢的人 才能够到达那里。但实际上它只是一个标准，显然就是关于如何在函数作为值按需传递的 词法环境中书写代码的。
当函数可以记住并访问所在的词法作用域，即使函数是在当前词法作用域之外执行，这时 就产生了闭包。

如果没能认出闭包，也不了解它的工作原理，在使用它的过程中就很容易犯错，比如在循 环中。但同时闭包也是一个非常强大的工具，可以用多种形式来实现模块等模式。
模块有两个主要特征:(1)为创建内部作用域而调用了一个包装函数;(2)包装函数的返回 值必须至少包括一个对内部函数的引用，这样就会创建涵盖整个包装函数内部作用域的闭 包。
现在我们会发现代码中到处都有闭包存在，并且我们能够识别闭包然后用它来做一些有用 的事!

现代的模块机制

var MyModules = (function Manager() {
	var modules = {};
	function define(name, deps, impl) {
		for (var i=0; i<deps.length; i++) {
	      deps[i] = modules[deps[i]];
	   }
	   modules[name] = impl.apply( impl, deps );
	}
	function get(name) { 
		return modules[name];
	}

	return {
		define: define,
		get: get 
	};
})();

下面展示了如何使用它来定义模块:

MyModules.define( "bar", [], function() { 
	function hello(who) {
		return "Let me introduce: " + who; 
	}
	return {
		hello: hello
	};
 } );

---

2021-06-16更新

---

第二部分 第一张 关于this

1. 为什么要使用this?

function identify() {
	return this.name.toUpperCase();
}
function speak() {
	var greeting = "Hello, I'm " + identify.call( this ); console.log( greeting );
}
var me = {
	name: "Kyle"
};
var you = {
	name: "Reader"	
};
identify.call( me ); // KYLE
identify.call( you ); // READER
speak.call( me ); // Hello, 我是 KYLE speak.call( you ); // Hello, 我是 READER

this 提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将 API 设计
得更加简洁并且易于复用。
随着你的使用模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱，使用 this 则不会这样。当我们介绍对象和原型时，你就会明白函数可以自动引用合适的上下文对象 有多重要。
2. this到底是什么？

function foo() {
 	var a = 2;
	this.bar(); 
 }
function bar() { 
	console.log( this.a );
 }
foo(); // ReferenceError: a is not defined
// 每当你想要把 this 和词法作用域的查找混合使用时，一定要提醒自己，这是无法实现的。

之前我们说过 this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调 用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。
当一个函数被调用时，会创建一个活动记录(有时候也称为执行上下文)。这个记录会包 含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 就是记录的 其中一个属性，会在函数执行的过程中用到。
this 实际上是在函数被调用时发生的绑定，它指向什么完全取决于函数在哪里被调用。

---

2021-06-28更新

---

第二章 this的全面解析

如果要判断一个运行中函数的 this 绑定，就需要找到这个函数的直接调用位置。找到之后
就可以顺序应用下面这四条规则来判断 this 的绑定对象。
new 绑定 1. 由new调用?绑定到新创建的对象。
显式绑定 2. 由call或者apply(或者bind)调用?绑定到指定的对象。
隐式绑定 3. 由上下文对象调用?绑定到那个上下文对象。
默认绑定 4. 默认:在严格模式下绑定到undefined，否则绑定到全局对象。
一定要注意，有些调用可能在无意中使用默认绑定规则。如果想“更安全”地忽略 this 绑 定，你可以使用一个 DMZ 对象，比如 ø = Object.create(null)，以保护全局对象。
ES6 中的箭头函数并不会使用四条标准的绑定规则，而是根据当前的词法作用域来决定 this，具体来说，箭头函数会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。这 其实和 ES6 之前代码中的 self = this 机制一样。

---

2021-07-01更新

---

第三章 对象

JavaScript 中的对象有字面形式(比如 var a = { … })和构造形式(比如 var a = new Array(…))。字面形式更常用，不过有时候构造形式可以提供更多选项。
许多人都以为“JavaScript 中万物都是对象”，这是错误的。对象是 6 个(或者是 7 个，取 决于你的观点)基础类型之一。对象有包括 function 在内的子类型，不同子类型具有不同 的行为，比如内部标签 [object Array] 表示这是对象的子类型数组。
对象就是键 / 值对的集合。可以通过 .propName 或者 [“propName”] 语法来获取属性值。访 问属性时，>引擎实际上会调用内部的默认 [[Get]] 操作(在设置属性值时是 [[Put]])， [[Get]] 操作会检查对象本身是否包含这个属性，如果没找到的话还会查找 [[Prototype]] 链(参见第 5 章)。
属性的特性可以通过属性描述符来控制，比如 writable 和 configurable。此外，可以使用 Object.preventExtensions(…)、Object.seal(…) 和 Object.freeze(…) 来设置对象(及其 属性)的不可变性级别。
属性不一定包含值——它们可能是具备 getter/setter 的“访问描述符”。此外，属性可以是 可枚举或者不可枚举的，这决定了它们是否会出现在 for…in 循环中。
你可以使用 ES6 的 for…of 语法来遍历数据结构(数组、对象，等等)中的值，for…of 会寻找内置或者自定义的 @@iterator 对象并调用它的 next() 方法来遍历数据值。

---

2021-07-07更新

---