第4章 ：混合对象“类”

• 本章要介绍和类相关的面相对象编程的知识。首先会介绍面相对象类的设计模式：实例化(instantiation)、继承(inheritance)、多态(polymorphism)。
• 但由于这些概念上无法直接对应到JavaScript的对象机制，因此很多JavaScript开发者使用了一些比如mixin等解决方法来实现。

4.1 类理论

• 类/继承，或者说面向对象，是用来描述代码的一种组织结构形式，它是一种软件对真实世界的建模方法。
• 面向对象编程强调的是数据和操作数据的行为，本质是是相互关联的。因此，面相对象编程推崇的是，把数据以及和它相关的行为封装起来。这在正式的计算机科学中被称为数据结构。
• 举例：我们在编程中要描述一个数据，然后我们会定义一个变量，这个值是一个字符串，这也就是数据。但我们在使用的过程之，往往关心的不是数据是什么，而是可以对数据做什么，也就是应用再数据上的行为（比如计算数据长度啊、追加数据啊、搜索数据中的字符啊等等）。因此这些行为被设计成了String类。
• 再来看一个例子：“汽车”可以被看做“交通工具”的一种，对于这种关系，我们在软件中可以定义Vehicle类和Car类来进行建模。
• Vehicle类的定义，可能包含推进器(比如引擎)、载人能力等。它包含所有类型的交通工具，不管是飞机、汽车或者火车。
• 而Car类继承了Vehicle类，以通用的Vehicle类作为基础进行特殊化定义，比如加上汽车的车辆识别码等。
• 虽然Vehicle和Car会定义相同的方法，但实例中的数据可能是不同的，这就是类、继承和实例化。
• 类的另一个核心概念是多态，是说父类的通用行为可以被子类用更特殊的行为进行重写。

4.1.1 “类”设计模式

• 有人可能从来没把类作为设计模式来看，反而更熟悉的是比如观察者模式、工厂模式、单例模式等其他模式。但是这些高级设计模式，都以面向对象类的基础上实现的。
• 可能你还听过“过程化编程”，这种代码只包含过程调用，没有高层的抽象。
• 除此之外，如果有函数式编程的开发经验，会知道类也是非常常用的设计模式，但类不是必须的编程基础，而是一种可选的代码抽象。而在其他编程语言比如Java中，并不给你选择的机会，万物皆对象。

4.1.2 JavaScript中的“类”

• 在软件设计中，类是一种可选的模式。由于许多开发者都非常喜欢面向类的软件设计，JavaScript提供了语法糖来满足对于类设计模式的最普片需求，比如ES6新增了比如class关键字等，但javascript中的“类”和和其他语言中的类并不一样。

4.2 类的机制

• 在许多面向类的语言中，内置会提供Stack类，这是一种“栈”数据结构，同时会提供一些公有的方法。但实际上我们并不是直接操作Stack，Stack类仅仅是一个抽象的表示，它本身并不是一个“栈”。使用的时候，通常也需要先实例化Stack类，然后才能对它进行操作。

4.2.1 建造

• 类和实例的概念源于房屋建造。
  1. 在建造之前，建筑师通常会规划一个建造蓝图来描绘建筑的特性：宽、高、几室几厅、多少个窗户以及窗户的位置等。但在这个阶段，并不关心建筑会被建在哪，也不关心会建造多少个这样的建筑，甚至不用关心建筑中的内容（比如家具、壁纸、吊灯等）。建筑蓝图只是建筑计划，它们并不是真正的建筑。
  2. 接下来，需要一个建筑工人按照蓝图建造建筑，把规划好的特性从蓝图中复制到现实世界的建筑中。
  3. 完成后，建筑就成为了蓝图的物理实例。如果需要建筑多套房子，只需把工作都重复一遍，再创建一份副本。
• 建筑和蓝图之间的关系是间接的。蓝图只是抽象描绘了建筑的结构，比如蓝图只表示门在哪，但并不是真正的门，如果想打开一扇门，那就必须接触真实的建筑才行。
• 一个类就是一张建造蓝图，为了获得真正的建筑，我们必须按照类来建造(实例化)一个东西，而这个东西通常被称为实例。

4.2.2 构造函数

• 实例是由一个特殊的类方法构造的，这个类方法的方法名通常和类名相同，称为构造函数。
• 构造函数大多情况下，需要用new来调用，构造函数的主要任务，就是初始化实例需要的所有信息。

4.3 类的继承

• 在面向类的语言中，当一个类继承另一个类时。后者通常被称为“子类”，前者会被称为“父类”。
• 从术语来看，显然是类比父母和孩子。在现实中，孩子会从父母继承许多基因特性，但通常孩子不会和父母一模一样，即便外貌长相会类似，但性格行为却大不相同，因为孩子是一个独一无二的存在。
• 同理，在程序中，相对于父类来说，子类也是一个独立个体。子类会包含父类行为的原始副本，但也可以重写所有继承的行为甚至定义新的行为。

注意：有必要说明一下，这里说的父类和子类不是实例，而是像上文说得建造蓝图一样。我们应当把父类和子类称为父类DNA和子类DNA，需要根据这些DNA来创建(实例化)一个人，我们才拥有一个真实的实例。

4.3.1 多态

• 当子类继承父类，引用父类原始的方法时，这里被称为多态（相对多态）。

说明：实际上多态是任何方法都能引用继承层级中上层的类的方法。之所以说是“相对”，是因为当前子类引用的是父类的方法，而实际上还可以引用祖先类(superclass)的方法。

• 多态并不表示子类和父类有关联，子类得到的只是父类的一个副本。类的继承其实就是复制。

4.3.2 多重继承

• 有些面向类的语言允许子类继承多个“父类”，多重继承意味着所有父类的定义都会被复制到子类中。
• 从表面看，多继承可以把许多功能组合在一起。然而这个机制也会带来很多复杂的问题。比如，当子类调用两个父类同名的方法时，就不知道该怎么处理了。
• JavaScript本身也不提供“多重继承”功能，但也可以用各种办法来实现多重继承。

4.4 混入

• 在继承或实例化时，JavaScript的对象机制并不会自动执行复制行为。换句话说，JavaScript中只有对象，不存在可以被实例化的“类”。不会复制对象，它们只是被关联起来。
• 由于在其他语言中，类表现出来的都是复制行为，因此JavaScript开发者也想出了一个方法来模拟类的复制行为，就是混入。
• 有两种类型的混入：显式和隐式。

4.4.1 显式混入

• 之前提到的Vehicle和Car。接下来，我们用JavaScript手动实现复制功能。这个功能在许多库和框架中被称为extend()，但是为了方便理解我们称之为minxin()：

function minxin(sourceOBj,targetObj){
    for(var key in sourceObj){
        if(!(key in targetObj)){
            targetObj[key] = sourceObj[key];
        }
    }
    return targetObj;
}
var Vehicle = {
    engines : 1,
    ignition: function(){
        console.log('Turning on my engine.');
    },
    drive : function(){
        this.ignition();
        console.log('Steering and moving forward!');
    }
};
var Car = mixin(Vehicle,{
    wheels : 4,
    drive : function(){
        Vehicle.drive.call(this);
        console.log(
            'Rolling on all' + this.wheels + ' wheels!'
        );
    }
};

• Car中就拥有一份Vehicle属性和函数的副本了，但注意：复制的是函数的引用。
• 再说多态：Vehicle.drive.call(this)就是显示多态，清楚证明调用的是父类还是祖先类；inherited:drive()就是相对多态。
• mixin()的工作原理：它会遍历sourceObj的属性，如果在targetObj没有这个属性就会进行复制。
• 显式混入模式的另一种变体被称为“寄生继承”：

function Vehicle(){
    this.engines = 1;
}
Vehicle.prototype.ignition = function(){
    console.log('Turning on my engine.');
}
Vehicle.prototype.drive = function(){
    this.ignition();
    console.log('Steering and moving forward!');
};
function Car(){
    var car = new Vehicle();
    car.wheels = 4;
    var vehDrive = car.drive;
    car.drive = function(){
        vehDrive.call(this);
        console.log('Rolling on all ' + this.wheels + ' wheels!');
    }
    return car;
}
var myCar = new Car();
myCar.drive();

4.4.2 隐式混入

• 隐式混入和显式伪多态很像，但同样拥有同样的问题：不是真正的对象复制，而是复制引用。

var Something = {
    cool : function(){
        this.greeting = 'Hello World!'
        this.count = this.count ? this.count + 1 : 1;
    }
};
Something.cool();
Something.greeting; //'Hello World'
Something.count;    //1
Another = {
    cool : function(){
        Something.cool.call(this);
    }
};
Another.cool();
Another.greeting;   // 'Hello World'
Another.count;  // 1

• 如果在构造函数调用使用Something.cool.call(this)，最终的结果是Something.cool()中的赋值操作都会应用再Another对象上而不是Something对象上。
• 通常来说，应该尽量避免使用这一的结构，以保证代码的整洁和可维护性。

4.5 小结

• 类是一种设计模式，许多语言提供了面向类软件设计的原生语法。JavaScript也有类似的语法，但和其他语言中的类完全不同。
• 类意味着复制。传统的类被实例化的时候，它的行为会被复制到实例中。类被继承时，行为也会被复制到子类中。
• 多态看起来似乎是从子类引用父类，但本质上引用的其实是复制的结果。
• JavaScript不会像类那样自动创建对象的副本。但通过混入模式可以模拟类的复制行为，但通常会产生丑陋且脆弱的语法，这会让代码更加难懂并且难以维护。
• 显式混入实际上无法完全模拟类的复制行为，因为对象只是复制引用，无法复制被引用的对象或者函数本身。
• 总的来说，在JavaScript中模拟类是得不偿失的，可能会买下更多隐患。