1.原型链继承
function Parent(sex) {
this.sex = sex ? sex : 'men'
}
Parent.prototype.getSex = function() {
return this.sex
}
function Son(name) {
this.name = name
}
Son.prototype = new Parent()
var son1 = new Son('奥特曼')
console.log(son1.getSex())
关键:把子类的原型指向父类的实例,从而继承父类的私有属性和原型属性
优点:父类新增的原型属性和方法,子类实例都能访问的到,简单易用
缺点:1无法实现多继承
2.创建子类实例的时候没办法向父类构造函数传参
3.所有子类共享父类的属性,(比如某个属性是一个数组,一个子类对其进行了修改,导致其他子类访问的也发生改变)
2.借用构造函数的方法师实现
function Parent(sex) {
this.sex = sex;
}
Parent.prototype.getSex = function() {
return this.sex;
}
function Son(sex, name) {
Parent.call(this, sex)
this.name = name
}
var son = new Son('men', '洛克王国')
console.log(son)
关键:在子类的构造函数中使用call 或者apply 调用父类的构造函数实现父类私有属性
优点:1.创建子类实例的时候可以向父类传参
2,可以实现多继承(在子类构造函数中调用多个父类构造函数)
3. 解决了原型链继承中子类实例共享父类实例的引用数据类型属性的问题(即使父类中有引用数据类型,在创建子类实例时,都会重新调用父类的构造函数重新创建一个引用数据类型的属性,并且从新申请地址空间)
缺点:1.每次创建子类的实例都要调用一次父类的构造函数,影响性能
2.自能继承父类的私有属性,没有继承父类的原型
var son = new Son('men', '洛克王国')
var son1 = new Son('women', '怪兽')
console.log(son, son1)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020091619361187.png#pic_center)
//组合式继承
function Parent(sex) {
this.sex = sex;
}
Parent.prototype.getSex = function() {
return this.sex
}
function Son(name, sex, age) {
Parent.call(this, sex)
this.name = name
this.age = age
}
Son.prototype = Object.create(Parent.prototype)
Son.prototype.constructor = Son
var son = new Son('奥特曼', 'men', 12)
console.log(son)
console.log(son.getSex())
关键:通过父类的构造函数,继承父类的属性并保留传参的功能,通过Object.create(Parent.prototype)来创建继承了父类原型的对象,并把这个对象赋给子类的原型,这样既保证了父类构造函数不会执行两次,也继承了父类的原型属性
优点:1.创建子类时可以向父类传参
2.可以实现多继承
3.解决了原型链继承中子类实例共享父类实例的引用数据类型属性的问题(即使父类中有引用数据类型,在创建子类实例时,都会重新调用父类的构造函数重新创建一个引用数据类型的属性,并且从新申请地址空间)
4.父类构造函数只执行一次
es6class实现继承
class Parent {
constructor(sex) {
this.sex = sex;
}
showSex() {
console.log('这是父类的方法')
}
}
class Son extends Parent {
constructor(name, sex, age) {
super(sex)
this.name = name;
this.age = age
}
showSex() {
console.log('这是子类的方法')
}
}
const b = new Son('奥特曼', 'men', 15)
console.log(b)
b.showSex()
关键:使用extends关键字实现继承父类的原型属性,调用super来继承父类的实例属性,其保留传参 的优点
优点:简单易用,不用自己来修改原型链来完成
将其转换成ES5 代码如下
var Parent = (function() {
function Parent(sex) {
this.sex = sex;
}
Parent.prototype.showSex = function() {
console.log('我是父类的方法')
}
return Parent
})()
var Son = (function(_super) {
function Son(name, age, sex) {
var _this = _super.call(this, sex) || this
_this.name = name
_this.age = age
return _this
}
Son.prototype.showSex = function() {
console.log('我是子类的方法')
}
return Son;
})(Parent)
var son = new Son('奥特曼', 12, 'women')
console.log(son)