Merge branch 'dev'

# Conflicts:
#	_config.yml

Author: 丁晓杰

.deploy_git

@@ -0,0 +1 @@
+Subproject commit c425f0f8b13d3a92764fc963b8810ded0c0ee0a8

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 public
-db.json
+db.json
+.deploy_git

_config.yml

@@ -3,9 +3,9 @@
 ## Source: https://github.com/hexojs/hexo/
 
 # Site
-title: VioletJack
-subtitle: 专注于前端知识的学习和分享
-description: 如果我衣食无忧，我最想做的事就是玩技术，写博客。
+title: VioletJack 技术日志
+subtitle: 专注！坚持！求真！
+description: Violetjack 的个人博客，记录了一些技术笔记和思考。
 author: VioletJack
 language: zh-Hans
 timezone: Asia/Shanghai

source/_posts/2018-sum.md

@@ -0,0 +1,123 @@
+---
+title: 聊聊对象行为委托
+date: 2019-02-13
+tag: "JavaScript 基础"
+---
+
+> 昨天我们聊到了对象的原型，知道了有 new 和 Object.create() 两种操作原型的方式。今天我们来对比下使用这两种方式进行面向对象编程的特点。
+
+# 使用 new 关键字写面向类
+
+先来一段面向类的代码实现
+
+```js
+function Foo(who) {
+    this.me = who;
+}
+Foo.prototype.identify = function () {
+    return "I am " + this.me;
+};
+
+function Bar(who) {
+    Foo.call(this, who);
+}
+Bar.prototype = Object.create(Foo.prototype);
+Bar.prototype.speak = function () {
+    console.log("Hello, " + this.identify() + ".");
+};
+
+var b1 = new Bar("b1");
+var b2 = new Bar("b2");
+
+b1.speak();
+b2.speak();
+```
+
+当然也可以用 ES6 的 class 语法糖。class 的出现避免了在函数的 `prototype` 上添加属性的奇怪的行为。
+
+# 混乱不堪的原型关系
+
+无论是 function 还是 class，其背后还是逃不开对于 prototype 的操作。而原型中各种关系令人头疼。下面是这段代码的关系图：
+
+![原型关系](https://upload-images.jianshu.io/upload_images/1987062-b78fe4bbd7d6532a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+抛开函数与 Function 和 Object 的关系，我们来捋一捋代码中的逻辑。
+
+1. Foo 函数的 prototype 上创建了函数 identify
+2. Foo 函数的 prototype 引用了 Object 的原型（原型链理论）
+3. Bar 函数 prototype 引用了以 Foo 的 prototype 为原型创建的对象
+4. Bar 函数的 prototype 上创建了函数 speak
+5. 以 Bar 为构造器分别 new 了两个对象 b1 和 b2，b1 和 b2 的原型引用了 Bar 函数的 prototype
+6. 由于 Bar 进行了修改原型的操作，所以没有 constructor 函数。
+7. 所以根据原型链理论，Bar 的 prototype 和 b1、b2 的 constructor 都指向了 Foo 函数的 constructor。
+
+就这么个逻辑（这还没有包括函数与对象之前的关系），我表示我讨厌在 prototype 上去添加属性，这显得非常乱。
+
+最后输出的 b1 对象的原型结构如下：
+
+![原型结构](https://upload-images.jianshu.io/upload_images/1987062-1cd13125458907a5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+
+# 行为委托闪亮登场
+
+可以看到上面的写法导致指向非常混乱，实际上我们并不需要了解这么多逻辑。下面介绍一种方式完全不管 prototype 真正面向对象的写法 —— 行为委托。
+
+就拿上面的例子来说：
+
+```js
+Foo = {
+    init: function (who) {
+        this.me = who;
+    },
+    identify: function () {
+        return "I am " + this.me;
+    }
+};
+
+Bar = Object.create(Foo);
+Bar.speak = function () {
+    alert("Hello, " + this.identify() + ".");
+};
+
+var b1 = Object.create(Bar);
+b1.init("b1");
+var b2 = Object.create(Bar);
+b2.init("b2");
+
+b1.speak();
+b2.speak();
+```
+
+其中的关键就是完全使用对象来写面向对象编程，而避免使用 new 一个构造器的写法。这里我们也来理一理逻辑：
+
+1. 创建 Foo 对象，它包含 init 和 identify 两个函数属性。
+2. 创建 Bar 对象原型继承 Foo 对象。
+3. 在 Bar 对象上添加 speak 方法。
+4. 创建 b1 和 b2 对象原型继承 Bar 对象。
+5. 使用原型链上的 init 函数为 b1 和 b2 对象传入数据。
+6. 通过原型链调用 speak 函数。
+
+这种写法的原型关系图就简单了很多：
+
+![原型关系](https://upload-images.jianshu.io/upload_images/1987062-bdc4c082cbe29864.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到与第一中方法比少了函数构造器，少了函数构造器就没了 constructor 和 prototype。完全通过对象与对象之间的原型继承引用关系来实现面向对象的编程思想。
+
+最后看下输出的 b1 对象的原型结构：
+
+![原型结构](https://upload-images.jianshu.io/upload_images/1987062-20caa15116450797.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+# 行为委托的好处
+
+* 行为委托避免使用 new 构造器形式来实现面向对象，减少了大量构造器所带出的复杂关系。
+* 行为委托只使用对象之间的原型继承关系，让整个代码逻辑变得非常清晰。
+
+# 最后
+
+这里介绍了行为委托这一种面向对象的设计思想，它让面向对象编程变得更加简洁、更加自然。
+
+当然，这只是一种设计方式。如果执意要用 new 写法来写面向对象编程当然没有问题，推荐使用 class 语法糖，它可以将操作 prototype 的行为给隐藏起来，这使得代码更像 Java（引用对象的特性并未改变，所以只是看着像），从而让代码更好理解。
+
+赶快去试试行为委托吧，我认为它是种很适合 JavaScript 的设计模式。
+
+明天我们聊聊 JavaScript 的类型~

source/_posts/behavior.md

@@ -0,0 +1,152 @@
+---
+title: 聊聊 JavaScript 的原型
+date: 2019-02-12
+tag: "JavaScript 基础"
+---
+
+> JavaScript 中的原型也是一个非常让人头疼的东西，很多前端同学对此也是一知半解，比如我。今天我们就好好捋一捋这个原型。
+
+# 创建对象的方式
+
+下面就是创建对象的几种方式：
+
+```js
+var o1 = {
+    a: 123,
+    b: 'hello world'
+}
+console.log(o1.b)
+
+
+function fun2() {
+    this.a = 33
+    this.b = 'hello o2'
+}
+
+var o2 = new fun2()
+console.log(o2.b)
+
+class Fun3 {
+    constructor() {
+        this.a = 365
+        this.b = 'hello class'
+    }
+}
+var o3 = new Fun3()
+console.log(o3.b)
+```
+
+有人说这是三种创建方式，但是我认为其实是两种创建方式（因为 class 语法糖的本质还是 function）：**直接定义对象**和**使用 new 关键词构造对象**。
+
+# 原型和原型链
+
+当我们创建了一个对象之后，就产生了原型（`Object.create(null)` 是特例）。
+
+## prototype 和 `__proto__` 的区别
+
+`__proto__` 是一个非正式的属性，很多环境中不支持该属性。它指向当前对象的原型。如下图：
+
+![__proto__](https://upload-images.jianshu.io/upload_images/1987062-1002cf3d69276266.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+上面的代码是一段原型继承，可以看到对象 obj1 继承了对象 obj，所以 obj1 的 `__proto__` 就指向了 obj，而 obj 的 `__proto__` 则指向了 Object。所有对象的原型链最终都将指向 Object。
+
+而关于 prototype 我摘录了一段话：
+
+> 当你创建函数时，JS 会为这个函数自动添加 `prototype` 属性，值是一个有 constructor 属性的对象。而一旦你把这个函数当作构造函数（`constructor`）调用（即通过`new`关键字调用），那么 JS 就会帮你创建该构造函数的实例，实例继承构造函数 `prototype` 的所有属性和方法。
+
+![prototype](https://upload-images.jianshu.io/upload_images/1987062-c600260dc91c2314.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+可以看到，对象 bar 的 `__proto__` 属性指向了函数 func 的 `prototype`。
+
+总结下，`__proto__` 指向原型，而 `prototype` 是函数独有且构造的对象原型指向 `prototype`。
+
+## 理解原型链
+
+每个对象都是原型，而对象之间是可以继承的。所以就产生了原型链。看图说话：
+
+![原型链](https://upload-images.jianshu.io/upload_images/1987062-aa7441f2c85bb6f5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+很好理解了，我们创建了四个对象逐层进行原型继承。最后打印 obj3 对象可以看到 `obj3 -> obj2 -> obj1 -> obj -> Object` 这就是原型链。
+
+如果我要在 obj3 对象上访问 a 属性，那么 JavaScript 就会顺着原型链逐层往下找，最终在 obj 对象上找到了a 属性，这就是原型链查找数据的方式。如果找到 Object 也没有找到属性就返回 `undefined`。
+
+![原型链查找](https://upload-images.jianshu.io/upload_images/1987062-07ac0815c99f5d7d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+# 为对象指定原型的两种方式
+
+那么如何为对象添加原型呢？
+
+## 1. new 关键字
+
+第一种就是通过构造器的方式来创建。
+
+```js
+function Foo () {
+    this.a = 11
+    this.b = 22
+}
+Foo.prototype.c = 33
+Foo.prototype.func = () => {
+    console.log('hello')
+}
+
+var f = new Foo()
+
+console.log(f)
+console.log(Object.getPrototypeOf(f))
+```
+
+当然，不得不说的是 ES6 的 class 语法糖写法：
+
+```js
+class Foo {
+    constructor() {
+        this.a = 11
+        this.b = 22
+    }
+
+    func() {
+        console.log('hello')
+    }
+}
+
+var f = new Foo()
+```
+
+两者其实是一样的效果，但是 class 写法更接近常规的类写法。（终于可以让 function 回归它原本的作用上了。）
+
+## 2. Object.create(obj) 面向对象
+
+Object.create() 可以很好的实现原型继承行为，也能通过 Object API 来修改原型：
+
+```js
+var obj = { a: 123, b: 456 }
+Object.setPrototypeOf(obj, { c: 789 })
+var obj2 = Object.create(obj)
+obj2.e = 555
+```
+
+代码输出结果如下图，的确实现了为对象指定原型的行为。
+
+![原型继承和修改](https://upload-images.jianshu.io/upload_images/1987062-b592d69f559248af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
+
+# 引用流还是复制流？
+
+使用 JavaScript 原型是特别要主义的一个点是：**JavaScript 对于原型的继承是一种引用行为**，即所引用的对象改变，继承对象的原型也会改变。
+
+与之相反的，有些语言会使用复制的方式。即在原型继承时复制一份原型到当前对象，从此被复制的对象和复制对象再无瓜葛。
+
+# 总结
+
+随着 Object.create() 等一系列新 API 和 ES6 的 class 写法的出现，使用 function 作为构造器并使用 prototype 来修改原型的方式将逐渐被抛弃。但是由于历史原因这部分知识还是要理解其中原理的。
+
+而 `__proto__` 属性是非正式属性，不适合在通用场景下使用。
+
+而对于原型的写法，我认为有两种不错的处理方式：
+
+> 1. 完全使用 class 构造器写法来替代使用 function 构造器的写法来进行**面向类**的开发方式。
+> 2. 放弃原型写法，使用 Object 系列 API 进行**面向对象**的开发（行为委托就是这样的方式）。
+
+# 最后
+
+关于原型，先聊这么多。明天我们聊聊基于 Object API 来实现的面向对象模式 —— 行为委托，敬请期待。