add

06-前端基础/01-页面布局.md

@@ -43,7 +43,7 @@
 
 问题：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应。
 
-20180305_1520.png
+![](http://img.smyhvae.com/20180305_1520.png)
 
 分析：
 
@@ -206,7 +206,7 @@
 
 效果如下：
 
-20180305_1640.gif
+![](http://img.smyhvae.com/20180305_1640.gif)
 
 
 ### 方法3、flexbox布局
@@ -280,7 +280,7 @@
 
 效果如下：
 
-20180305_1700.gif
+![](http://img.smyhvae.com/20180305_1700.gif)
 
 
 
@@ -358,7 +358,7 @@
 
 ```
 
-20180305_1855.gif
+![](http://img.smyhvae.com/20180305_1855.gif)
 
 ### 方法5、网格布局 grid
 
@@ -424,8 +424,7 @@
 
 效果：
 
-20180305_1920.gif
-
+![](http://img.smyhvae.com/20180305_1920.gif)
 
 
 ### 延伸：五种方法的对比
@@ -485,7 +484,7 @@ PS：面试提到网格布局，说明我们对新技术是有追求的。
 
 ### 页面布局的变通
 
-20180305_1931.png
+![](http://img.smyhvae.com/20180305_1931.png)
 
 `上下高度固定，中间自适应`，这个在移动端的页面中很常见。
 

06-前端基础/03-DOM事件的总结.md

@@ -114,10 +114,9 @@ DOM事件流讲的就是：浏览器在于当前页面做交互时，这个事
 
 - （3）冒泡：从**目标元素**传到 Window 对象。
 
-![](http://img.smyhvae.com/20180204_1028.gif)
+![](http://img.smyhvae.com/20180306_1058.png)
 
-
-20180306_1058.png
+![](http://img.smyhvae.com/20180204_1218.jpg)
 
 
 ## 描述DOM事件捕获的具体流程
@@ -127,7 +126,7 @@ DOM事件流讲的就是：浏览器在于当前页面做交互时，这个事
 ### 捕获的流程
 
 
-20180306_1103.png
+![](http://img.smyhvae.com/20180306_1103.png)
 
 
 **说明**：捕获阶段，事件依次传递的顺序是：window --> document --> html--> body --> 父元素、子元素、目标元素。

06-前端基础/04-HTTP协议.md

@@ -67,7 +67,7 @@ http协议的头部有一个`数据类型`，通过http协议，就可以完成
 
 ## HTTP报文的组成部分
 
-20180306_1400.png
+![](http://img.smyhvae.com/20180306_1400.png)
 
 在回答此问题时，我们要按照顺序回答：
 
@@ -79,7 +79,7 @@ http协议的头部有一个`数据类型`，通过http协议，就可以完成
 
 ### 请求报文包括：
 
-20180228_1505.jpg
+![](http://img.smyhvae.com/20180228_1505.jpg)
 
 - 请求行：包括请求方法、请求的url、http协议及版本。
 
@@ -91,7 +91,7 @@ http协议的头部有一个`数据类型`，通过http协议，就可以完成
 
 ### 响应报文包括：
 
-20180228_1510.jpg
+![](http://img.smyhvae.com/20180228_1510.jpg)
 
 
 - 状态行：http协议及版本、状态码及状态描述。
@@ -128,7 +128,7 @@ head 可能偶尔用的到。
 
 ## get 和 post的区别
 
-20180306_1415.png
+![](http://img.smyhvae.com/20180306_1415.png)
 
 区别有很多，如果记不住，面试时，至少要任意答出其中的三四条。
 
@@ -151,11 +151,11 @@ head 可能偶尔用的到。
 
 http状态码分类：
 
-20180306_1430.png
+![](http://img.smyhvae.com/20180306_1430.png)
 
 常见的http状态码：
 
-20180306_1431.png
+![](http://img.smyhvae.com/20180306_1431.png)
 
 
 部分解释：
@@ -170,7 +170,7 @@ http状态码分类：
 - 304：我这个服务器告诉客户端，你已经有缓存了，不需要从我这里取了。
 
 
-20180306_1440.png
+![](http://img.smyhvae.com/20180306_1440.png)
 
 400和401用的不多。403指的是请求被拒绝。404指的是资源不存在。
 
@@ -209,7 +209,6 @@ http状态码分类：
 管线化就是，我把现在的请求打包，一次性发过去，你也给我一次响应回来。
 
 
-
 ### 管线化的注意事项
 
 

06-前端基础/05-原型链.md

@@ -2,6 +2,17 @@
 
 ## 前言
 
+### 面向对象的三大特性
+
+- 封装
+
+- 继承
+
+- 多态
+
+### 原型链的知识
+
+
 原型链是面向对象的基础，是非常重要的部分。有以下几种知识：
 
 - 创建对象有几种方法
@@ -14,4 +25,211 @@
 
 
 
+## 创建对象有几种方法
+
+### 方式一：字面量
+
+```javascript
+    var obj11 = {name: 'smyh'};
+    var obj12 = new Object(name: `smyh`);
+```
+
+上面的两种写法是一样的。因为，第一种写法，`obj11`会指向`Object`。
+
+
+### 方式二：通过构造函数
+
+
+```javascript
+    var M = function (name) {
+        this.name = name;
+    }
+    var obj3 = new M('smyhvae');
+```
+
+### 方法三：Object.create
+
+```javascript
+    var p = {name:'smyhvae'};
+    var obj3 = Object.create(p);
+```
+
+第三种方法，很少有人能说出来。
+
+
+## 原型、构造函数、实例，以及原型链
+
+
+
+
+20180306_1538.png
+
+
+
+PS：任何一个函数，如果在前面加了new，那就是构造函数。
+
+
+### 原型、构造函数、实例三者之间的关系
+
+
+20180306_2107.png
+
+- 1、构造函数通过 new 生成实例
+
+- 2、构造函数也是函数，构造函数的`prototype`指向原型。（所有的函数有`prototype`属性，但实例没有 `prototype`属性）
+
+- 3、原型对象中有 constructor，指向该原型的构造函数。
+
+上面的三行，代码演示：
+
+```
+    var Foo = function (name) {
+        this.name = name;
+    }
+
+    var fn = new Foo('smyhvae');
+```
+
+上面的代码中，`Foo.prototype.constructor === Foo`的结果是`true`：
+
+20180306_2120.png
+
+
+- 4、实例的`_proto_`指向原型。也就是说，`Foo._proto_ === M.prototype`。
+
+声明：所有的**引用类型**（数组、对象、函数）都有`_proto_`这个属性。
+
+`Foo._proto_ === Function.prototype`的结果为true，说明Foo这个普通的函数，是Function构造函数的一个实例。
+
+
+
+
+
+### 原型链
+
+**原型链的基本原理**：任何一个**实例**，通过原型链，找到它上面的**原型**，该原型对象中的方法和属性，可以被所有的原型实例共享。
+
+
+Object是原型链的顶端。
+
+原型可以起到继承的作用。原型里的方法都可以被不同的实例共享：
+
+```
+    //给Foo的原型添加 say 函数
+    Foo.prototype.say = function () {
+        console.log('');
+    }
+```
+
+**原型链的关键**：在访问一个实例的时候，如果实例本身没找到此方法或属性，就往原型上找。如果还是找不到，继续往上一级的原型上找。
+
+
+## `instanceof`的原理
+
+20180306_2209.png
+
+
+`instanceof`的**作用**：用于判断**引用类型**属于哪个**构造函数**。
+
+`instanceof`的**原理**：判断实例对象的`_proto_`属性，和构造函数的`prototype`属性，是否指向同一个地址。
+
+**注意**：
+
+（1）虽然说，实例是由构造函数 new 出来的，但是实例的`_proto_`属性引用的是构造函数的`prototype`。实例的`_proto_`属性与构造函数本身无关。
+
+
+（2）原型的上面可能还有原型，以此类推往上走。这条链上， instanceof 的返回结果也是 true。
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+
+
+
+```
+
+
+
+
+