JS继承有哪些常见的方式？

在JavaScript中，继承是实现代码复用和创建出具有层级关系的复杂对象结构的关键机制。它不仅关乎代码的整洁和可维护性，还是面向对象编程（OOP）的核心概念之一。对于初学者来说，理解各种继承方式是深入学习JavaScript的重要一步。本文将详细介绍JavaScript中实现继承的常见方法，帮助读者掌握每种方法的原理和使用场景，从而在实际开发中做出更加合适的选择。

1.原型链继承

原型链继承是JavaScript中最基本的继承方式。它利用了JavaScript中对象都包含指向其原型对象的内部链接的特性，通过改变原型链，可以实现不同对象间的继承关系。

基本原理：

1.每个对象都有一个指向它的原型对象的内部链接，这就是原型链。

2.当尝试访问一个对象的属性时，如果在该对象上未找到该属性，则会继续到其原型对象上寻找，如此循环直到找到该属性或者原型链的尽头（null）。

实现方式：

```javascript

functionParent(){

this.parentProperty=true;

Parent.prototype.getParentProperty=function(){

returnthis.parentProperty;

functionChild(){

this.childProperty=false;

//继承Parent

Child.prototype=newParent();

Child.prototype.constructor=Child;

varchild=newChild();

console.log(child.getParentProperty());//true

```

注意点：

在原型链继承中，由于父类构造函数的实例属性会变成所有子类实例共享的属性，所以不适合包含引用类型的属性。

2.构造函数继承（借助call或apply）

构造函数继承，又称经典继承，通过在子类的构造函数中调用父类构造函数来实现。

基本原理：

1.在子类构造函数中使用call()或apply()方法调用父类构造函数。

2.这样父类构造函数中的属性和方法就可以在子类的实例中使用了。

实现方式：

```javascript

functionParent(name){

this.name=name;

this.colors=['red','blue','green'];

functionChild(name){

Parent.call(this,name);//继承父类属性

varchild1=newChild('child1');

child1.colors.push('black');

console.log(child1.name);//'child1'

console.log(child1.colors);//['red','blue','green','black']

varchild2=newChild('child2');

console.log(child2.colors);//['red','blue','green']

```

注意点：

构造函数继承解决了原型链继承的问题，父类构造函数中的属性不会共享，但父类的方法无法复用。

3.组合继承（原型链+构造函数）

组合继承结合了原型链和构造函数的长处，即用原型链继承实现方法的复用，用构造函数继承确保属性的独立。

基本原理：

1.使用原型链继承方法和属性。

2.使用构造函数继承属性。

实现方式：

```javascript

functionParent(name){

this.name=name;

this.colors=['red','blue','green'];

Parent.prototype.getName=function(){

returnthis.name;

functionChild(name,age){

Parent.call(this,name);//继承属性

this.age=age;

Child.prototype=newParent();//继承方法

Child.prototype.constructor=Child;

Child.prototype.getAge=function(){

returnthis.age;

varchild1=newChild('child1',10);

console.log(child1.getName());//'child1'

console.log(child1.getAge());//10

```

注意点：

组合继承很强大，但还是有些许瑕疵。它的问题在于调用了两次父类构造函数，一次是设置子类的原型时，另一次是在子类构造函数内部。

4.原型式继承

原型式继承是ES5中Object.create()方法的原型，它可以创建一个新对象，这个新对象继承一个现有对象的属性和方法。

基本原理：

1.使用一个现有对象作为新对象的原型。

2.创建新对象时，可以通过传递第二个参数（一个属性描述对象）来修改或新增属性。

实现方式：

```javascript

varperson={

name:'Nicholas',

friends:['Shelby','Court','Van']

varanotherPerson=Object.create(person,{

name:{

value:'Greg',

writable:true,

configurable:true

});

console.log(anotherPerson.name);//'Greg'

```

注意点：

原型式继承创建的对象共享了引用类型的属性，适用于不需要大量创建对象的场景。

5.寄生式继承

寄生式继承是在原型式继承基础上增加一些额外功能。

基本原理：

1.创建一个继承自某个对象的函数。

2.在函数内部增强这个对象，然后返回这个对象。

实现方式：

```javascript

functioncreateAnother(original){

varclone=Object.create(original);//通过调用函数创建一个新对象

clone.sayHi=function(){//以某种方式来增强这个对象

console.log('hi');

returnclone;//返回这个对象

varperson={

name:'Nicholas',

friends:['Shelby','Court','Van']

varanotherPerson=createAnother(person);

anotherPerson.sayHi();//'hi'

```

注意点：

寄生式继承和原型式继承类似，也会共享引用类型的属性。它的优势在于可以为对象添加额外的方法或功能。

6.寄生组合式继承

寄生组合式继承被认为是目前最理想的继承方式。它只调用了一次父类构造函数，并且能够继承父类的属性和方法。

基本原理：

1.继承父类的属性使用构造函数继承。

2.继承父类的方法利用原型式继承，但不是直接用父类的原型作为子类的原型，而是通过创建一个中间对象来继承父类的原型。

实现方式：

```javascript

functioninheritPrototype(subType,superType){

varprototype=Object.create(superType.prototype);//创建对象

prototype.constructor=subType;//增强对象

subType.prototype=prototype;//指定对象

functionParent(name){

this.name=name;

this.colors=['red','blue','green'];

Parent.prototype.getName=function(){

returnthis.name;

functionChild(name,age){

Parent.call(this,name);//继承属性

this.age=age;

inheritPrototype(Child,Parent);//继承方法

Child.prototype.getAge=function(){

returnthis.age;

varchild1=newChild('child1',10);

console.log(child1.getName());//'child1'

console.log(child1.getAge());//10

```

注意点：

寄生组合式继承避免了组合继承中多余的属性复制，效率更高。

7.ES6中的class继承

ES6引入了class关键字，使得JavaScript的继承看起来更像传统面向对象编程语言。

基本原理：

1.class关键字提供了一种更简洁、直观的继承语法。

2.使用extends关键字实现继承。

实现方式：

```javascript

classParent{

constructor(name){

this.name=name;

this.colors=['red','blue','green'];

getName(){

returnthis.name;

classChildextendsParent{

constructor(name,age){

super(name);//调用父类的constructor(name)

this.age=age;

getAge(){

returnthis.age;

varchild1=newChild('child1',10);

console.log(child1.getName());//'child1'

console.log(child1.getAge());//10

```

注意点：

class继承和传统的原型继承在本质上没有区别，但class提供了更为简洁的语法和更好的可读性。

以上我们介绍了JavaScript中实现继承的七种常见方式。每一种继承方式都有其适用场景和局限性，了解这些继承方式能帮助我们在不同开发场景中做出最优的选择。实际开发中，应根据具体需求、代码的复杂程度及可维护性等因素综合考虑，选择最适合的继承方式来实现代码复用和模块化设计。

转载请注明来自九九seo，本文标题：《JS继承有哪些常见的方式？》

标签：