webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
qianguyihao 2018-03-12 10:11:55 +08:00
parent 45dc5ff722
commit ea9831dea3
3 changed files with 11 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
06-前端基础/05-原型链总结.md
View File

@ -160,8 +160,11 @@ Object是原型链的顶端。
当new Foo()时发生了什么： 当new Foo()时发生了什么：
（1）创建一个**新的空对象实例**。 （1）创建一个**新的空对象实例**。
（2）将此空对象的隐式原型指向其构造函数的显示原型。 （2）将此空对象的隐式原型指向其构造函数的显示原型。
（3）执行构造函数（传入相应的参数，如果没有参数就不用传），同时 this 指向这个新实例。 （3）执行构造函数（传入相应的参数，如果没有参数就不用传），同时 this 指向这个新实例。
（4）如果返回值是一个新对象，那么直接返回该对象；如果无返回值或者返回一个非对象值，那么就将步骤（1）创建的对象返回。 （4）如果返回值是一个新对象，那么直接返回该对象；如果无返回值或者返回一个非对象值，那么就将步骤（1）创建的对象返回。
参考《JS高程》6.2.2 参考《JS高程》6.2.2

9
06-前端基础/06-作用域和闭包.md
View File

@ -27,7 +27,6 @@
- 闭包 - 闭包
## 执行上下文 ## 执行上下文
执行上下文主要有两种情况： 执行上下文主要有两种情况：
@ -38,11 +37,9 @@
PS：注意“函数声明”和“函数表达式”的区别。 PS：注意“函数声明”和“函数表达式”的区别。
先说全局的上下文：在执行代码之前，会先把所有的变量定义和函数声明拿出来（先拿出来放着，不急着赋值）。 先说全局的上下文：在执行代码之前，会先把所有的变量定义和函数声明拿出来（先拿出来放着，不急着赋值）。
20180311_1100.png ![](http://img.smyhvae.com/20180311_1100.png)
## this ## this
@ -50,9 +47,7 @@ this指的是，**调用函数的那个对象**。
需要特别提醒的是：this的指向在函数定义时无法确认，只有函数执行时才能确定。 需要特别提醒的是：this的指向在函数定义时无法确认，只有函数执行时才能确定。
![](http://img.smyhvae.com/20180311_1117.png)
20180311_1117.png
this的几种场景： this的几种场景：

81
06-前端基础/07-面向对象：类的定义和继承的几种方式.md
View File

@ -1,10 +1,8 @@
## 前言 ## 前言
类与实例： 类与实例：
- 类的声明 - 类的声明
@ -19,7 +17,6 @@
## 类的定义、实例化 ## 类的定义、实例化
### 类的定义/类的声明 ### 类的定义/类的声明
@ -32,10 +29,8 @@
} }
``` ```
**方式二**：用 class 声明（ES6的写法） **方式二**：用 class 声明（ES6的写法）
```javascript ```javascript
class Animal2 { class Animal2 {
constructor() { //可以在构造函数里写属性 constructor() { //可以在构造函数里写属性
@ -46,7 +41,7 @@
控制台的效果： 控制台的效果：
20180307_0957.png ![](http://img.smyhvae.com/20180307_0957.png)
### 实例化 ### 实例化
@ -56,7 +51,7 @@
console.log(new Animal1(),new Animal2()); //实例化。如果括号里没有参数，则括号可以省略 console.log(new Animal1(),new Animal2()); //实例化。如果括号里没有参数，则括号可以省略
``` ```
20180307_1000.png ![](http://img.smyhvae.com/20180307_1000.png)
## 继承的几种方式 ## 继承的几种方式
@ -64,7 +59,6 @@
**继承的方式有几种？每种形式的优缺点是？**这些问题必问的。其实就是考察你对原型链的掌握程度。 **继承的方式有几种？每种形式的优缺点是？**这些问题必问的。其实就是考察你对原型链的掌握程度。
### 方式一：借助构造函数 ### 方式一：借助构造函数
@ -81,12 +75,11 @@
console.log(new Child1); console.log(new Child1);
``` ```
【重要】上方代码中，最重要的那行代码：在子类的构造函数里写了`Parent1.call(this);`，意思是：**让Parent的构造函数在child的构造函数中执行**。发生的变化是：**改变this的指向**，parent的实例 --> 改为指向child的实例。导致 parent的实例的属性挂在到了child的实例上，这就实现了继承。 【重要】上方代码中，最重要的那行代码：在子类的构造函数里写了`Parent1.call(this);`，意思是：**让Parent的构造函数在child的构造函数中执行**。发生的变化是：**改变this的指向**，parent的实例 --> 改为指向child的实例。导致 parent的实例的属性挂在到了child的实例上，这就实现了继承。
打印结果： 打印结果：
20180307_1015.png ![](http://img.smyhvae.com/20180307_1015.png)
上方结果表明：child先有了 parent 实例的属性（继承得以实现），再有了child 实例的属性。 上方结果表明：child先有了 parent 实例的属性（继承得以实现），再有了child 实例的属性。
@ -101,8 +94,7 @@
上面这个方法是无法被 Child1 继承的。如下： 上面这个方法是无法被 Child1 继承的。如下：
20180307_1030.png ![](http://img.smyhvae.com/20180307_1030.png)
### 方法二；通过原型链实现继承 ### 方法二；通过原型链实现继承
@ -125,14 +117,13 @@
打印结果： 打印结果：
20180307_1109.png ![](http://img.smyhvae.com/20180307_1109.png)
【重要】上方代码中，最重要的那行：每个函数都有`prototype`属性，于是，构造函数也有这个属性，这个属性是一个对象。现在，**我们把`Parent`的实例赋值给了`Child`的`prototye`**，从而实现**继承**。此时，`Child`构造函数、`Parent`的实例、`Child`的实例构成一个三角关系。于是： 【重要】上方代码中，最重要的那行：每个函数都有`prototype`属性，于是，构造函数也有这个属性，这个属性是一个对象。现在，**我们把`Parent`的实例赋值给了`Child`的`prototye`**，从而实现**继承**。此时，`Child`构造函数、`Parent`的实例、`Child`的实例构成一个三角关系。于是：
- `new Child.__proto__ === new Parent()`的结果为true - `new Child.__proto__ === new Parent()`的结果为true
**分析：** **分析：**
这种继承方式，**Child 可以继承 Parent 的原型**，但有个缺点： 这种继承方式，**Child 可以继承 Parent 的原型**，但有个缺点：
@ -141,14 +132,13 @@
如下： 如下：
20180307_1123.png ![](http://img.smyhvae.com/20180307_1123.png)
上面的代码中， child1修改了arr属性，却发现，child2的arr属性也跟着改变了。这显然不太好，在业务中，两个子模块应该隔离才对。如果改了一个对象，另一个对象却发生了改变，就不太好。 上面的代码中， child1修改了arr属性，却发现，child2的arr属性也跟着改变了。这显然不太好，在业务中，两个子模块应该隔离才对。如果改了一个对象，另一个对象却发生了改变，就不太好。
造成这种缺点的原因是：child1和child2共用原型。即：`chi1d1.__proto__ === child2__proto__`是严格相同。而 arr方法是在 Parent 的实例上（即 Child实例的原型）的。 造成这种缺点的原因是：child1和child2共用原型。即：`chi1d1.__proto__ === child2__proto__`是严格相同。而 arr方法是在 Parent 的实例上（即 Child实例的原型）的。
## 方式三；组合的方式：构造函数 + 原型链 ## 方式三；组合的方式：构造函数 + 原型链
就是把上面的两种方式组合起来： 就是把上面的两种方式组合起来：
@ -172,75 +162,16 @@
var child = new Child3(); var child = new Child3();
``` ```
这种方式，能解决之前两种方式的问题：既可以继承父类原型的内容，也不会造成原型里属性的修改。 这种方式，能解决之前两种方式的问题：既可以继承父类原型的内容，也不会造成原型里属性的修改。
这种方式的缺点是：让父亲Parent的构造方法执行了两次。 这种方式的缺点是：让父亲Parent的构造方法执行了两次。
```javascript ```javascript
``` ```
```javascript
```
ES6中的继承方式，一带而过即可，重点是要掌握ES5中的继承。 ES6中的继承方式，一带而过即可，重点是要掌握ES5中的继承。
```javascript
```
```javascript
```
```javascript
```