JavaScript 中最常用的继承方式

简介: 【5月更文挑战第9天】JavaScript中的继承有多种实现方式:1) 原型链继承利用原型查找,但属性共享可能引发问题;2) 借用构造函数避免共享,但方法复用不佳;3) 组合继承结合两者优点,是最常用的方式;4) ES6的class继承,是语法糖,仍基于原型链,提供更直观的面向对象编程体验。

在 JavaScript 中,实现继承的方法有多种,以下是一些常见的实现方式:

  1. 原型链继承

这是 JavaScript 中最常用的继承方式,它基于原型链的查找机制实现。

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

Parent.prototype.sayHello = function() {
console.log('Hello from Parent');
}

function Child() {
this.type = 'child';
}

// 关键步骤:将 Child 的原型指向 Parent 的实例
Child.prototype = new Parent();

var child = new Child();
console.log(child.name); // 'parent'
child.sayHello(); // 'Hello from Parent'
但是,原型链继承有一个问题,那就是所有的实例都会共享原型上的属性,这可能会在某些情况下引发问题。

  1. 借用构造函数(伪经典继承)

通过调用父类构造函数,增强子类实例,将父类的属性添加到子类实例上。

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

function Child() {
// 关键步骤:调用 Parent 构造函数
Parent.call(this);
this.type = 'child';
}

var child = new Child();
console.log(child.name); // 'parent'
这种方式可以解决原型链继承的问题,但是方法都在构造函数中定义,每次创建实例都会生成一次方法,方法复用就无从谈起了。

  1. 组合继承

将原型链继承和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。

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

Parent.prototype.sayHello = function() {
console.log('Hello from Parent');
}

function Child() {
// 借用构造函数
Parent.call(this);
this.type = 'child';
}

// 原型链继承
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child = new Child();
console.log(child.name); // 'parent'
child.sayHello(); // 'Hello from Parent'
这种方式既可以实现在子类构造函数中向父类构造函数传参,又可实现函数复用,因此是 JavaScript 中最常用的继承方式。

  1. ES6 的 class 继承

ES6 引入了 class(类),使得 JavaScript 的面向对象编程变得更加方便和直观。

javascript
class Parent {
constructor() {
this.name = 'parent';
}
sayHello() {
console.log('Hello from Parent');
}
}

class Child extends Parent {
constructor() {
super(); // 调用父类的 constructor
this.type = 'child';
}
}

let child = new Child();
console.log(child.name); // 'parent'
child.sayHello(); // 'Hello from Parent'
ES6 的 class 继承方式简洁明了,使得 JavaScript 的面向对象编程更加接近其他面向对象的语言。但是,请注意,ES6 的 class 实质上是基于原型链的语法糖,底层的实现仍然是原型链。

目录
相关文章
|
19天前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
16 0
|
19天前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(三)
深入JS面向对象(原型-继承)
32 0
|
19天前
|
JavaScript 前端开发 Java
深入JS面向对象(原型-继承)(一)
深入JS面向对象(原型-继承)
35 0
|
19天前
|
JavaScript 前端开发
js开发:请解释原型继承和类继承的区别。
JavaScript中的原型继承和类继承用于共享对象属性和方法。原型继承利用原型链查找属性,节省内存但不支持私有成员。类继承通过ES6的class和extends实现,支持私有成员但占用更多内存。两者各有优势,适用于不同场景。
22 0
|
19天前
|
JavaScript
|
18天前
|
JavaScript 前端开发
JavaScript 原型链继承:掌握面向对象的基础
JavaScript 原型链继承:掌握面向对象的基础
|
19天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念
【5月更文挑战第9天】JavaScript继承有优点和缺点。优点包括代码复用、扩展性和层次结构清晰。缺点涉及深继承导致的复杂性、紧耦合、单一继承限制、隐藏父类方法以及可能的性能问题。在使用时需谨慎,并考虑其他设计模式。
19 2
|
19天前
|
JavaScript 前端开发 开发者
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
12 0
|
19天前
|
JavaScript 前端开发
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
|
19天前
|
JavaScript 前端开发 开发者
【专栏】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念
【4月更文挑战第29天】JavaScript 中的 prototype 和__proto__是关乎对象继承和属性查找的关键概念。prototype 是函数属性,用于实现对象继承,方法和属性定义在其上可被所有实例共享。__proto__是对象属性,实现属性查找机制,当对象自身找不到属性时,会沿原型链向上查找。两者关系:__proto__指向构造函数的 prototype,构成对象与原型的桥梁。虽然 prototype 可直接访问,但__proto__由引擎内部维护,不可见。理解两者区别有助于深入学习 JavaScript。