在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种方法总结
基础教程推荐
- js禁止页面刷新与后退的方法 2024-01-08
- JS前端广告拦截实现原理解析 2024-04-22
- 浅谈Vue2和Vue3的数据响应 2023-10-08
- vue离线环境如何安装脚手架vue-cli 2025-01-19
- this[] 指的是什么内容 讨论 2023-11-30
- 基于Vue制作组织架构树组件 2024-04-08
- Ajax实现动态加载数据 2023-02-01
- 浅析canvas元素的html尺寸和css尺寸对元素视觉的影响 2024-04-26
- 关于文字内容过长,导致文本内容超出html 标签宽度的解决方法之自动换行 2023-10-28
- CSS3的几个标签速记(推荐) 2024-04-07
