js 继承有哪些方式

2024-09-05 07:44

文章标签 js 方式继承

本文主要是介绍js 继承有哪些方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

1. 原型链继承

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

示例代码：

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指向子类实例。

示例代码：

function Parent() {this.name = 'parent';
}function Child() {Parent.call(this); // 关键点：在Child构造函数中调用Parent，并绑定this
}var child = new Child();
console.log(child.name); // 输出: parent

3. 组合继承（经典继承）

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

示例代码：

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. 寄生组合继承

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

示例代码：

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