add: JS预编译
This commit is contained in:
qianguyihao
parent
d4741c9064
commit
c2f9247e4a
@ -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>
|
||||
|
||||
@ -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
|
||||
```
|
||||
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
@ -181,7 +181,7 @@ typeof就是典型的一元运算符，因为后面只跟一个操作数。
|
||||
|
||||
（1）正号不会对数字产生任何影响。比如说，`2`和`+2`是一样的。
|
||||
|
||||
（2）我们可以对一个其他的数据类型使用`+`，来将其转换为number【小技巧】。比如：
|
||||
（2）我们可以对一个其他的数据类型使用`+`，来将其转换为number【重要的小技巧】。比如：
|
||||
|
||||
```javascript
|
||||
var a = true;
|
||||
@ -199,9 +199,15 @@ typeof就是典型的一元运算符，因为后面只跟一个操作数。
|
||||
|
||||
打印结果：
|
||||
|
||||
```
|
||||
a：1
|
||||
number
|
||||
|
||||
|
||||
-----------------
|
||||
|
||||
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编码的使用。
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
在全局作用域中：
|
||||
|
||||
- 创建的**变量**都会作为window对象的属性保存。
|
||||
- 创建的**变量**都会作为window对象的属性保存。比如在全局作用域内写 `var a = 100`，这里的 `a` 等价于 `window.a`。
|
||||
|
||||
- 创建的**函数**都会作为window对象的方法保存。
|
||||
|
||||
@ -38,7 +38,7 @@
|
||||
```
|
||||
|
||||
|
||||
打印结果：undefined。（说明变量 a 被 被提前声明了，只是尚未被赋值）
|
||||
打印结果：undefined。（既然没报错，说明变量 a 被 被提前声明了，只是尚未被赋值）
|
||||
|
||||
举例2：
|
||||
|
||||
|
||||
80
04-JavaScript基础/10.2-预编译及变量提升详解.md
Normal file
80
04-JavaScript基础/10.2-预编译及变量提升详解.md
Normal file
@ -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>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -10,6 +10,8 @@
|
||||
|
||||
- 优秀的JS代码规范：<https://github.com/ryanmcdermott/clean-code-javascript>
|
||||
|
||||
- 据说这个项目，是宝藏：<https://github.com/dexteryy/spellbook-of-modern-webdev>
|
||||
|
||||
|
||||
## TS
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user