前端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.hqwc.cn/news/466335.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【知识整理】技术新人的培养计划

一、培养计划落地实操 1. 概要 新人入职,要给予适当的指导,目标: 1、熟悉当前环境: 生活环境:吃饭、交通、住宿、娱乐 工作环境:使用的工具,Mac、maven、git、idea 等 2、熟悉并掌握工作技…

苹果Mac键盘如何将 F1 到 F12 取消按Fn

苹果电脑安装了Win10操作系统之后,F1到F12用不了怎么办的解决方法。本文将介绍一些解决方法,帮助您解决无法使用F1到F12功能键的问题。 使用 Mac系统的人都知道,Mac系统默认是没有开启 F1-F12 的使用的,平时我们使用的系统都可以使…

C++三剑客之std::optional(一) : 使用详解

相关文章系列 C三剑客之std::optional(一) : 使用详解 C三剑客之std::any(一) : 使用 C之std::tuple(一) : 使用精讲(全) C三剑客之std::variant(一) : 使用 C三剑客之std::variant(二):深入剖析 目录 1.概述 2.构建方式 2.1.默认构造 2.2.移动构造 2.3.拷贝构…

中科大计网学习记录笔记(八):FTP | EMail

前言: 学习视频:中科大郑烇、杨坚全套《计算机网络(自顶向下方法 第7版,James F.Kurose,Keith W.Ross)》课程 该视频是B站非常著名的计网学习视频,但相信很多朋友和我一样在听完前面的部分发现信…

js改善轮播图(transform)时内部文本上下闪动问题

前些天绘制轮播图时,发现轮播图中不同span标签内(样式不同)文字上下跳动。 为了防止眩晕在岗位上,需要对其进行改善,试了很多种方法,最后来总结一下: 我的轮播图template代码片段: …

分享88个鼠标特效,总有一款适合您

分享88个鼠标特效,总有一款适合您 88个鼠标特效下载链接:https://pan.baidu.com/s/1ljcxwgXGpw7baiufUGJjZA?pwd8888 提取码:8888 Python采集代码下载链接:采集代码.zip - 蓝奏云 学习知识费力气,收集整理更不…

STM32 TIM输入捕获

单片机学习! 目录 文章目录 前言 一、输入捕获 1.1 输入捕获简介 1.2 输出比较和输入捕获执行逻辑的对比: 1.2.1 输出比较 1.2.2 输入捕获 1.2.3 输出比较和输入捕获对比总结 1.3 输入捕获作用 1.4 三种定时器的输入捕获通道分布 1.5输入捕获的PWMI模式和…

Vue3快速上手(二)VSCode官方推荐插件安装及配置

一、VSCode官方插件安装,如下图2款插件 在用vite创建的程序里,提示提安装推荐的插件了,如下图: 二、配置 在设置-扩展里找到Volar插件,将Dot Value勾选上。这样在ref()修改变量时,会自动填充.value,无需…

【蓝桥杯冲冲冲】Prime Gift

【蓝桥杯冲冲冲】Prime Gift 蓝桥杯备赛 | 洛谷做题打卡day31 文章目录 蓝桥杯备赛 | 洛谷做题打卡day31Prime Gift题面翻译题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示题解代码我的一些话 Prime Gift 题面翻译 给你 n n n 个…

python常用的深度学习框架

目录 一:介绍 二:使用 Python中有几个非常受欢迎的深度学习框架,它们提供了构建和训练神经网络所需的各种工具和库。以下是一些最常用的Python深度学习框架: 一:介绍 TensorFlow:由Google开发的TensorF…

中科大计网学习记录笔记(十):P2P 应用

前言: 学习视频:中科大郑烇、杨坚全套《计算机网络(自顶向下方法 第7版,James F.Kurose,Keith W.Ross)》课程 该视频是B站非常著名的计网学习视频,但相信很多朋友和我一样在听完前面的部分发现信…

C++,stl,set/mutiset详解

目录 1.set容器的构造和赋值 2.set的大小和交换 3.set的插入和删除 4.set的查找和统计 5.set和mutiset区别 6.pair对组的创建 7.set排序 1.set的内置类型指定排序规则 2.set的自定义数据类型指定排序 1.set容器的构造和赋值 #include<bits/stdc.h> using name…