本文仅讨论如何通过原型链实现继承
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)
}
直接执行时,得到如下结果
从结果很容易看到,当前的this是window,window下没有age,所以打印undefined
接下来我们定义一个对象,并使用call改变上下文,看看最后执行的结果是什么
function show(){
console.log('this:', this)
console.log('我的age是:'+this.age)
}
var chenbin = {
age:'30'
}
show.call(chenbin)
看看结果
从结果看出,当前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是一个什么对象
从结果来看,它拥有age,name,getName三个属性,原型链上有一个方法getAge
再看看实例化的对象daughter
可以看到它有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中的继承