From c2f9247e4ae5f72deff7217ac317c20066c6943a Mon Sep 17 00:00:00 2001
From: qianguyihao <qianguyihao@gmail.com>
Date: Wed, 4 Dec 2019 22:54:48 +0800
Subject: [PATCH] =?UTF-8?q?add:=20JS=E9=A2=84=E7=BC=96=E8=AF=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 04-JavaScript基础/01-JS简介.md                |   4 +-
 04-JavaScript基础/02-变量.md                  | 142 +++++++++---------
 ...�类型转换.md => 03-typeof和变量的强制类型转换.md} |  28 +++-
 04-JavaScript基础/04-运算符.md                |  17 ++-
 04-JavaScript基础/10-作用域.md                |   4 +-
 .../10.2-预编译及变量提升详解.md              |  80 ++++++++++
 18-推荐链接/02-GitHub项目推荐.md              |   2 +
 7 files changed, 196 insertions(+), 81 deletions(-)
 rename 04-JavaScript基础/{03-变量的强制类型转换.md => 03-typeof和变量的强制类型转换.md} (90%)
 create mode 100644 04-JavaScript基础/10.2-预编译及变量提升详解.md
diff --git a/04-JavaScript基础/01-JS简介.md b/04-JavaScript基础/01-JS简介.md
index 3f8546b..e1214e7 100644
--- a/04-JavaScript基础/01-JS简介.md
+++ b/04-JavaScript基础/01-JS简介.md
@@ -177,7 +177,7 @@ ECMAScript在2015年6月，发布了ECMAScript 6版本（ES6），语言的能
 
 > 也可以理解成：引入 js 代码，有哪几种方式。
 
-方式1、内嵌的方式：
+**方式1**、内嵌的方式：
 
 页面中，我们可以在`<body>`标签里放入`<script type=”text/javascript”></script>`标签对儿，并在`<script>`里书写JavaScript程序：
 
@@ -201,7 +201,7 @@ text表示纯文本，因为JavaScript也是一个纯文本的语言。
 
 PS：在Sublime Text里，输入`<sc`后，按tab键，可以自动补齐。
 
-方式2、引入外部的 JS 文件：
+**方式2**、引入外部的 JS 文件：
 
 ```html
 <!DOCTYPE html>
diff --git a/04-JavaScript基础/02-变量.md b/04-JavaScript基础/02-变量.md
index 861d613..19959b6 100644
--- a/04-JavaScript基础/02-变量.md
+++ b/04-JavaScript基础/02-变量.md
@@ -33,12 +33,17 @@
 
 ### 变量的定义和赋值
 
-在js中使用`var`关键字来声明一个变量。
+- 在ES6之前，统一使用`var`关键字来声明一个变量。
+
+- 在ES6及之后，统一使用 `const`、`let`关键字来声明一个变量。
 
 变量举例如下：
 
 ```javascript
-	var a = 100;
+	var a = 100; // ES5语法
+
+	const b = hello; // ES6 语法
+	let b = world; // ES6 语法
 ```
 
 如下图所示：
@@ -147,7 +152,6 @@ implements、import、int、interface、long、native、package、private、prot
 
 **在JS中一共有六种数据类型**：
 
-
 - **基本数据类型（值类型）**：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
 
 - **引用数据类型（引用类型）**：Object 对象。
@@ -347,9 +351,9 @@ Undefined和任何数值计算的结果为NaN。NaN 与任何值都不相等，
 键盘上的`+`可能是连字符，也可能是数字的加号。如下：
 
 ```
-	console.log("我" + "爱" + "你");	//连字符，把三个独立的汉字，连接在一起了
-	console.log("我+爱+你");			//原样输出
-	console.log(1+2+3);				//输出6
+console.log("我" + "爱" + "你");	//连字符，把三个独立的汉字，连接在一起了
+console.log("我+爱+你");			//原样输出
+console.log(1+2+3);				//输出6
 ```
 
 输出：
@@ -365,30 +369,30 @@ Undefined和任何数值计算的结果为NaN。NaN 与任何值都不相等，
 举例1：
 
 ```javascript
-	var a = "1";
-	var b = 2;
-	console.log(a + b);
+var a = "1";
+var b = 2;
+console.log(a + b);
 ```
 
 控制台输出：
 
 ```
-	12
+12
 ```
 
 举例2：
 
 ```
-	var a = 1;
-	var b = 2;
-	console.log("a" + b);	//"a"就不是变量了！所以就是"a"+2 输出a2
+var a = 1;
+var b = 2;
+console.log("a" + b);	//"a"就不是变量了！所以就是"a"+2 输出a2
 
 ```
 
 控制台输出：
 
 ```
-	a2
+a2
 ```
 
 于是我们明白了，在变量中加入字符串进行拼接，可以被同化为字符串。【重要】
@@ -401,14 +405,14 @@ Undefined和任何数值计算的结果为NaN。NaN 与任何值都不相等，
 也就是说，`-`、`*`、`/`、`%``这几个符号会自动进行隐式转换。例如：
 
 ```javascript
-	var a = "4" + 3 - 6;
-	console.log(a);
+var a = "4" + 3 - 6;
+console.log(a);
 ```
 
 输出结果：
 
 ```javascript
-	37
+37
 ```
 
 虽然程序可以对`-`、`*`、`/`、`%``这几个符号自动进行“隐式转换”；但作为程序员，我们最好自己完成转换，方便程序的可读性。
@@ -423,14 +427,14 @@ true 和 false。主要用来做逻辑判断。
 代码：
 
 ```javascript
-	var a = true;
-	console.log(typeof a);
+var a = true;
+console.log(typeof a);
 ```
 
 控制台输出结果：
 
 ```
-	boolean
+boolean
 ```
 
 
@@ -467,7 +471,7 @@ null和undefined有最大的相似性。看看null == undefined的结果(true)
 语句：
 
 ```
-	a = b;
+a = b;
 ```
 
 把b的值赋给a，b不变。
@@ -479,101 +483,101 @@ null和undefined有最大的相似性。看看null == undefined的结果(true)
 举例1：
 
 ```
-						 	//a		b       c
-	var a = 1;              //1
-	var b = 2;              //1     2
-	var c = 3;              //1     2       3
-	a = b + c;              //5     2       3
-	b = c - a;              //5     -2      3
-	c = a * b;              //5     -2      -10
-	console.log(a);
-	console.log(b);
-	console.log(c);
+					 	//a		b       c
+var a = 1;              //1
+var b = 2;              //1     2
+var c = 3;              //1     2       3
+a = b + c;              //5     2       3
+b = c - a;              //5     -2      3
+c = a * b;              //5     -2      -10
+console.log(a);
+console.log(b);
+console.log(c);
 ```
 
 输出：
 
 ```
-	5
-	-2
-	-10
+5
+-2
+-10
 ```
 
 举例2：
 
 ```
-									//a    b     c
-			var a = 1;
-			var b = 2;
-			var c = 3;              //1     2     3
-			a = a + b;              //3     2     3
-			b = b + a;              //3     5     3
-			c = c + b;              //3     5     8
-			console.log(a);  //3
-			console.log(b);  //5
-			console.log(c);  //8
+						//a    b     c
+var a = 1;
+var b = 2;
+var c = 3;              //1     2     3
+a = a + b;              //3     2     3
+b = b + a;              //3     5     3
+c = c + b;              //3     5     8
+console.log(a);  //3
+console.log(b);  //5
+console.log(c);  //8
 ```
 
 输出：
 
 ```
-	3
-	5
-	8
+3
+5
+8
 ```
 
 举例3：
 
 ```
-							    //a       b
-			var a = "1";
-			var b = 2;          //"1"     2
-			a = a + b;          //"12"    2
-			b = b + a;          //"12"    "212"
-			console.log(a);     //输出12
-			console.log(b);     //输出212
+				    //a       b
+var a = "1";
+var b = 2;          //"1"     2
+a = a + b;          //"12"    2
+b = b + a;          //"12"    "212"
+console.log(a);     //输出12
+console.log(b);     //输出212
 ```
 
 输出：
 
 ```
-	12
-	212
+12
+212
 ```
 
 举例4：
 
 ```
-							  //a         b
-			var a = "1";
-			var b = 2;
-			a = b + a;       //"21"       2
-			b = b + a;       //"21"       "221"
-			console.log(a);  //21
-			console.log(b)   //221
+				  //a         b
+var a = "1";
+var b = 2;
+a = b + a;       //"21"       2
+b = b + a;       //"21"       "221"
+console.log(a);  //21
+console.log(b)   //221
 ```
 
 
 效果：
 
 ```
-	21
-	221
+21
+221
 ```
 
 举例5：（这个例子比较特殊，字符串减去数字）
 
 ```
-		var a = "3";
-		var b = 2;
-		console.log(a-b);
+var a = "3";
+var b = 2;
+console.log(a-b);
 ```
 
 
 效果：（注意，字符串 - 数值 = 数值）
 
 ```
-	1
+1
 ```
 
 
diff --git a/04-JavaScript基础/03-变量的强制类型转换.md b/04-JavaScript基础/03-typeof和变量的强制类型转换.md
similarity index 90%
rename from 04-JavaScript基础/03-变量的强制类型转换.md
rename to 04-JavaScript基础/03-typeof和变量的强制类型转换.md
index f4b25e4..5cd176d 100644
--- a/04-JavaScript基础/03-变量的强制类型转换.md
+++ b/04-JavaScript基础/03-typeof和变量的强制类型转换.md
@@ -2,7 +2,33 @@
 
 强制类型转换：将一个数据类型强制转换为其他的数据类型。
 
-类型转换主要指，将其他的数据类型，转换为：String、Number、Boolean。你会把某个数据类型转换成 null 或者 undefined 吗？不会，因为这样做，没有意义。
+类型转换主要指，将指定的数据类型，转换为：String、Number、Boolean。你会把某个数据类型转换成 null 或者 undefined 吗？不会，因为这样做，没有意义。
+
+## typeof 运算符
+
+> 我们先来讲一下 typeof，再讲类型转换。
+
+`typeof()`表示“**获取变量的类型**”，返回的是小写，语法为：
+
+```
+typeof 变量
+```
+
+**返回结果**：
+
+- `typeof 数值`的返回结果：number
+
+- `typeof 字符串`的返回结果：string
+
+- `typeof 布尔型`的返回结果：boolean
+
+- `typeof undefined`的返回结果：undefined
+
+- `typeof null`的返回结果：object
+
+在JavaScript中，只要是数，就是 number 数值型的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是 number 类型的。
+
+
 
 ## 其他的简单类型 --> String
 
diff --git a/04-JavaScript基础/04-运算符.md b/04-JavaScript基础/04-运算符.md
index eb5007b..bd146d1 100644
--- a/04-JavaScript基础/04-运算符.md
+++ b/04-JavaScript基础/04-运算符.md
@@ -181,7 +181,7 @@ typeof就是典型的一元运算符，因为后面只跟一个操作数。
 
 （1）正号不会对数字产生任何影响。比如说，`2`和`+2`是一样的。
 
-（2）我们可以对一个其他的数据类型使用`+`，来将其转换为number【小技巧】。比如：
+（2）我们可以对一个其他的数据类型使用`+`，来将其转换为number【重要的小技巧】。比如：
 
 ```javascript
     var a = true;
@@ -199,9 +199,15 @@ typeof就是典型的一元运算符，因为后面只跟一个操作数。
 
 打印结果：
 
+```
+a：1
+number
 
-![](http://img.smyhvae.com/20181221_2050.png)
+-----------------
 
+b：18
+number
+```
 
 ### 负号 `-`
 
@@ -426,7 +432,7 @@ PS：所以说，当你尝试去比较`"123"`和`"56"`这两个字符串时，
 console.log("56" > "123");  // true
 ```
 
-**因此**：当我们在比较两个字符串型的数字时，**一定一定要先转型**，比如 `parseInt()`。
+**因此**：当我们在比较两个字符串型的数字时，**一定一定要先转型**再比较大小，比如 `parseInt()`。
 
 （3）任何值和NaN做任何比较都是false。
 
@@ -437,7 +443,7 @@ console.log("56" > "123");  // true
 （1）`== `这个符号，还可以验证字符串是否相同。例如：
 
 ```
-	console.log("我爱你中国" == "我爱你中国");		//输出结果为true
+	console.log("我爱你中国" == "我爱你中国");		// 输出结果为true
 ```
 
 （2）`== `这个符号并不严谨，会将不同类型的东西，**转为相同类型**进行比较（大部分情况下，都是转换为数字）。例如：
@@ -525,10 +531,8 @@ console.log(isNaN(b)); //false
 
 运算符的优先级如下：（越往上，优先级越高）
 
-
 - `.`、`[]`、`new`
 
-
 - ()
 
 - ++、--
@@ -564,7 +568,6 @@ console.log(isNaN(b)); //false
 
 备注：你在实际写代码的时候，如果不清楚哪个优先级更高，可以把括号运用上。
 
-
 ## Unicode 编码表
 
 > 这一段中，我们来讲引申的内容：Unicode编码的使用。
diff --git a/04-JavaScript基础/10-作用域.md b/04-JavaScript基础/10-作用域.md
index 6e3dda6..871aff8 100644
--- a/04-JavaScript基础/10-作用域.md
+++ b/04-JavaScript基础/10-作用域.md
@@ -20,7 +20,7 @@
 
 在全局作用域中：
 
-- 创建的**变量**都会作为window对象的属性保存。
+- 创建的**变量**都会作为window对象的属性保存。比如在全局作用域内写 `var a = 100`，这里的 `a` 等价于 `window.a`。
 
 - 创建的**函数**都会作为window对象的方法保存。
 
@@ -38,7 +38,7 @@
 ```
 
 
-打印结果：undefined。（说明变量 a 被 被提前声明了，只是尚未被赋值）
+打印结果：undefined。（既然没报错，说明变量 a 被 被提前声明了，只是尚未被赋值）
 
 举例2：
 
diff --git a/04-JavaScript基础/10.2-预编译及变量提升详解.md b/04-JavaScript基础/10.2-预编译及变量提升详解.md
new file mode 100644
index 0000000..8ca3002
--- /dev/null
+++ b/04-JavaScript基础/10.2-预编译及变量提升详解.md
@@ -0,0 +1,80 @@
+
+> 我们在上一篇文章《作用域》中简单讲过“变量提升”，今天来讲一下预编译，这对我们深入理解变量提升会有帮助。
+
+## JavaScript 运行三部曲
+
+- 语法分析
+
+- 预编译
+
+- 解释执行
+
+## 预编译前奏
+
+> 在讲预编译前，我们先来普及下面两句话。
+
+### 两个规律
+
+**规律1、任何变量，如果未经声明就赋值，此变量是属于 window 的属性**。（注意，无论在哪个作用域内赋值）
+
+比如说，如果我们直接在代码里写 `console.log(a)`，这肯定会报错的，提示找不到 `a`。但如果我直接写 `a = 100`，这就不会报错，此时，这个 `a` 就是 `window.a`。
+
+**规律2、一切声明的全局变量，全是window的属性**。（注意，我说的是在全局作用域内声明的变量，不是说局部变量）
+
+比如说，当我定义 `var a = 200` 时，这此时这个 `a` 就是 `window.a`。
+
+由此，我们可以看出：**window 代表了全局作用域**。
+
+### 举例
+
+掌握了上面两句话之后，我们再来看看下面的例子。
+
+```javascript
+
+function foo() {
+    var a = b = 100; // 连续赋值
+}
+
+foo();
+
+console.log(window.a); // 在全局范围内访问 a
+console.log(window.b); // 在全局范围内访问 b
+```
+
+上方代码的打印结果：
+
+```
+undefined
+
+100
+```
+
+**解释**：
+
+`var a = b = 100` 这行**连续赋值**的代码等价于 `var a = (b = 100)`，其执行顺序是：
+
+（1）先把 100 赋值给 b；
+
+（2）再声明变量 a；
+
+（3）再把 b 的值赋值给 a。
+
+我们可以看到，b 是未经声明的变量就被赋值了，此时，根据规律1，这个 b 是属于 `window.b`；而 a 的作用域仅限于 foo() 函数内部，不属于 window。所以也就有了这样的打印结果。
+
+## 参考链接
+
+- JavaScript预编译原理分析：<https://blog.csdn.net/q1056843325/article/details/52951114>
+
+- <https://segmentfault.com/a/1190000018001871>
+
+- 预编译及变量提升：<https://juejin.im/post/5aa6693df265da23884cb571>
+
+- <https://juejin.im/post/5adaf8215188256712781830>
+
+- <https://www.qqzmly.com/archives/1521>
+
+- 宏任务&微任务相关：<https://segmentfault.com/a/1190000018134157>
+
+
+
+
diff --git a/18-推荐链接/02-GitHub项目推荐.md b/18-推荐链接/02-GitHub项目推荐.md
index 96ff677..e6795b1 100644
--- a/18-推荐链接/02-GitHub项目推荐.md
+++ b/18-推荐链接/02-GitHub项目推荐.md
@@ -10,6 +10,8 @@
 
 - 优秀的JS代码规范：<https://github.com/ryanmcdermott/clean-code-javascript>
 
+- 据说这个项目，是宝藏：<https://github.com/dexteryy/spellbook-of-modern-webdev>
+
 
 ## TS
 
