javascript之模拟类继承

[laizimo]

前言

ES6时代的来临，使得类继承变得如此的圆滑。但是，你有思考过ES6的类继承模式吗？如何去实现它呢？

类继承对于JavaScript来说，实现方式与Java等类语言大不相同。熟悉JavaScript的开发者都清楚，JavaScript是基于原型模式的。那么，在es6没有出来之前，js是如何继承的呢？这是一个非常有意思的话题。希望带着疑问看文章，或许对你的提升会更加巨大。如果你喜欢我的文章，欢迎评论，欢迎Star~。欢迎关注我的github博客

正文

让我来——构造函数

其实，js模拟一个类的方式非常的简单——构造函数。或许，这是所有人都在普遍使用的方式。我们先来看一个例子：

function Person(name){
      this.name = name;
}

Person.prototype.sayName = function(){
     console.log(this.name);
}

const person = new Person('zimo');

person.sayName();       //zimo

这里通过构造函数模拟出来的类，其实和其他语言的类行为上是基本一致的，唯一的区别就是它不具备私有方法。而且，他们同样是通过new操作符来进行实例化的，但是js的new操作与其它语言的new操作又会有所不同。比方说：

const person = Person('zimo');
console.log(person)    //undefined

构造函数前面没有加new的情况下，会导致这个对象没有返回值来进行赋值。但是，在类语言中，在类名前不使用new是会报错的。

下面，我们应该进一步来看一下js的new操作符的原理，以及实现。

你懂我——new操作符

new方法原理：

1. 创建一个新的对象
2. 将对象的__proto__指向构造函数的原型
3. 调用构造函数
4. 返回新对象

js代码实现部分：

const person = new Person(args);
//相当于
const person = Person.new(args);
Function.prototype.new = function(){
       let obj = new Object();
       obj.__proto__ = this.prototype;
       const ret = this.apply(obj, arguments);
       return (typeof ret == 'object' && ret) || obj;
}

到此为止，js如何去模拟类，我们已经讲述完了。接下来，我们应该看一下如何去实现类似与其他语言的类继承模式。

尽管ES6已经对extends关键词进行了实现，但是原理性的知识，我们应该需要明白。

初印象——类继承

先来看一个场景，无论是狗或者是猫，它们都有一个共同的类animal，如图：

在真实开发中，我们必须去实现类与类之间的继承关系，不然的话，我们就必须重复地去命名构造函数（这样的方式是丑陋的）。

所以，像上述的场景，开发过程中多的数不胜数，但是本质都是不变的。接下来，那我们以一个例子来做说明，并且明白大致是如何去实现的。

例子：我们需要去构造一个交通工具类，该类具备属性：轮子、速度和颜色（默认为黑），它还具备方法run(time)返回距离。之后，我们还需要去通过该类继承一个‘汽车’类和一个‘单车’类。

如图：

实现：

function Vehicle(wheel, speed){      //首先构造一个交通工具类
    this.wheel = wheel;
    this.speed = speed;
    this.color = 'black';
}

Vehicle.prototype.run = function(time){    //在它的原型上定义方法
    return this.speed * time;
}

function Car(wheel, speed, brand){     //通过在汽车类中去调用父类
    Vehicle.call(this, wheel, speed);
    this.brand = brand;
}

Car.prototype = new Vehicle();      //将汽车类的原型指向交通工具的实例

function Bicycle(wheel, speed, owner){        //同样，构造一个自行车类，在其中调用父类
    Vehicle.call(this, wheel, speed);
    this.owner = owner;
}

Bicycle.prototype = new Vehicle();             //将其原型指向交通工具实例

const car = new Car(4, 10, 'baoma');

const bicycle = new Bicycle(2, 5, 'zimo');

console.log(car.run(10));   //100

console.log(bicycle.run(10));   //50

这样子，就实现了类的继承。

大致的思路是：在继承类中调用父类，以及将继承类的原型赋值为父类的实例。

但是，每次实现如果都是这样子的话，又会显得非常的累赘，我们并没有将可以重复使用的部分。因此，我们需要将不变的部分进行封装，封装成一个方法，然后将可变的部分当中参数传递进来。

接下来，我们来分析一下类继承的封装方法extend。

真实的我——继承封装

首先，我们来看一下，我们需要实现怎样的继承：

function Animal(name){         //构造一个动物类
  this.name = name;
}
Animal.prototype.sayName = function(){    
  console.log('My name is ' + this.name);
}

/**
extends方法其中包含子类的constructor、自身的属性、和来自父元素继承的属性
*/

var Dog = Animal.extends({                            //使用extends方法来实现类的封装
  constructor: function(name, lan){
    this._super(name);
    this.lan = lan
  },
  sayname: function(){
    this._super.sayName();
  },
  sayLan: function(){
   console.log(this.lan);
  }
});

var animal = new Animal('animal');
var dog = new Dog('dog', '汪汪汪');

animal.sayName();    //My name is animal
dog.sayName();    // My name is dog
dog.sayLan();    // '汪汪汪'

其中的extend方法是我们需要去实现的，在实现之前，我们可以来对比一下ES6的语法

class Animal {
  constructor(name){
    this.name = name;
  }

  sayName(){
    console.log('My name is ' + this.name);
  }
}

/**
对比上面的extend封装和es6的语法，我们会发现，其实差异并没有太大
*/

class Dog extends Animal{
  constructor(name, lan){
    super(name);

    this.lan = lan;
  }

  sayName(){
    super.sayName();
  }

  sayLan(){
    console.log(this.lan);
  }
}

其实，很多地方是相似的，比方说super和this._super。这个对象其实是看起来是父构造函数，因为他可以直接调用this._super(name)，但它同时还具备父构造函数原型上的函数，因此我们可以把它称为父包装器。但是，必须保证的是_super中的函数对象上下文必须都是指向子构造函数的。

使用一张简陋的图来表示整个关系的话，如图：

下面我们来实现一下这个extend方法。

Function.prototype.extend = function(props){
  var Super = this;

  var Temp = function(){};

  Temp.prototype = Super.prototype;

  var superProto = new Temp();   //去创建一个指向Super.prototype的实例

  var _super = function(){   //创建一个父类包装器
    return Super.apply(this, arguments);
  }

  var Child = function(){
    if(props.constructor){
      props.constructor.apply(this, arguments);
    }

    for(var i in Super.prototype){
      _super[i] = Super.prototype[i].bind(this);   //确保Super的原型方法拷贝过来时，this指向Child构造函数
    }

  }

  Child.prototype = superProto;               //将子类的原型指向父类的纯实例
  Child.prototype._super = _super;                //构建一个引用指向父类的包装器

  for(var i in props){
    if( i !== 'constructor'){
      Child.prototype[i] = props[i];   //将props中方法放到Child的原型上面
    }
  }

  return Child;
}

总结

继承的一些内容就分析到这里。其实，自从ES6标准出来之后，类的继承已经非常普遍了，因为真心好用。但是，也是越来越有人不懂得如何去理解这个继承的原理了。其实ES6中的继承的实现，也是挺简单的。

如果你对我写的有疑问，可以评论，如我写的有错误，欢迎指正。你喜欢我的博客，请给我关注Star~呦。大家一起总结一起进步。欢迎关注我的github博客

[laizimo]

从本质认识JavaScript的原型继承和类继承