diff --git a/06-前端基础/05-原型链总结.md b/06-前端基础/05-原型链总结.md index b07b8b5..92bc1df 100644 --- a/06-前端基础/05-原型链总结.md +++ b/06-前端基础/05-原型链总结.md @@ -160,8 +160,11 @@ Object是原型链的顶端。 当new Foo()时发生了什么： （1）创建一个**新的空对象实例**。 + （2）将此空对象的隐式原型指向其构造函数的显示原型。 + （3）执行构造函数（传入相应的参数，如果没有参数就不用传），同时 this 指向这个新实例。 + （4）如果返回值是一个新对象，那么直接返回该对象；如果无返回值或者返回一个非对象值，那么就将步骤（1）创建的对象返回。 参考《JS高程》6.2.2 diff --git a/06-前端基础/06-作用域和闭包.md b/06-前端基础/06-作用域和闭包.md index 1400f9c..35fa2da 100644 --- a/06-前端基础/06-作用域和闭包.md +++ b/06-前端基础/06-作用域和闭包.md @@ -27,7 +27,6 @@ - 闭包 - ## 执行上下文 执行上下文主要有两种情况： @@ -38,11 +37,9 @@ PS：注意“函数声明”和“函数表达式”的区别。 - 先说全局的上下文：在执行代码之前，会先把所有的变量定义和函数声明拿出来（先拿出来放着，不急着赋值）。 -20180311_1100.png - +![](http://img.smyhvae.com/20180311_1100.png) ## this @@ -50,9 +47,7 @@ this指的是，**调用函数的那个对象**。 需要特别提醒的是：this的指向在函数定义时无法确认，只有函数执行时才能确定。 - -20180311_1117.png - +![](http://img.smyhvae.com/20180311_1117.png) this的几种场景： diff --git a/06-前端基础/07-面向对象：类的定义和继承的几种方式.md b/06-前端基础/07-面向对象：类的定义和继承的几种方式.md index b8fdb7e..8b6bf42 100644 --- a/06-前端基础/07-面向对象：类的定义和继承的几种方式.md +++ b/06-前端基础/07-面向对象：类的定义和继承的几种方式.md @@ -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 +![](http://img.smyhvae.com/20180307_0957.png) ### 实例化 @@ -56,7 +51,7 @@ 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); ``` - 【重要】上方代码中，最重要的那行代码：在子类的构造函数里写了`Parent1.call(this);`，意思是：**让Parent的构造函数在child的构造函数中执行**。发生的变化是：**改变this的指向**，parent的实例 --> 改为指向child的实例。导致 parent的实例的属性挂在到了child的实例上，这就实现了继承。 打印结果： -20180307_1015.png +![](http://img.smyhvae.com/20180307_1015.png) 上方结果表明：child先有了 parent 实例的属性（继承得以实现），再有了child 实例的属性。 @@ -101,8 +94,7 @@ 上面这个方法是无法被 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`的实例构成一个三角关系。于是： - `new Child.__proto__ === new Parent()`的结果为true - **分析：** 这种继承方式，**Child 可以继承 Parent 的原型**，但有个缺点： @@ -141,14 +132,13 @@ 如下： -20180307_1123.png +![](http://img.smyhvae.com/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 - -```