在JavaScript中实现继承有多种方法,常见的有原型链继承、借用构造函数继承、组合继承和寄生组合式继承。下面会一一介绍这些方法。
JavaScript实现继承的4种方法总结
在JavaScript中实现继承有多种方法,常见的有原型链继承、借用构造函数继承、组合继承和寄生组合式继承。下面会一一介绍这些方法。
1. 原型链继承
原型链继承是JavaScript中最常见的继承方式,它的实现方式非常简单。我们可以通过将子类(派生类)的原型对象(prototype)设置为父类(基类)的实例对象,从而实现继承。
function Parent() {
this.name = 'parent';
this.age = 30;
}
Parent.prototype.sayHello = function() {
console.log('Hello, I am ' + this.name);
}
function Child() {}
Child.prototype = new Parent();
var child = new Child();
console.log(child.name); // "parent"
child.sayHello(); // "Hello, I am parent"
在上面的代码中,我们通过将Child的prototype属性设置为Parent类的实例对象,实现了Child类继承Parent类的属性和方法。
但是采用原型链继承有一个缺点,如果子类(派生类)修改了继承来的属性或方法,那么也会影响到父类(基类)的同样的属性或方法。
2. 借用构造函数继承
借用构造函数继承是通过在子类中调用父类的构造函数来实现继承的。这样做的好处是可以避免原型链继承的缺点,但是它也有一个缺点,那就是不能继承父类原型对象中的属性和方法。
function Parent() {
this.name = 'parent';
this.age = 30;
}
function Child() {
Parent.call(this);
this.sex = 'male';
}
var child = new Child();
console.log(child.name); // "parent"
console.log(child.sex); // "male"
console.log(child.age); // 30
var parent = new Parent();
console.log(parent.name); // "parent"
console.log(parent.age); // 30
console.log(parent.sex); // undefined
在上面的代码中,我们使用了Parent.call(this),也就是在子类Child的构造函数中调用了父类Parent的构造函数,这样就可以借用父类的属性和方法。
3. 组合继承
组合继承是综合了原型链继承和借用构造函数继承的优点,它实现了既能继承父类原型对象中的属性和方法,又不会影响父类的同样的属性或方法和继承父类构造函数中的属性和方法。
function Parent() {
this.name = 'parent';
this.age = 30;
}
Parent.prototype.sayHello = function() {
console.log('Hello, I am ' + this.name);
}
function Child() {
Parent.call(this);
this.sex = 'male';
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;
var child = new Child();
console.log(child.name); // "parent"
console.log(child.sex); // "male"
console.log(child.age); // 30
child.sayHello(); // "Hello, I am parent"
在上面的代码中,我们定义了一个Parent类和一个Child类,先通过借用构造函数继承继承父类构造函数中的属性和方法,再通过将Child的prototype属性设置为Parent类的实例对象实现继承父类原型对象中的属性和方法。在设置完Child的prototype对象之后,需要将其constructor设置为Child。
4. 寄生组合式继承
寄生组合式继承是组合继承的优化版,它通过寄生方式来继承父类原型对象中的属性和方法,避免了父类构造函数中重复调用已经存在于原型中的方法。
function Parent() {
this.name = 'parent';
this.age = 30;
}
Parent.prototype.sayHello = function() {
console.log('Hello, I am ' + this.name);
}
function Child() {
Parent.call(this);
this.sex = 'male';
}
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
var child = new Child();
console.log(child.name); // "parent"
console.log(child.sex); // "male"
console.log(child.age); // 30
child.sayHello(); // "Hello, I am parent"
在上面的代码中,我们使用了Object.create()方法,将Child的prototype对象设置为Parent.prototype的一个副本。这样做可以避免父类构造函数中重复调用已经存在于原型中的方法。
总结:
- 原型链继承:简单、易用,但有一个严重的缺点,就是很容易出现父类对象的属性被子类修改的情况。
- 借用构造函数继承:可以避免原型链继承的缺点,但是不能继承父类原型对象中的属性和方法。
- 组合继承:综合了原型链继承和借用构造函数继承的优点,实现了完美继承。
- 寄生组合式继承:组合继承的优化版,用寄生方式来继承父类原型对象中的属性和方法。
以上是JavaScript实现继承的4种方法总结,希望对你有帮助。
本文标题为:JavaScript实现继承的4种方法总结
- 关于extjs:动态管理Ext.app.Application.controllers 2022-09-15
- php-来自mysql的一列并将其显示为html中的两列 2023-10-26
- html个人笔记 2023-10-27
- ajax实现上传图片保存到后台并读取的实例 2023-02-15
- Javascript实现视频轮播在pc端与移动端均可 2023-12-01
- html加css样式实现js美食项目首页示例代码 2022-11-20
- vue v-for循环数据点击父元素,里面得子元素样式改变 2023-10-08
- js结合json实现ajax简单实例 2023-02-01
- php输出从mysql到html表 2023-10-26
- TRON波场DAPP对接(tronWeb+vue) 2023-10-08