JavaScript模拟继承

title: JavaScript模拟继承
date: 2018-11-01 23:05:39
tags: [JavaScript]
categories: JavaScript

前言

继承是面向对象思想中的重要概念， JavaScript 在ES 6 中正式引入了继承的概念。
下面介绍一下继承的概念，以及在 ES5 和 ES6 中写继承的方法。

面向对象中的继承

维基百科：

继承（ inheritance）是面向对象软件技术当中的一个概念。如果一个类别B“继承自”另一个类别A，就把这个B称为“A的子类”，而把A称为“B的父类别”也可以称“A是B的超类”。继承可以使得子类具有父类别的各种属性和方法，而不需要再次编写相同的代码。

所以继承是类和类之间的关系，然而JavaScript起初根本没有类的概念，那么为什么也有继承呢？

JavaScript中的继承

要了解JS的继承，就得先了解原型链。该部分可见我的另一篇博客

简单来说，就是每一个对象都有一个__proto__属性，指向该对象的原型prototype，原型的层层指向就形成了一个类似链表的结构（实际上原型的指向是多对一的，所以说成“树”的结构其实更准确一点）称之为原型链。

JavaScript中的继承就是基于原型链实现的。
JS里面没有类，只有函数，所以我们称呼：子类函数、父类函数（比如 Array 与 Object 的关系）
可以这么解释继承：子类函数构造出来的对象直接拥有父类的属性。

那么类到底是什么：能产生对象的东西即为类。
下面的例子中，Human 就可以称为类。person 是一个有自己属性的对象。

function Human(name){
    this.name = name
}
Human.prototype.run = function(){
    ......
}

var person = new Human('Allen')

知道了什么是类，下面就来写继承。
假设我们想让Man类继承Human类。Man 有自己的属性和方法，同时也继承了 Human 的属性和方法。

ES5写法

function Human(name){
     this.name = name   // 自身的属性 
 }
Human.prototype.run = function(){   // 在原型上添加属性或方法
    console.log("我叫"+this.name+"，我在跑")
    return undefined
}

function Man(name){
    Human.call(this, name)  // 使得Man类有了Human类自身的 name 属性，即对象本身属性的添加 
    this.gender = '男'
}

// 要继承Human原型上的属性和方法，最简单的方式是：
// Man.prototype.__proto__ = Human.prototype
// 但是这不符合 ECMA 标准，因此要写下面三行
var f = function(){}
f.prototype = Human.prototype
Man.prototype = new f()

Man.prototype.fight = function(){  // Man类原型上自身的方法
    console.log('糊你熊脸')
}

执行var person = new Man('Allen')
person的原型链：

person.__proto__ === Man.prototype
person.__proto__.__proto__ === Human.prototype
person.__proto__.__proto__.__proto__ === Object.prototype
person.__proto__.__proto__.__proto__.__proto__ === null

ES6写法

class是ES6新增的一个语法糖，实际上它的类型仍然是一个函数。

class Human{
    constructor(name){
        this.name = name
    }
    run(){
        console.log("我叫"+this.name+"，我在跑")
        return undefined
    }
}

// 使用extends关键字来继承
class Man extends Human{  // 等价于 Man.prototype.__proto__ = Human.prototype
    constructor(name){
        super(name)  // 等价于 Human.call(this,name)
        this.gender = '男'
    }
    fight(){
        console.log('糊你熊脸')
    }
}

ES6写法的缺点

ES6写法确实很简洁，但是如果我们想在类的原型上写一个不是函数的属性，这代码就有点奇怪了：

class Human{
    constructor(name){
        this.name = name
    }
    get kind(){
        return '人类'
    }
    run(){
        console.log("我叫"+this.name+"，我在跑")
        return undefined
    }
}

而用ES5的写法就很好理解：

function Human(name){
   this.name = name
}
Human.prototype.kind = '人类'