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 对象。
|
||||
|
||||
@ -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。
|
||||
|
||||
@ -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…
x
Reference in New Issue
Block a user