关于js中的继承

本文仅讨论如何通过原型链实现继承
13年在某外企的时候，做的组件库，就是用的原型链继承，大概就是super类定义了一些基本的方法，比如show,hide，然后子类去继承它并扩充自己的功能
怎么去实现继承呢，其实主要是去继承父对象的变量，以及原型链的方法
1.关于怎么去继承变量，本文用到的是call，当然也可以用apply和bind，不展开
2.继承原型链，使用的是Object.create

1.call

先普及一下call是怎么工作的,假如有以下的代码

function show(){
    console.log('this:', this)
    console.log('我的age是：'+this.age)
}

直接执行时，得到如下结果

image.png

从结果很容易看到，当前的this是window，window下没有age，所以打印undefined
接下来我们定义一个对象，并使用call改变上下文，看看最后执行的结果是什么

function show(){
    console.log('this:', this)
    console.log('我的age是：'+this.age)
}
var chenbin = {
    age:'30'
}
show.call(chenbin)

看看结果

image.png

从结果看出，当前this，是chenbin这个对象，所以，这边可以理解成chenbin这个对象拥有了show的功能

接下来直接上代码,看看如何实现继承

  var Parent = function(name, age) {
    this.name = name
    this.age = age
    this.getName = function(){
        console.log(this.name)
    }
  }
  Parent.prototype.getAge=function(){
    console.log(this.age)
  }
  var zzh = new Parent('张家辉',46)

  var Child = function(name,age,sex,job){
        Parent.call(this,name,age)
        this.sex = sex
        this.job = job
        this.showJob = function(){
            console.log(this.job)
        }
  }
  Child.prototype = Object.create(Parent.prototype)
  Child.prototype.showSex = function(){
    console.log(this.sex)
  }
  var daughter = new Child('张美娜', 22,'女','学生')

首先定义了一个Parent,它包含了三个属性，name,age,getName,原型链定义了getAge,我先看看初始化的对象zzh是一个什么对象

image.png

从结果来看，它拥有age,name,getName三个属性，原型链上有一个方法getAge
再看看实例化的对象daughter

image.png
可以看到它有age,getName,job,name,sex,showJob几个属性，其中的name,age,getName,来自于父组件的实现，sex,job,showJob来自于自己的实现
，在它自己的原型链上上有一个showSex,来自于自己的实现，原型链的原型链上有一个getAge，来自于父组件的原型链实现，由此可见，我们基本实现了js的继承，其中的属性继承就是来自于构造函数中的这句话

Parent.call(this,name,age)

原型链继承就是来自于下面这句代码

Child.prototype = Object.create(Parent.prototype)

综上，我们通过call和Object.create实现了js中的继承