在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种方法总结
基础教程推荐
- 使用CSS移动网页内容的详细指南 2023-10-08
- ES6中async函数与await表达式的基本用法举例 2022-08-30
- 纯html+css实现奥运五环的示例代码 2022-09-21
- 用CSS动态控制文本属性 2022-10-16
- Vue3停止支持IE的几点原因 2023-10-08
- Ajax 接收服务器返回的json响应方法 2023-02-15
- 记录React使用connect后,ref.current为null问题及解决 2023-07-09
- uni-app页面生命与vue生命周期 2023-10-08
- 解决swiper8轮播插件无法修改左右切换按钮样式问题 2023-08-29
- ajax获取json数据为undefined原因分析 2023-02-14