前端JavaScript篇之对象继承的方式有哪些?

目录

  • 对象继承的方式有哪些?
    • 1. 原型链继承
    • 2. 借用构造函数
    • 3. 组合继承
    • 4. 原型式继承
    • 5. 寄生式组合继承


对象继承的方式有哪些?

1. 原型链继承

当使用原型链继承时,子类型的原型对象被设置为父类型的一个实例。这意味着子类型通过其原型可以访问父类型的属性和方法。

// 父类型
function Animal(name) {
  this.name = name
}

Animal.prototype.getName = function () {
  return this.name
}

// 子类型
function Dog(age) {
  this.age = age
}

// 将子类型的原型设置为父类型的实例
Dog.prototype = new Animal('Tommy')

var dog1 = new Dog(3)
var dog2 = new Dog(5)

console.log(dog1.getName()) // 输出 "Tommy"
console.log(dog2.getName()) // 输出 "Tommy"

请添加图片描述

思路

  1. 首先定义了一个父类型 Animal,它有一个属性 name 和一个方法 getName
  2. 接着定义了一个子类型 Dog,它有一个属性 age
  3. Dog 的原型设置为 new Animal("Tommy"),这样 Dog 就继承了 Animal 的属性和方法。
  4. 创建两个 Dog 的实例 dog1dog2,它们都能够访问 AnimalgetName 方法。

虽然原型链继承简单易懂,但是存在共享引用类型属性的问题。如果在子类型中修改了引用类型的属性,会影响到所有子类型的实例。

  • 注意:在包含引用类型的属性时,会有共享数据的问题。

2. 借用构造函数

当使用借用构造函数来实现继承时,子类型的构造函数内部调用父类型的构造函数,通过这种方式可以在子类型中向父类型传递参数。

// 父类型
function Person(name) {
  this.name = name
}

// 子类型
function Employee(name, position) {
  Person.call(this, name) // 在子类型的构造函数内部调用父类型的构造函数,传入name参数
  this.position = position
}

var emp1 = new Employee('Alice', 'Manager')
var emp2 = new Employee('Bob', 'Developer')

console.log(emp1.name) // 输出 "Alice"
console.log(emp1.position) // 输出 "Manager"
console.log(emp2.name) // 输出 "Bob"
console.log(emp2.position) // 输出 "Developer"

请添加图片描述

思路

  1. 首先定义了一个父类型 Person,它有一个属性 name
  2. 接着定义了一个子类型 Employee,它有一个属性 position
  3. Employee 的构造函数内部使用 Person.call(this, name),这样就能够在 Employee 中向 Person 传递参数 name
  4. 创建两个 Employee 的实例 emp1emp2,它们分别拥有各自的 nameposition 属性。

借用构造函数方式解决了不能向超类型传递参数的问题,但无法实现函数方法的复用,并且超类型原型定义的方法子类型也没有办法访问到。

  • 注意:无法复用函数方法,只能继承构造函数的属性。

3. 组合继承

组合继承是将原型链继承和借用构造函数继承相结合的一种继承方式,通过这种方式可以解决原型链继承和借用构造函数继承各自的缺点。

// 父类型
function Animal(name) {
  this.name = name
}

Animal.prototype.getName = function () {
  return this.name
}

// 子类型
function Dog(name, age) {
  Animal.call(this, name) // 借用构造函数继承属性
  this.age = age
}

// 将子类型的原型设置为父类型的实例
Dog.prototype = new Animal()

var dog1 = new Dog('Buddy', 3)
var dog2 = new Dog('Max', 5)

console.log(dog1.getName()) // 输出 "Buddy"
console.log(dog2.getName()) // 输出 "Max"

请添加图片描述

思路

  1. 首先定义了一个父类型 Animal,它有一个属性 name 和一个方法 getName
  2. 接着定义了一个子类型 Dog,它有一个属性 age
  3. Dog 的构造函数内部使用 Animal.call(this, name),这样就能够在 Dog 中向 Animal 传递参数 name,并且避免了引用类型属性共享的问题。
  4. Dog 的原型设置为 new Animal(),这样 Dog 就继承了 Animal 的方法。
  5. 创建两个 Dog 的实例 dog1dog2,它们分别拥有各自的 nameage 属性,并且能够访问 AnimalgetName 方法。

组合继承通过借用构造函数来继承属性,通过将子类型的原型设置为父类型的实例来继承方法,解决了原型链继承和借用构造函数继承各自的问题,是一种较为常用的继承方式。

  • 注意:调用了两次父类构造函数,导致子类原型中多了不必要的属性。

4. 原型式继承

原型式继承是一种基于已有对象创建新对象的继承方式,适用于简单对象的继承。在 JavaScript 中可以使用 Object.create 方法来实现原型式继承。

// 原型对象
var person = {
  name: 'John',
  age: 30,
  greet: function () {
    return 'Hello, my name is ' + this.name + ' and I am ' + this.age + ' years old.'
  }
}

// 基于原型对象创建新对象
var anotherPerson = Object.create(person)

anotherPerson.name = 'Alice' // 修改属性值
anotherPerson.age = 25 // 修改属性值

console.log(anotherPerson.greet()) // 输出 "Hello, my name is Alice and I am 25 years old."

请添加图片描述

思路

  1. 首先定义了一个原型对象 person,它有属性 nameage,以及一个方法 greet
  2. 使用 Object.create 方法基于 person 创建了一个新对象 anotherPerson
  3. 修改了 anotherPersonnameage 属性值。
  4. 调用 anotherPersongreet 方法,输出了修改后的信息。

原型式继承通过复制给定的对象来创建新对象,新对象可以共享原型对象的属性和方法。这种继承方式适合在不需要单独构造函数的情况下进行对象的继承。但需要注意的是,由于共享特性,对新对象的修改会影响到原型对象以及其他基于同一原型对象创建的对象。

  • 注意:无法实现函数的复用。

5. 寄生式组合继承

寄生式组合继承是结合了寄生式继承和组合继承的优点,避免了调用两次父类构造函数以及在子类原型中创建不必要的属性

// 寄生式继承
function inheritPrototype(subType, superType) {
  var prototype = Object.create(superType.prototype) // 创建对象
  prototype.constructor = subType // 增强对象
  subType.prototype = prototype // 赋值对象
}

// 父类型
function Animal(name) {
  this.name = name
}

Animal.prototype.sayName = function () {
  console.log(this.name)
}

// 子类型
function Dog(name, age) {
  Animal.call(this, name) // 继承属性
  this.age = age
}

// 使用寄生式继承来继承父类型的原型
inheritPrototype(Dog, Animal)

var dog1 = new Dog('Buddy', 3)
var dog2 = new Dog('Max', 5)

dog1.sayName() // 输出 "Buddy"
dog2.sayName() // 输出 "Max"

请添加图片描述

思路

  1. 首先定义了一个父类型 Animal,它有一个属性 name 和一个方法 sayName
  2. 接着定义了一个子类型 Dog,它有一个属性 age
  3. Dog 的构造函数内部使用 Animal.call(this, name),这样就能够在 Dog 中向 Animal 传递参数 name
  4. 使用 inheritPrototype 函数,通过寄生式继承来继承父类型的原型,避免了调用两次父类构造函数以及在子类原型中创建不必要的属性。
  5. 创建两个 Dog 的实例 dog1dog2,它们分别拥有各自的 nameage 属性,并且能够访问 AnimalsayName 方法。

寄生式组合继承是一种常用的继承方式,克服了组合继承的缺点,既能够继承父类的属性,又能够保持原型链完整,使得子类实例既能够访问自己的属性和方法,也能够访问父类的属性和方法。

以上是对象继承的几种方式及其特点,选择合适的方式取决于具体需求,寄生式组合继承是其中最常用的一种方式。

持续学习总结记录中,回顾一下上面的内容:
对象继承的方式包括原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承和寄生式组合继承。原型链继承通过将子类型的原型设置为父类型的实例来实现继承;借用构造函数继承通过在子类型的构造函数内部调用父类型的构造函数来实现继承;组合继承结合了原型链继承和借用构造函数继承的优点;原型式继承是基于已有对象创建新对象的继承方式;寄生式继承是在原型式继承的基础上增强对象,返回新对象;寄生式组合继承结合了寄生式继承和组合继承的优点,避免了调用两次父类构造函数以及在子类原型中创建不必要的属性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/382209.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Python爬虫——请求库安装

目录 1.打开Anaconda Prompt 创建环境2.安装resuests3.验证是否安装成功4.安装Selenium5.安装ChromeDriver5.1获取chrom的版本5.1.1点击浏览器右上三个点5.1.2点击设置5.1.3下拉菜单,点击最后关于Chrome,获得其版本 5.2 打开网址 [chromedriver](https:/…

ADMap:Anti-disturbance framework for reconstructing online vectorized HD map

参考代码:ADMap 动机与出发点 局部地图构建算法在实际中会遇到部分车道线偏离的或是错误的情况,这往往是全局信息获取上存在欠缺,毕竟地图元素的回归很依赖于全局信息的获取。那么从特征提取、attention layer设计和loss构建上可以做一些工作…

qt-C++笔记之判断一个QLabel上有没有load图片

qt-C笔记之判断一个QLabel上有没有load图片 code review! 在Qt框架中,QLabel是用来显示文本或者图片的一个控件。如果你想判断一个QLabel控件上是否加载了图片,你可以检查它的pixmap属性。pixmap属性会返回一个QPixmap对象,如果没有图片被加…

基于springboot广场舞团管理系统源码和论文

随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息。为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代&#xf…

Linux中常用的工具

软件安装 yum 软件包 在Linux中,软件包是一种预编译的程序集合,通常包含了用户需要的应用程序、库、文档和其他依赖项。 软件包管理工具是用于安装、更新和删除这些软件包的软件。常见的Linux软件包管理工具包括APT(Advanced Packaging To…

吉他学习:C大调第一把位音阶,四四拍曲目练习 小星星,练习的目的

第十三课 C大调第一把位音阶https://m.lizhiweike.com/lecture2/29364198 第十四课 四四拍曲目练习 小星星https://m.lizhiweike.com/lecture2/29364131 C大调第一把位音阶非常重要,可以多练习&#x

耳机壳UV树脂制作耳机壳的工艺流程是什么?

使用耳机壳UV树脂制作耳机壳的工艺流程如下: 获取耳模:首先,需要获取用户的耳模。这通常是通过使用一种柔软的材料注入到用户的耳朵中,然后取出并用来制作耳机的内芯。选择UV树脂:接下来,需要选择合适的UV…

二十、K8S-1-权限管理RBAC详解

目录 k8s RBAC 权限管理详解 一、简介 二、用户分类 1、普通用户 2、ServiceAccount 三、k8s角色&角色绑定 1、授权介绍: 1.1 定义角色: 1.2 绑定角色: 1.3主体(subject) 2、角色(Role和Cluster…

【MySQL】MySQL表的增删改查(进阶)

MySQL表的增删改查(进阶) 1. 数据库约束1.1 约束类型1.2 NULL约束1.3 UNIQUE:唯一约束1.4 DEFAULT:默认值约束1.5 PRIMARY KEY:主键约束1.6 FOREIGN KEY:外键约束:1.7 CHECK约束(了解) 2. 表的设…

emmet语法

一.html $排序 直接.dem或#two是默认div 内容可写{}里 二.css 直接写首字母 三.格式化 一次(右键格式化) 永久

最佳视频转换器软件:2024年视频格式转换的选择

我们生活在一个充满数字视频的世界,但提供的内容远不止您最喜欢的流媒体服务目录。虽然我们深受喜爱的设备在播放各种自制和下载的视频文件方面变得越来越好,但在很多情况下您都需要从一种格式转换为另一种格式。 经过大量测试, 我们尝试过…

《动手学深度学习(PyTorch版)》笔记8.4

注:书中对代码的讲解并不详细,本文对很多细节做了详细注释。另外,书上的源代码是在Jupyter Notebook上运行的,较为分散,本文将代码集中起来,并加以完善,全部用vscode在python 3.9.18下测试通过&…

JSP页面模型

1. JSP页面模型 JSP页面模型描述如何为所提供的协议通过请求对象创建响应对象。JSP容器将Web客户端发送的请求下发给JSP页面实现对象,并向Web客户端返回响应。JSP页面实现对象时一个servlet,运行时表示JSP页面,由JSP容器执行。 在JSP页面作者和JSP容器之间定义合同的方法 …

Android:Cordova,JavaScript操作设备功能

Cordova学习 Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头、麦克风等。 Cordova还提供了一组统一的JavaScript类库,以及为这些类库所用的设备相关的原生后台代码。 Cordova是PhoneGap贡献给Apache后的开源项目,是从…

OpenCV-35 查找轮廓

一、 什么是图像轮廓 图像轮廓是具有相同颜色或灰度的连续点的曲线,轮廓在形状分析和物体的检测识别中很有用。 用于图形分析物体的识别和检测 注意点: 为了检测的准确性,需要先对图像进行二值化或Canny操作。画轮廓时会修改输入的图像&a…

C++ dfs 的状态表示(五十一)【第十一篇】

今天我们接着学习dfs(状态表示)。 1.抽象形式的dfs 前面用到的 DFS 算法都是比较容易想象出搜索过程的,接下来我们看一些不那么容易想象搜索过程的 DFS 过程,这些问题我们称为抽象形式的 DFS。 来回顾一下上节课遇到的一个问题&a…

Kubernetes实战(二十六)-K8S 部署Dashboard UI

Kubernetes Dashboard是Kubernetes集群的通用、基于Web的UI。它允许用户管理集群中运行的应用程序并对其进行故障排除,以及管理集群本身。 访问到DashBoard有两种方式: 通过KubernetesAPI访问:Dashboard是Kubernetes的内置的UI插件&#xff…

JavaEE作业-实验二

目录 1 实验内容 2 实验要求 3 思路 4 核心代码 5 实验结果 1 实验内容 实现两个整数求和的WEB程序 2 实验要求 ①采用SpringMVC框架实现 ②数据传送到WEB界面采用JSON方式 3 思路 ①创建一个SpringMVC项目,配置好相关的依赖和配置文件。 ②创建一个Con…

Python __pycache__文件

pycharm配置位置 几个基本概念 源代码(source code) 我们每天编写的Python、Java、C等代码通常指的就是源代码,源代码的特点是人类可读。但是CPU只能读懂二进制,看不懂我们写的源代码,因此还需要进行编译&#xff08…

【EAI 014】Gato: A Generalist Agent

论文标题:A Generalist Agent 论文作者:Scott Reed, Konrad Zolna, Emilio Parisotto, Sergio Gomez Colmenarejo, Alexander Novikov, Gabriel Barth-Maron, Mai Gimenez, Yury Sulsky, Jackie Kay, Jost Tobias Springenberg, Tom Eccles, Jake Bruce,…