前端祖传三件套JavaScript的对象之继承的组合继承

简介: 在 JavaScript 中,继承是一种非常重要的概念,它可以帮助我们避免重复代码的编写,并且提高代码的可维护性和可读性。JavaScript 中的继承有多种方式,其中组合继承是一种常见的方式。本文将介绍组合继承的概念、使用方法以及一些常见的注意事项。


一、组合继承的概念

组合继承是一种通过同时使用构造继承和原型链继承来实现对象之间继承关系的方式。在这种方式下,子类既可以通过调用父类构造函数来获得父类的属性和方法,也可以继承父类原型上定义的所有属性和方法。例如:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function() {
  console.log('Hi, my name is ' + this.name + ', I am ' + this.age + ' years old.');
};
function Student(name, age, gender) {
  Person.call(this, name, age);
  this.gender = gender;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
const student = new Student('Tom', 18, 'male');
student.sayHello(); // 输出: Hi, my name is Tom, I am 18 years old.

在上面的例子中,定义了一个 Person 构造函数和一个 Student 构造函数,并且通过同时使用构造继承和原型链继承来实现继承。这样,Student 对象既可以调用 Person 的构造函数来获得父类的属性和方法,也可以继承 Person 的原型方法 sayHello。

二、组合继承的使用方法

为了实现组合继承,我们需要遵循以下步骤:

  1. 定义父类构造函数:
function Person(name, age) {
  this.name = name;
  this.age = age;
}
  1. 在父类的原型上定义方法和属性:
Person.prototype.sayHello = function() {
  console.log('Hi, my name is ' + this.name + ', I am ' + this.age + ' years old.');
};
  1. 定义子类构造函数:
function Student(name, age, gender) {
  Person.call(this, name, age);
  this.gender = gender;
}
  1. 使用 Object.create 方法将子类的原型设置为父类的实例:
Student.prototype = Object.create(Person.prototype);
  1. 将子类的原型构造函数指向子类本身:
Student.prototype.constructor = Student;
  1. 添加子类独有的方法和属性:
Student.prototype.sayGender = function() {
  console.log('My gender is ' + this.gender);
};
  1. 创建子类对象并调用方法:
const student = new Student('Tom', 18, 'male');
student.sayHello(); // 输出: Hi, my name is Tom, I am 18 years old.
student.sayGender(); // 输出: My gender is male

三、组合继承的注意事项

  1. 组合继承可以继承父类的实例属性和方法,也可以继承父类的原型属性和方法。
  2. 组合继承可能会导致一些性能问题,因为每个子类对象都需要重新创建父类的实例对象,并且可能存在多层继承关系。这会导致在访问某些属性或方法时需要沿着原型链进行查找,从而降低程序的执行效率。
目录
相关文章
|
1天前
|
存储 JavaScript 前端开发
使用Vue.js构建交互式前端的技术探索
【5月更文挑战第12天】Vue.js是渐进式前端框架,以其简洁和强大的特性深受开发者喜爱。它聚焦视图层,采用MVVM模式实现数据与视图的双向绑定,简化开发。核心特性包括响应式数据绑定、组件化、模板系统和虚拟DOM。通过创建Vue实例、编写模板及定义方法,可以构建交互式前端,如计数器应用。Vue.js让复杂、交互式的前端开发变得更加高效和易维护。
|
2天前
|
JavaScript 前端开发
在JavaScript中,函数原型(Function Prototype)是一个特殊的对象
JavaScript中的函数原型是一个特殊对象,它为所有函数实例提供共享的方法和属性。每个函数在创建时都有一个`prototype`属性,指向原型对象。利用原型,我们可以向所有实例添加方法和属性,实现继承。例如,我们定义一个`Person`函数,向其原型添加`greet`方法,然后创建实例`john`和`jane`,它们都能调用这个方法。尽管可以直接在原型上添加方法,但推荐在构造函数内部定义以封装数据和逻辑。
8 2
|
2天前
|
JavaScript 前端开发
JavaScript 提供了多种方法来操作 DOM(文档对象模型)
【5月更文挑战第11天】JavaScript 用于DOM操作的方法包括获取元素(getElementById, getElementsByClassName等)、修改内容(innerHTML, innerText, textContent)、改变属性、添加/删除元素(appendChild, removeChild)和调整样式。此外,addEventListener用于监听事件。注意要考虑兼容性和性能当使用这些技术。
6 2
|
3天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
4天前
|
JavaScript 前端开发
JavaScript 中最常用的继承方式
JavaScript中的继承有多种实现方式:1) 原型链继承利用原型查找,但属性共享可能引发问题;2) 借用构造函数避免共享,但方法复用不佳;3) 组合继承结合两者优点,是最常用的方式;4) ES6的class继承,是语法糖,仍基于原型链,提供更直观的面向对象编程体验。
11 1
|
4天前
|
设计模式 JavaScript 前端开发
在JavaScript中,继承是一个重要的概念
JavaScript继承有优点和缺点。优点包括代码复用、扩展性和层次结构清晰。缺点涉及深继承导致的复杂性、紧耦合、单一继承限制、隐藏父类方法以及可能的性能问题。在使用时需谨慎,并考虑其他设计模式。
9 2
|
5天前
|
JavaScript 前端开发 开发者
JavaScript 继承的方式和优缺点
JavaScript 继承的方式和优缺点
9 0
|
6天前
|
存储 JavaScript 前端开发
JavaScript对象方法详解
JavaScript对象方法详解
15 1
|
7天前
|
JavaScript
js多维数组去重并使具有相同属性的对象数量相加
js多维数组去重并使具有相同属性的对象数量相加
10 1
|
9月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
98 0