docs(oop): edit prototype

Author: ruanyf

docs/oop/prototype.md

@@ -332,3 +332,300 @@ function Fubar (foo, bar) {
 
 上面代码使用`instanceof`运算符，在函数体内部判断`this`关键字是否为构造函数`Fubar`的实例。如果不是，就表明忘了加`new`命令。
 
+## 构造函数的继承
+
+让一个构造函数继承另一个构造函数，是非常常见的需求。这可以分成两步实现。第一步是在子类的构造函数中，调用父类的构造函数。
+
+```javascript
+function Sub(value) {
+  Super.call(this);
+  this.prop = value;
+}
+```
+
+上面代码中，`Sub`是子类的构造函数，`this`是子类的实例。在实例上调用父类的构造函数`Super`，就会让子类实例具有父类实例的属性。
+
+第二步，是让子类的原型指向父类的原型，这样子类就可以继承父类原型。
+
+```javascript
+Sub.prototype = Object.create(Super.prototype);
+Sub.prototype.constructor = Sub;
+Sub.prototype.method = '...';
+```
+
+上面代码中，`Sub.prototype`是子类的原型，要将它赋值为`Object.create(Super.prototype)`，而不是直接等于`Super.prototype`。否则后面两行对`Sub.prototype`的操作，会连父类的原型`Super.prototype`一起修改掉。
+
+另外一种写法是`Sub.prototype`等于一个父类实例。
+
+```javascript
+Sub.prototype = new Super();
+```
+
+上面这种写法也有继承的效果，但是子类会具有父类实例的方法。有时，这可能不是我们需要的，所以不推荐使用这种写法。
+
+举例来说，下面是一个`Shape`构造函数。
+
+```javascript
+function Shape() {
+  this.x = 0;
+  this.y = 0;
+}
+
+Shape.prototype.move = function (x, y) {
+  this.x += x;
+  this.y += y;
+  console.info('Shape moved.');
+};
+```
+
+我们需要让`Rectangle`构造函数继承`Shape`。
+
+```javascript
+// 第一步，子类继承父类的实例
+function Rectangle() {
+  Shape.call(this); // 调用父类构造函数
+}
+// 另一种写法
+function Rectangle() {
+  this.base = Shape;
+  this.base();
+}
+
+// 第二步，子类继承父类的原型
+Rectangle.prototype = Object.create(Shape.prototype);
+Rectangle.prototype.constructor = Rectangle;
+```
+
+采用这样的写法以后，`instanceof`运算符会对子类和父类的构造函数，都返回`true`。
+
+```javascript
+var rect = new Rectangle();
+
+rect instanceof Rectangle  // true
+rect instanceof Shape  // true
+```
+
+上面代码中，子类是整体继承父类。有时只需要单个方法的继承，这时可以采用下面的写法。
+
+```javascript
+ClassB.prototype.print = function() {
+  ClassA.prototype.print.call(this);
+  // some code
+}
+```
+
+上面代码中，子类`B`的`print`方法先调用父类`A`的`print`方法，再部署自己的代码。这就等于继承了父类`A`的`print`方法。
+
+## 多重继承
+
+JavaScript 不提供多重继承功能，即不允许一个对象同时继承多个对象。但是，可以通过变通方法，实现这个功能。
+
+```javascript
+function M1() {
+  this.hello = 'hello';
+}
+
+function M2() {
+  this.world = 'world';
+}
+
+function S() {
+  M1.call(this);
+  M2.call(this);
+}
+
+// 继承 M1
+S.prototype = Object.create(M1.prototype);
+// 继承链上加入 M2
+Object.assign(S.prototype, M2.prototype);
+
+// 指定构造函数
+S.prototype.constructor = S;
+
+var s = new S();
+s.hello // 'hello：'
+s.world // 'world'
+```
+
+上面代码中，子类`S`同时继承了父类`M1`和`M2`。这种模式又称为 Mixin（混入）。
+
+## 模块
+
+随着网站逐渐变成"互联网应用程序"，嵌入网页的 JavaScript 代码越来越庞大，越来越复杂。网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等……开发者必须使用软件工程的方法，管理网页的业务逻辑。
+
+JavaScript 模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。
+
+
+："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。
+
+为了解决上面的缺点，可以
+但是，JavaScript 不是一种模块化编程语言，ES6 才开始支持“类”和“模块”。下面介绍传统的做法，如何利用对象实现模块的效果。
+
+### 基本的实现方法
+
+模块是实现特定功能的一组属性和方法的封装。
+
+简单的做法是把模块写成一个对象，所有的模块成员都放到这个对象里面。
+
+```javascript
+var module1 = new Object({
+　_count : 0,
+　m1 : function (){
+　　//...
+　},
+　m2 : function (){
+  　//...
+　}
+});
+```
+
+上面的函数`m1`和`m2`，都封装在`module1`对象里。使用的时候，就是调用这个对象的属性。
+
+```javascript
+module1.m1();
+```
+
+但是，这样的写法会暴露所有模块成员，内部状态可以被外部改写。比如，外部代码可以直接改变内部计数器的值。
+
+```javascript
+module1._count = 5;
+```
+
+### 封装私有变量：构造函数的写法
+
+我们可以利用构造函数，封装私有变量。
+
+```javascript
+function StringBuilder() {
+  var buffer = [];
+
+  this.add = function (str) {
+     buffer.push(str);
+  };
+
+  this.toString = function () {
+    return buffer.join('');
+  };
+
+}
+```
+
+上面代码中，`buffer`是模块的私有变量。一旦生成实例对象，外部是无法直接访问`buffer`的。但是，这种方法将私有变量封装在构造函数中，违反了构造函数与实例对象相分离的原则。并且，非常耗费内存。
+
+```javascript
+function StringBuilder() {
+  this._buffer = [];
+}
+
+StringBuilder.prototype = {
+  constructor: StringBuilder,
+  add: function (str) {
+    this._buffer.push(str);
+  },
+  toString: function () {
+    return this._buffer.join('');
+  }
+};
+```
+
+这种方法将私有变量放入实例对象中，好处是看上去更自然，但是它的私有变量可以从外部读写，不是很安全。
+
+### 封装私有变量：立即执行函数的写法
+
+另一种做法是使用“立即执行函数”（Immediately-Invoked Function Expression，IIFE），将相关的属性和方法封装在一个函数作用域里面，可以达到不暴露私有成员的目的。
+
+```javascript
+var module1 = (function () {
+　var _count = 0;
+　var m1 = function () {
+　  //...
+　};
+　var m2 = function () {
+　　//...
+　};
+　return {
+　　m1 : m1,
+　　m2 : m2
+　};
+})();
+```
+
+使用上面的写法，外部代码无法读取内部的`_count`变量。
+
+```javascript
+console.info(module1._count); //undefined
+```
+
+上面的`module1`就是 JavaScript 模块的基本写法。下面，再对这种写法进行加工。
+
+### 模块的放大模式
+
+如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用“放大模式”（augmentation）。
+
+```javascript
+var module1 = (function (mod){
+　mod.m3 = function () {
+　　//...
+　};
+　return mod;
+})(module1);
+```
+
+上面的代码为`module1`模块添加了一个新方法`m3()`，然后返回新的`module1`模块。
+
+在浏览器环境中，模块的各个部分通常都是从网上获取的，有时无法知道哪个部分会先加载。如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用"宽放大模式"（Loose augmentation）。
+
+```javascript
+var module1 = (function (mod) {
+　//...
+　return mod;
+})(window.module1 || {});
+```
+
+与"放大模式"相比，“宽放大模式”就是“立即执行函数”的参数可以是空对象。
+
+### 输入全局变量
+
+独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。
+
+为了在模块内部调用全局变量，必须显式地将其他变量输入模块。
+
+```javascript
+var module1 = (function ($, YAHOO) {
+　//...
+})(jQuery, YAHOO);
+```
+
+上面的`module1`模块需要使用 jQuery 库和 YUI 库，就把这两个库（其实是两个模块）当作参数输入`module1`。这样做除了保证模块的独立性，还使得模块之间的依赖关系变得明显。
+
+立即执行函数还可以起到命名空间的作用。
+
+```javascript
+(function($, window, document) {
+
+  function go(num) {
+  }
+
+  function handleEvents() {
+  }
+
+  function initialize() {
+  }
+
+  function dieCarouselDie() {
+  }
+
+  //attach to the global scope
+  window.finalCarousel = {
+    init : initialize,
+    destroy : dieCouraselDie
+  }
+
+})( jQuery, window, document );
+```
+
+上面代码中，`finalCarousel`对象输出到全局，对外暴露`init`和`destroy`接口，内部方法`go`、`handleEvents`、`initialize`、`dieCarouselDie`都是外部无法调用的。
+
+## 参考链接
+
+- [JavaScript Modules: A Beginner’s Guide](https://medium.freecodecamp.com/javascript-modules-a-beginner-s-guide-783f7d7a5fcc), by Preethi Kasireddy

docs/types/function.md

@@ -200,44 +200,6 @@ function f() {
 f() // 1
 ```
 
-### 不能在条件语句中声明函数
-
-根据 ES5 的规范，不得在非函数的代码块中声明函数，最常见的情况就是`if`和`try`语句。
-
-```javascript
-if (foo) {
-  function x() {}
-}
-
-try {
-  function x() {}
-} catch(e) {
-  console.log(e);
-}
-```
-
-上面代码分别在`if`代码块和`try`代码块中声明了两个函数，按照语言规范，这是不合法的。但是，实际情况是各家浏览器往往并不报错，能够运行。
-
-但是由于存在函数名的提升，所以在条件语句中声明函数，可能是无效的，这是非常容易出错的地方。
-
-```javascript
-if (false) {
-  function f() {}
-}
-
-f() // 不报错
-```
-
-上面代码的原始意图是不声明函数`f`，但是由于`f`的提升，导致`if`语句无效，所以上面的代码不会报错。要达到在条件语句中定义函数的目的，只有使用函数表达式。
-
-```javascript
-if (false) {
-  var f = function () {};
-}
-
-f() // undefined
-```
-
 ## 函数的属性和方法
 
 ### name 属性