JS模拟继承

要理解继承，首先我们需要知道“继承”这个技术名词是从哪来的，它诞生于JAVA，也就是面向对象编程，那什么是面向对象？这就说来话长了，其实在这个世界上，编程是分派别的，听起来很夸张，难道我写个代码还要拉帮结派？编程派系其实和历史上的佛教、道教类似，每一派自成一套体系，理论不尽相同。
编程世界就有两大派系，面向对象编程、函数式编程，而“继承”就是面向对象编程体系中的理论。通过查阅资料我们了解到，面向对象编程语言中的“继承”是通过“类型”系统实现的，可是javascript并不是传统的面向对象编程语言，它没有“类型”系统，难道就无法实现“继承”功能了吗？
问题总是有办法解决的，虽然javascript没有“类型”系统，但是它还是通过“原型链”模拟了“继承”的功能。

JS函数实现继承

//创建构造函数Human模拟Human类
function Human(name){
     this.name = name
 } 
//在Human构造函数的原型对象上添加run方法
 Human.prototype.run = function(){
     console.log("我叫"+this.name+"，我在跑")
     return undefined
 }
//创建构造函数Man模拟Man类
 function Man(name){
     Human.call(this, name)
     this.gender = '男'
 }
//在Man构造函数的原型对象上添加fight方法
 Man.prototype.fight = function(){
     console.log('糊你熊脸')
 }
//最后至关重要的一步，将Man类的原型链到Human类的原型上
Man.prototype.__proto__ = Human.prototype // 遗憾的是浏览器不允许你直接操作__proto__

ES5语法实现继承

function Human(name){
     this.name = name
 }
 Human.prototype.run = function(){
     console.log("我叫"+this.name+"，我在跑")
     return undefined
 }
 function Man(name){
     Human.call(this, name)
     this.gender = '男'
 }

 var f = function(){} //把构造函数设为空函数，防止new的时候多出属性
 f.prototype = Human.prototype //将原型赋给新函数原型
 Man.prototype = new f() 

 Man.prototype.fight = function(){
     console.log('糊你熊脸')
 }

ES6语法实现继承

class Human{
     constructor(name){
         this.name = name
     }
     run(){
         console.log("我叫"+this.name+"，我在跑")
         return undefined
     }
 }
 class Man extends Human{
     constructor(name){
         super(name)
         this.gender = '男'
     }
     fight(){
         console.log('糊你熊脸')
     }
 }

两种方法的差异

• 声明

ES5是通过构造函数来声明（模拟）一个“类”，在 ES6中通过关键字class来进行声明。但是ES5的构造函数存在变量提升，但是class声明不存在变量提升。

// es5
console.log(new A()); // A {}
function A(){
   
}

// es6
console.log(new B()); // ReferenceError: B is not defined
Class B {
    constructor() {

    }
}

• 继承

ES5通过修改原型链进行继承，ES6通过关键字extend进行继承，但是class只是语法糖，ES6语法的“类”本质上还是通过函数来实现的。

class Person {
    constructor(name){
        this.name = name;
    }
    sayHello(){
        return 'Hi, I am ' + this.name;
    } 
}

typeof Person; //'function'