JS的6种继承方式

简介: JS的6种继承方式

在 JavaScript 中,实现对象之间的继承可以使用多种方式。以下是其中的六种常见方式:

1、原型链继承(Prototype Chain Inheritance)

在这种方式中,通过将一个构造函数的实例指定为另一个构造函数的原型来实现继承。子类将继承父类原型上的属性和方法。代码如下:

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

function Child() {}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

2、构造函数继承(Constructor Inheritance)

在构造函数继承中,通过在子类构造函数内部调用父类构造函数来实现继承。这样子类实例会拥有父类构造函数中定义的属性和方法。代码如下:

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

function Child() {
    Parent.call(this);
}

3、组合继承(Combination Inheritance)

组合继承是原型链继承和构造函数继承的结合,既通过原型链继承原型上的属性和方法,又通过构造函数继承实例属性。代码如下:

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

Parent.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
}

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

Child.prototype = new Parent();
Child.prototype.constructor = Child; 

4、原型式继承(Prototypal Inheritance)

原型式继承是通过复制一个对象的属性来创建一个新对象,然后对新对象进行修改和扩展,从而实现继承。代码如下:

var parent = {
    name: 'Parent',
    sayHello: function() {
        console.log('Hello, ' + this.name);
    }
};

var child = Object.create(parent);
child.name = 'Child'; 

5、寄生式继承(Parasitic Inheritance)

寄生式继承与原型式继承类似,但是在创建新对象时会增加一些额外的方法或属性,然后返回这个对象。代码如下:

function createChild(parent) {
    var child = Object.create(parent);
    child.sayHello = function() {
        console.log('Hello, ' + this.name);
    };
    return child;
}

var parent = {
    name: 'Parent'
};

var child = createChild(parent);
child.name = 'Child'; 

6、寄生组合式继承(Parasitic Combination Inheritance):寄生组合式继承是组合继承的优化,避免了调用两次父类构造函数的问题。

代码如下:

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

Parent.prototype.sayHello = function() {
    console.log('Hello, ' + this.name);
}

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

Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child; 

ヾ(~▽~)Bye~Bye~

相关文章
|
1月前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承通过原型链实现共享,节省内存,但不支持私有属性。
24 0
|
14天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念,它允许我们基于现有的类(或构造函数)创建新的类
【6月更文挑战第15天】JavaScript继承促进代码复用与扩展,创建类层次结构,但过深的继承链导致复杂性增加,紧密耦合增加维护成本,单继承限制灵活性,方法覆盖可能隐藏父类功能,且可能影响性能。设计时需谨慎权衡并考虑使用组合等替代方案。
34 7
|
14天前
|
JavaScript 前端开发
在 JavaScript 中,实现继承的方法有多种
【6月更文挑战第15天】JavaScript 继承常见方法包括:1) 原型链继承,利用原型查找,实例共享原型属性;2) 借用构造函数,避免共享,但方法不在原型上复用;3) 组合继承,结合两者优点,常用但有额外开销;4) ES6 的 class,语法糖,仍基于原型链,提供直观的面向对象编程。
22 7
|
10天前
|
设计模式 JavaScript 前端开发
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
JavaScript的继承机制基于原型链,它定义了对象属性和方法的查找规则。每个对象都有一个原型,通过原型链,对象能访问到构造函数原型上的方法。例如`Animal.prototype`上的`speak`方法可被`Animal`实例访问。原型链的尽头是`Object.prototype`,其`[[Prototype]]`为`null`。继承方式包括原型链继承(通过`Object.create`)、构造函数继承(使用`call`或`apply`)和组合继承(结合两者)。ES6的`class`语法是语法糖,但底层仍基于原型。继承选择应根据需求,理解原型链原理对JavaScript面向对象编程至关重要
24 7
【JavaScript】深入浅出JavaScript继承机制:解密原型、原型链与面向对象实战攻略
|
11天前
|
JavaScript 前端开发
JavaScript进阶-原型链与继承
【6月更文挑战第18天】JavaScript的原型链和继承是其面向对象编程的核心。每个对象都有一个指向原型的对象链,当查找属性时会沿着此链搜索。原型链可能导致污染、效率下降及构造函数与原型混淆的问题,应谨慎扩展原生原型、保持原型结构简洁并使用`Object.create`或ES6的`class`。继承方式包括原型链、构造函数、组合继承和ES6的Class继承,需避免循环引用、方法覆盖和不当的构造函数使用。通过代码示例展示了这两种继承形式,理解并有效利用这些机制能提升代码质量。
|
15天前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
|
5天前
|
JavaScript 前端开发
JavaScript 中,可以使用类继承来创建子类
JavaScript 中,可以使用类继承来创建子类
6 0
|
17天前
|
JavaScript 前端开发
深入解析JavaScript中的面向对象编程,包括对象的基本概念、创建对象的方法、继承机制以及面向对象编程的优势
【6月更文挑战第12天】本文探讨JavaScript中的面向对象编程,解释了对象的基本概念,如属性和方法,以及基于原型的结构。介绍了创建对象的四种方法:字面量、构造函数、Object.create()和ES6的class关键字。还阐述了继承机制,包括原型链和ES6的class继承,并强调了面向对象编程的代码复用和模块化优势。
25 0
|
1月前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念
【5月更文挑战第9天】JavaScript继承有优点和缺点。优点包括代码复用、扩展性和层次结构清晰。缺点涉及深继承导致的复杂性、紧耦合、单一继承限制、隐藏父类方法以及可能的性能问题。在使用时需谨慎,并考虑其他设计模式。
24 2
|
1月前
|
JavaScript 前端开发
JavaScript 中最常用的继承方式
【5月更文挑战第9天】JavaScript中的继承有多种实现方式:1) 原型链继承利用原型查找,但属性共享可能引发问题;2) 借用构造函数避免共享,但方法复用不佳;3) 组合继承结合两者优点,是最常用的方式;4) ES6的class继承,是语法糖,仍基于原型链,提供更直观的面向对象编程体验。
28 1