js 继承有哪些方式

JavaScript 中实现继承的方式有多种,每种方式都有其特点和适用场景。以下是一些常见的继承模式:

1. 原型链继承

原型链继承是最基础的继承方式,它通过将子类的原型对象指向父类的一个实例来实现属性和方法的共享。

示例代码:
javascript 复制代码
function Parent() {
    this.name = 'parent';
}

Parent.prototype.getName = function() {
    return this.name;
};

function Child() {
    // 无需额外操作
}

Child.prototype = new Parent(); // 关键点:让Child的prototype指向Parent的一个实例
Child.prototype.constructor = Child;

var child = new Child();
console.log(child.getName()); // 输出: parent

2. 构造函数继承

构造函数继承涉及到在子类的构造函数内部调用父类的构造函数,并且改变父类构造函数中的this指向子类实例。

示例代码:
javascript 复制代码
function Parent() {
    this.name = 'parent';
}

function Child() {
    Parent.call(this); // 关键点:在Child构造函数中调用Parent,并绑定this
}

var child = new Child();
console.log(child.name); // 输出: parent

3. 组合继承(经典继承)

组合继承结合了原型链继承和构造函数继承的优点,通过在子类的构造函数中调用父类的构造函数,并且让子类的原型指向父类的原型的一个实例来实现继承。

示例代码:
javascript 复制代码
function Parent(name) {
    this.name = name;
}

Parent.prototype.getName = function() {
    return this.name;
};

function Child(name, age) {
    Parent.call(this, name); // 调用Parent构造函数
    this.age = age;
}

Child.prototype = new Parent(); // 继承Parent的原型方法
Child.prototype.constructor = Child;

var child = new Child('parent', 10);
console.log(child.getName()); // 输出: parent
console.log(child.age);       // 输出: 10

4. 寄生组合继承

寄生组合继承改进了组合继承中的一个问题:每次创建子类实例时,父类构造函数都会被调用两次。它使用一个中间函数来继承父类的原型属性。

示例代码:
javascript 复制代码
function inheritPrototype(subType, superType) {
    var prototype = Object.create(superType.prototype);
    prototype.constructor = subType;
    subType.prototype = prototype;
}

function Parent(name) {
    this.name = name;
}

Parent.prototype.getName = function() {
    return this.name;
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

inheritPrototype(Child, Parent);

var child = new Child('parent', 10);
console.log(child.getName()); // 输出: parent
console.log(child.age);       // 输出: 10

5. ES6 类继承

ES6 引入了类的概念

相关推荐
chari克里8 小时前
QT5.15.2 + msvc2022部署全流程说明(windows可联网环境)
开发语言·c++·qt
Hello.Reader9 小时前
tsrs 技术解析用 Rust 移植 TypeScript 7,类型检查还能怎样提速?
开发语言·rust·typescript
兰亭妙微UI设计公司9 小时前
兰亭妙微ui设计公司分享:B端组件命名如何支持团队协作
前端·javascript·vue.js
透明的玻璃杯9 小时前
VS2015+QT 多线程
开发语言·qt
码匠许师傅9 小时前
【C++三方组件】mbedTLS:面向嵌入式的轻量 TLS
开发语言·c++
小大宇10 小时前
Vue知识点-ElementPlus-03提示框+询问+通知
前端·javascript·vue.js
迪菲赫尔曼10 小时前
【基础篇 12】把环境与源码接起来:检查 GPU,再安装服务器上的项目
运维·服务器·开发语言·人工智能·python·yolo·目标检测
2601_9628857210 小时前
2026 Python 股票数据接口选型指南(横评 + 决策树)
开发语言·python·区块链
前端技术官10 小时前
前端的技术判断力是怎么练出来的?
javascript·web前端·localstorage·debounce·弱网处理
Evand J10 小时前
【PMSM例程4】PMSM电阻辨识与模型补偿EKF,MATLAB例程。附下载链接,包运行成功
开发语言·matlab·电机·ekf·卡尔曼·pmsm