你不知道的JavaScript（上）this和对象原型（三）

第四章  混核对象“类”

1、理论

面向对象编程强调的是数据和操作数据的行为本质上是互相关联的。实例化，继承，多态性

javascript中只有对象，并不存在可以被实例化的“类”。一个对象并不会被复制到其他对象，他们会被关联起来，由于其他语言中类表现出来的都是复制行为，因此js开发者也想出一个方法来模拟类的复制行为——混入。混入有两种类型：显式和隐式。

2、显式混入

 // 非常简单的 mixin(..) 例子 :
 function mixin( 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!"
 );
 }
 } );

注意：

我们处理的已经不再是类了，因为在 JavaScript 中不存在类，Vehicle 和 Car 都是对象，供我们分别进行复制和粘贴。

Vehicle.drive.call( this ) 。这就是我所说的显式多态。

由于 Car 和Vehicle 中都有 drive() 函数，为了指明调用对象，我们必须使用绝对（而不是相对）引用。我们通过名称显式指定 Vehicle 对象并调用它的 drive() 函数。

但是如果直接执行 Vehicle.drive() ，函数调用中的 this 会被绑定到 Vehicle 对象而不是Car 对象（参见第 2 章），这并不是我们想要的。因此，我们会使用 .call(this) 来确保 drive() 在 Car 对象的上下文中执行。

显示混入模式的另一种变体“寄生继承”，既是显示也是隐式。

// “传统的 JavaScript 类”Vehicle
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!" );
};
// “寄生类” Car
function Car() {
// 首先，car 是一个 Vehicle
var car = new Vehicle();
// 接着我们对 car 进行定制
car.wheels = 4;
// 保存到 Vehicle::drive() 的特殊引用
var vehDrive = car.drive;
// 重写 Vehicle::drive()
car.drive = function() {
vehDrive.call( this );
console.log(
"Rolling on all " + this.wheels + " wheels!"
);
return car;
}
var myCar = new Car();
myCar.drive();
// 发动引擎。
// 手握方向盘！
// 全速前进！

总的来说，不推荐js模拟类。