update
This commit is contained in:
qianguyihao
parent
45dc5ff722
commit
ea9831dea3
@ -160,8 +160,11 @@ Object是原型链的顶端。
|
||||
当new Foo()时发生了什么：
|
||||
|
||||
（1）创建一个**新的空对象实例**。
|
||||
|
||||
（2）将此空对象的隐式原型指向其构造函数的显示原型。
|
||||
|
||||
（3）执行构造函数（传入相应的参数，如果没有参数就不用传），同时 this 指向这个新实例。
|
||||
|
||||
（4）如果返回值是一个新对象，那么直接返回该对象；如果无返回值或者返回一个非对象值，那么就将步骤（1）创建的对象返回。
|
||||
|
||||
参考《JS高程》6.2.2
|
||||
|
||||
@ -27,7 +27,6 @@
|
||||
- 闭包
|
||||
|
||||
|
||||
|
||||
## 执行上下文
|
||||
|
||||
执行上下文主要有两种情况：
|
||||
@ -38,11 +37,9 @@
|
||||
|
||||
PS：注意“函数声明”和“函数表达式”的区别。
|
||||
|
||||
|
||||
先说全局的上下文：在执行代码之前，会先把所有的变量定义和函数声明拿出来（先拿出来放着，不急着赋值）。
|
||||
|
||||
20180311_1100.png
|
||||
|
||||
|
||||
|
||||
## this
|
||||
|
||||
@ -50,9 +47,7 @@ this指的是，**调用函数的那个对象**。
|
||||
|
||||
需要特别提醒的是：this的指向在函数定义时无法确认，只有函数执行时才能确定。
|
||||
|
||||
|
||||
20180311_1117.png
|
||||
|
||||
|
||||
|
||||
this的几种场景：
|
||||
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
|
||||
|
||||
类与实例：
|
||||
|
||||
- 类的声明
|
||||
@ -19,7 +17,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
## 类的定义、实例化
|
||||
|
||||
### 类的定义/类的声明
|
||||
@ -32,10 +29,8 @@
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
**方式二**：用 class 声明（ES6的写法）
|
||||
|
||||
|
||||
```javascript
|
||||
class Animal2 {
|
||||
constructor() { //可以在构造函数里写属性
|
||||
@ -46,7 +41,7 @@
|
||||
|
||||
控制台的效果：
|
||||
|
||||
20180307_0957.png
|
||||
|
||||
|
||||
### 实例化
|
||||
|
||||
@ -56,7 +51,7 @@
|
||||
console.log(new Animal1(),new Animal2()); //实例化。如果括号里没有参数，则括号可以省略
|
||||
```
|
||||
|
||||
20180307_1000.png
|
||||
|
||||
|
||||
## 继承的几种方式
|
||||
|
||||
@ -64,7 +59,6 @@
|
||||
|
||||
**继承的方式有几种？每种形式的优缺点是？**这些问题必问的。其实就是考察你对原型链的掌握程度。
|
||||
|
||||
|
||||
### 方式一：借助构造函数
|
||||
|
||||
|
||||
@ -81,12 +75,11 @@
|
||||
console.log(new Child1);
|
||||
```
|
||||
|
||||
|
||||
【重要】上方代码中，最重要的那行代码：在子类的构造函数里写了`Parent1.call(this);`，意思是：**让Parent的构造函数在child的构造函数中执行**。发生的变化是：**改变this的指向**，parent的实例 --> 改为指向child的实例。导致 parent的实例的属性挂在到了child的实例上，这就实现了继承。
|
||||
|
||||
打印结果：
|
||||
|
||||
20180307_1015.png
|
||||
|
||||
|
||||
上方结果表明：child先有了 parent 实例的属性（继承得以实现），再有了child 实例的属性。
|
||||
|
||||
@ -101,8 +94,7 @@
|
||||
|
||||
上面这个方法是无法被 Child1 继承的。如下：
|
||||
|
||||
20180307_1030.png
|
||||
|
||||
|
||||
|
||||
### 方法二；通过原型链实现继承
|
||||
|
||||
@ -125,14 +117,13 @@
|
||||
|
||||
打印结果：
|
||||
|
||||
20180307_1109.png
|
||||
|
||||
|
||||
|
||||
【重要】上方代码中，最重要的那行：每个函数都有`prototype`属性，于是，构造函数也有这个属性，这个属性是一个对象。现在，**我们把`Parent`的实例赋值给了`Child`的`prototye`**，从而实现**继承**。此时，`Child`构造函数、`Parent`的实例、`Child`的实例构成一个三角关系。于是：
|
||||
|
||||
- `new Child.__proto__ === new Parent()`的结果为true
|
||||
|
||||
|
||||
**分析：**
|
||||
|
||||
这种继承方式，**Child 可以继承 Parent 的原型**，但有个缺点：
|
||||
@ -141,14 +132,13 @@
|
||||
|
||||
如下：
|
||||
|
||||
20180307_1123.png
|
||||
|
||||
|
||||
上面的代码中， child1修改了arr属性，却发现，child2的arr属性也跟着改变了。这显然不太好，在业务中，两个子模块应该隔离才对。如果改了一个对象，另一个对象却发生了改变，就不太好。
|
||||
|
||||
造成这种缺点的原因是：child1和child2共用原型。即：`chi1d1.__proto__ === child2__proto__`是严格相同。而 arr方法是在 Parent 的实例上（即 Child实例的原型）的。
|
||||
|
||||
|
||||
|
||||
## 方式三；组合的方式：构造函数 + 原型链
|
||||
|
||||
就是把上面的两种方式组合起来：
|
||||
@ -172,75 +162,16 @@
|
||||
var child = new Child3();
|
||||
```
|
||||
|
||||
|
||||
这种方式，能解决之前两种方式的问题：既可以继承父类原型的内容，也不会造成原型里属性的修改。
|
||||
|
||||
这种方式的缺点是：让父亲Parent的构造方法执行了两次。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
ES6中的继承方式，一带而过即可，重点是要掌握ES5中的继承。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
```javascript
|
||||
|
||||
```
|
||||
|
||||
Loading…
Reference in New Issue
Block a user