第六章：类工厂

类与继承在javascript的出现，说明Javascript已经达到大规模开发的门槛了，在之前是ECMAScript4,就试图引入类，模块等东西，但由于过分引入太多的特性，搞得javascript乌烟瘴气，导致被否决。不过只是把类延时到ES6.到目前为止，javascript还没有正真意义上的类。不过我们可以模拟类，曾近一段时间，类工厂是框架的标配，本章会介绍各种类实现，方便大家在自己的框架中或选择时自己喜欢的那一类风格。

1.javascript对类的支持

在其它语言中 ，类的实例都要通过构造函数new出来。作为一个刻意模仿java的语言。javascript存在new操作符，并且所有函数都可以作为构造器。构造函数与普通的方法没有什么区别。浏览器为了构建它繁花似锦的生态圈，比如Node,Element,HTMLElement，HTMLParagraphElement，显然使用继承关系方便一些方法或属性的共享，于是javascript从其它语言借鉴了原型这种机制。PRototype作为一个特殊的对象属性存在于每一个函数上。当一个函数通过new操作符new出其“孩子”——“实例”，这个名为实例的对象就拥有这个函数的Prototype对象所有的一切成员，从而实现实现所有实例对象都共享一组方法或属性。而javascript所谓的“类”就是通过修改这个Prototype对象，以区别原生对象及其其它定义的“类”。在浏览器中，node这个类基于Object修改而来的，而Element则是基于Node，而HTMLElement又基于Element....相对我们的工作业务，我们可以创建自己的类来实现重用与共享。

    function A(){    }    A.prototype = {        aa:"aa",        method:function(){        }    };    var a = new A;    var b = new A;    console.log(a.aa === b.aa);    console.log(a.method === b.method)

一般地，我们把定义在原型上的方法叫原型方法，它为所有的实例所共享，这有好也有不好，为了实现差异化，javascript允许我们直接在构造器内指定其方法，这叫特权方法。如果是属性，就叫特权属性。它们每一个实例一个副本，各不影响。因此，我们通常把共享用于操作数据的方法放在原型，把私有的属性放在特权属性中。但放于this上，还是让人任意访问到，那就放在函数体内的作用域内吧。这时它就成为名副其实的私有属性。

    function A() {        var count = 0;        this.aa = "aa";        this.method = function() {            return count;        }        this.obj = {}    }    A.prototype = {        aa:"aa",        method:function(){        }    };    var a = new A;    var b = new A;    console.log(a.aa === b.aa);//true 由于aa的值为基本类型，比较值    console.log(a.obj === b.obj) //false 引用类型，每次进入函数体都要重新创建，因此都不一样。    console.log(a.method === b.method); //false

特权方法或属性只是只是遮住原型的方法或属性，因此只要删掉特权方法，就能方法到同名的原型方法或属性。

    delete a.method;    delete b.method;    console.log(a.method === A.prototype.method);//true    console.log(a.method === b.method); //true

用java的语言来说，原型方法与特权方法都属性实例方法，在java中还有一种叫类方法与类属性的东西。它们用javascript来模拟也非常简单，直接定义在函数上就行了。

    A.method2 = function(){} //类方法    var c = new A;    console.log(c.method2); //undefined

接下来，我们看下继承的实现，上面说过，Prototype上有什么东西，它的实例就有什么东西，不论这个属性是后来添加的，还是整个Prototype都置换上去的。如果我们将这个prototype对象置换为另一个类的原型，那么它就轻而易举的获得那个类的所有原型成员。

    function A() {};    A.prototype = {        aaa : 1    }    function B() {};    B.prototype =  A.prototype;    var b = new B;    console.log(b.aaa); //=> 1;    A.prototype.bb = 2;    console.log(b.bb) //=> 2;

由于是引用着同一个对象，这意味这，我们修改A类的原型，也等同于修该了B类的原型。因此，我们不能把一个对象赋值给两个类。这有两种办法，

方法1：通过for in 把父类的原型成员逐一赋给子类的原型方法2是：子类的原型不是直接由父类获得，先将父类的原型赋值给一个函数，然后将这个函数的实例作为子类的原型。

方法一，我们通常要实现mixin这样的方法，有的书称之为拷贝继承，好处就是简单直接，坏处就是无法通过instanceof验证。Prototype.js的extend方法就用来干这事。

    function extend (des, source) { //des = destination        for (var property in source)            des[property] = source[property];        return des;    }

方法二，就在原型上动脑筋，因此称之为原型继承。下面是个范本

    function A() {};    A.prototype = {        aa:function(){            alert(1)        }    }    function bridge() {    };    bridge.prototype = A.prototype;    function B() {}    B.prototype = new bridge();    var a = new A;    var b = new B;    console.log(a == b) //false 证明成功分开原型    console.log(A.prototype == B.prototype) //true 子类共享父类的原型方法    console.log(a.aa === b.aa); //为父类动态添加新的方法    A.prototype.bb = function () {        alert(2)    }    //true，继承父类的方法    B.prototype.cc = function (){        alert(3)    }    //false 父类未必有子类的new实例    console.log(a.cc === b.cc)    //并且它能够正常通过javascript自带的验证机制instanceof    console.log(b instanceof A) ;//true    console.log(b instanceof B) ; //true

方法二能通过instanceof验证，es5就内置了这种方法来实现原型继承，它就是Object.create,如果不考虑第二个参数，它约等于下面的代码。

    Object.create = function (o) {        function F() {}        F.prototype = o;        return new F();    }

上面的方法，要求传入一个父类的原型作为参数，然后返回子类的原型

不过，我们这样还是遗漏了一点东西——子类不只是继承父类的遗产，还应该有自己的东西，此外，原型继承并没有让子类继承父类的成员与特权成员。这些我们都得手动添加，如类成员，我们可以通过上面的extend方法，特权成员我们可以在子类构造器中，通过apply实现。

    function inherit(init, Parent, proto){        function Son(){            Parent.apply(this, argument); //先继承父类的特权成员            init.apply(this, argument); //在执行自己的构造器        }    }    //由于Object.create是我们伪造的，因此避免使用第二个参数    Son.prototype = Object.create(Parent.prototype,{});    Son.prototype.toString = Parent.prototype.toString; //处理IEbug    Son.prototype.valueOf = Parent.prototype.valueOf; //处理IEbug    Son.prototype.constructor = Son; //确保构造器正常指向，而不是Object    extend(Son, proto) ;//添加子类的特有的原型成员    return Son;

下面，做一组实验，测试下实例的回溯机制。当我们访问对象的一个属性，那么他先寻找其特权成员，如果有同名就返回，没有就找原型，再没有，就找父类的原型...我们尝试将它的原型临时修改下，看它的属性会变成那个。

    function A(){    }    A.prototype = {        aa:1    }    var a = new A;    console.log(a.aa) ; //=>1    //将它的所有原型都替换掉    A.prototype = {        aa:2    }    console.log(a.aa); //=>1    //于是我们想到每个实例都有一个constructor方法，指向其构造器    //而构造器上面正好有我们的原型，javascript引擎是不是通过该路线回溯属性呢    function B(){    }    B.prototype = {        aa:3    }    a.constructor = B;    console.log(a.aa) //1 表示不受影响

因此类的实例肯定通过另一条通道进行回溯，翻看ecma规范可知每一个对象都有一个内部属性[[prototype]],它保存这我们new它时的构造器所引用的Prototype对象。在标准浏览器与IE11里，它暴露了一个叫__proto__属性来访问它。因此，只要不动__proto__上面的代码怎么动，a.aa始终坚定不毅的返回1.

再看一下，new时操作发生了什么。

1.创建了一个空对象 instance2.instance.__proto__ = intanceClass.prototype3.将构造函数里面的this = instance4.执行构造函数里的代码5.判定有没有返回值，没有返回值就返回默认值为undefined,如果返回值为复合数据类型，则直接返回，否则返回this于是有了下面的结果。

    function A(){        console.log(this.__proto__.aa); //1        this.aa = 2    }    A.prototype = {aa:1}    var a = new A;    console.log(a.aa)    a.__proto__ = {        aa:3    }    console.log(a.aa) //=>2    delete a. aa; //删除特权属性，暴露原型链上的同名属性    console.log(a.aa) //=>3

有了__proto__，我们可以将原型设计继承设计得更简单，我们还是拿上面的例子改一改，进行试验

    function A() {}    A.prototype = {        aa:1    }    function bridge() {}    bridge.prototype = A.prototype;    function B(){}    B.prototype = new bridge();    B.prototype.constructor = B;    var b = new B;    B.prototype.cc = function(){        alert(3)    }    //String.prototype === new String().__proto__  => true    console.log(B.prototype.__proto__ === A.prototype) //true    console.log(b.__proto__ == B.prototype); //true     console.log(b.__proto__.__proto__ === A.prototype); //true 得到父类的原型对象

因为b.__proto__.constructor为B，而B的原型是从bridge中得来的，而bride.prototype = A.prototype,反过来，我们在定义时，B.prototype.__proto__ = A.prototype,就能轻松实现两个类的继承.

__proto__属性已经加入es6,因此可以通过防止大胆的使用

2.各种类工厂的实现。

上节我们演示了各种继承方式的实现，但都很凌乱。我们希望提供一个专门的方法，只要用户传入相应的参数，或按照一定简单格式就能创建一个类。特别是子类。

由于主流框架的类工厂太依赖他们庞杂的工具函数，而一个精巧的类工厂也不过百行左右

相当精巧的库，P.js

https://github.com/jiayi2/pjs

使用版：https://github.com/jiayi2/factoryjs

这是一个相当精巧的库，尤其调用父类的同名方法时，它直接将父类的原型抛在你面前，连_super也省了。

    var P = (function(prototype, ownProperty, undefined) {  return function P(_superclass /* = Object */, definition) {    // handle the case where no superclass is given    if (definition === undefined) {      definition = _superclass;      _superclass = Object;    }    // C is the class to be returned.    //    // When called, creates and initializes an instance of C, unless    // `this` is already an instance of C, then just initializes `this`;    // either way, returns the instance of C that was initialized.    //    //  TODO: the Chrome inspector shows all created objects as `C`    //        rather than `Object`.  Setting the .name property seems to    //        have no effect.  Is there a way to override this behavior?    function C() {      var self = this instanceof C ? this : new Bare;      self.init.apply(self, arguments);      return self;    }    // C.Bare is a class with a noop constructor.  Its prototype will be    // the same as C, so that instances of C.Bare are instances of C.    // `new MyClass.Bare` then creates new instances of C without    //