这是我参与8月更文挑战的第16天,活动详情查看: 8月更文挑战
JavaScript继承形式总结一波
1.原型链继承
做法:让父构造函数的实例指向子构造函数的原型对象。
优点:子类可以访问到父类原型上的属性和方法
缺点:
- 子类实例无法向父类构造函数传参种传递参数
- 无法实现多继承
写法:
// 原型链继承
function Perosn() {
this.name = '张三'
}
Perosn.prototype.getname = function () {
return this.name
}
function Son() {}
Son.prototype=new Perosn();
let son=new Son();
console.log(son.getname())
2.构造函数继承
通过改变this指向的形式来执行父类的构造函数,并且可以将我们的参数参入。
优点:
解决了子类构造函数向父类构造函数种传递参数
可以实现多继承(指向多个父类)
缺点:
不能继承原型链上的属性和方法
写法:
// 构造函数继承继承
function Perosn(name) {
this.name = name
}
Perosn.prototype.getname = function () {
return this.name
}
function Son(name, age) {
Perosn.call(this, name);
this.age = age
}
let son = new Son('pp', 12)
console.log(son.name, son.age)
3. 组合继承
通过构造函数形式继承与原型的形式的组合形式。
优点:
函数可以复用
不存在引用属性问题
可以继承属性和方法,并且可以继承原型的属性和方法
缺点:
调用了两次父类,产生了两份实例
// 组合继承
function Perosn(name) {
this.name = name
}
Perosn.prototype.getname = function () {
return this.name
}
function Son(name, age) {
Perosn.call(this, name);
this.age = age
}
Son.prototype = new Perosn();
Son.prototype.constractor = Son;
let son=new Son('pp',12)
console.log(son.name,son.age)
console.log(son.getname())
4.寄生组合继承
通过寄生的方式来修补组合式继承的不足,完美的实现继承
我们可以通过Object.Create()方法来避免产生两次实例
它的原理实际上就是内部有一个新的对象,将新的对象的实例指向父类的原型。
实现一个Object.create:
function CreateObj(obj) {
function FN() {}
FN.prototype=obj;
return new FN();
}
实现寄生组合继承:
function People(name, age) {
this.name = name || 'wangxiao'
this.age = age || 27
}
//父类方法
People.prototype.eat = function () {
return this.name + this.age + 'eat sleep'
}
function Son(name, age) {
People.call(this, name, age)
}
// 继承父类的方法
Son.prototype = Object.create(Son.prototype)
Son.prototype.constractor=Son
let son=new Son(123,123)
console.log(son.age,son.name)
5. ES6的继承
简洁好懂,不需要我们去手动处理原型对象
代码体现:
class Person {
constructor(name, age) {
this.name = name;
this.age = age
}
printName() {
console.log(this.name)
}
}
class Son extends Person {
constructor(name, age) {
super(name, age)
}
}
let son = new Son(123, 123)
console.log(son.name, son.age)
son.printName()
注意super关键字实际上就是实现了构造函数继承,相当于Person.call(this,name)