Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
JavaScript面向对象编程的三种实现方式_创想鸟

JavaScript面向对象编程的三种实现方式

javascript面向对象编程的三种实现方式

JavaScript面向对象编程主要通过原型链、构造函数和ES6的class语法来实现。它们各有特点,也适用于不同的场景。

原型链、构造函数、ES6 Class。

原型链是如何实现继承的?

原型链的核心在于每个JavaScript对象都有一个指向其原型对象的内部链接,这个原型对象又有自己的原型,以此类推,直到到达

null

。当试图访问一个对象的属性时,如果该对象自身没有这个属性,JavaScript引擎会沿着原型链向上查找,直到找到该属性或者到达原型链的末端。

举个例子,假设我们有一个

Animal

构造函数和一个

Dog

构造函数,我们想让

Dog

继承

Animal

的属性。我们可以这样做:

立即学习“Java免费学习笔记(深入)”;

function Animal(name) {  this.name = name;}Animal.prototype.sayHello = function() {  console.log("Hello, I'm " + this.name);};function Dog(name, breed) {  Animal.call(this, name); // 调用Animal构造函数,设置Dog的name属性  this.breed = breed;}// 设置Dog的原型为Animal的实例,Dog就可以继承Animal原型上的方法Dog.prototype = Object.create(Animal.prototype);Dog.prototype.constructor = Dog; // 修复Dog的constructor指向Dog.prototype.bark = function() {  console.log("Woof!");};const myDog = new Dog("Buddy", "Golden Retriever");myDog.sayHello(); // 输出 "Hello, I'm Buddy"myDog.bark();    // 输出 "Woof!"

在这个例子中,

Dog.prototype = Object.create(Animal.prototype)

是关键。它创建了一个新的对象,这个对象的原型是

Animal.prototype

,然后将

Dog.prototype

指向这个新对象。这样,

Dog

的实例就可以访问

Animal

原型上的

sayHello

方法。

Animal.call(this, name)

的作用是确保

Dog

的实例拥有

Animal

构造函数中定义的属性,例如

name

需要注意的是,原型链查找属性的过程是动态的。如果在创建对象之后修改了原型对象,那么所有基于该原型创建的对象都会受到影响。

构造函数模式的优缺点是什么?

构造函数模式是JavaScript中创建对象的一种常用方式。它通过

new

关键字来创建一个新的对象,并将构造函数中的属性和方法绑定到这个新对象上。

优点:

创建多个相似对象: 构造函数可以用来创建多个具有相同属性和方法的对象实例。实例独立性: 每个实例都拥有自己的属性和方法副本,修改一个实例不会影响其他实例。可以自定义属性和方法: 可以在构造函数中根据传入的参数来设置不同的属性值,从而创建具有不同状态的对象。

缺点:

方法重复创建: 构造函数中定义的方法会在每个实例中都创建一份副本,造成内存浪费。如果大量创建对象,会显著影响性能。无法实现继承: 构造函数本身无法直接实现继承,需要借助原型链等方式来实现。类型判断困难: 使用构造函数创建的对象,其类型判断可能会比较复杂,需要使用

instanceof

运算符。

为了解决方法重复创建的问题,通常会将方法定义在原型对象上,而不是构造函数内部。这样,所有实例共享同一个方法,节省内存。

例如:

function Person(name, age) {  this.name = name;  this.age = age;}Person.prototype.sayHello = function() {  console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");};const person1 = new Person("Alice", 30);const person2 = new Person("Bob", 25);person1.sayHello(); // 输出 "Hello, my name is Alice and I'm 30 years old."person2.sayHello(); // 输出 "Hello, my name is Bob and I'm 25 years old."

在这个例子中,

sayHello

方法只在

Person.prototype

上定义了一次,所有

Person

的实例都可以访问到这个方法,避免了重复创建。

ES6的class语法糖背后是什么?

ES6 引入的

class

关键字提供了一种更简洁、更易于理解的语法来定义类和实现继承。但本质上,它仍然是基于原型链的语法糖。

class

关键字并没有引入新的面向对象模型,它只是对原型链的一种封装。

class

声明实际上创建了一个函数,这个函数就是类的构造函数。类中定义的方法会被添加到构造函数的

prototype

属性上。

例如:

class Animal {  constructor(name) {    this.name = name;  }  sayHello() {    console.log("Hello, I'm " + this.name);  }}class Dog extends Animal {  constructor(name, breed) {    super(name); // 调用父类的构造函数    this.breed = breed;  }  bark() {    console.log("Woof!");  }}const myDog = new Dog("Buddy", "Golden Retriever");myDog.sayHello(); // 输出 "Hello, I'm Buddy"myDog.bark();    // 输出 "Woof!"console.log(typeof Animal); // 输出 "function"console.log(Animal.prototype.constructor === Animal); // 输出 true

在这个例子中,

Animal

Dog

都是函数。

extends

关键字实现了继承,它相当于设置了

Dog.prototype.__proto__ = Animal.prototype

super()

函数用于调用父类的构造函数,确保子类实例拥有父类的属性。

class

语法糖的优点在于:

更清晰的语法:

class

关键字提供了一种更易于理解和维护的语法来定义类和实现继承。更好的可读性:

class

语法使代码更易于阅读和理解,尤其是在处理复杂的继承关系时。更强的类型检查:

class

语法可以与 TypeScript 等类型检查工具配合使用,提供更强的类型安全。

虽然

class

语法糖简化了面向对象编程,但理解原型链的本质仍然很重要。这有助于更深入地理解 JavaScript 的工作原理,并更好地解决实际问题。

以上就是JavaScript面向对象编程的三种实现方式的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1520725.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
JS 前端文档生成工具 – 使用 JSDoc 创建可维护的 API 文档体系
上一篇 2025年12月20日 13:34:48
如何用WebAssembly Threads实现多线程并行计算?
下一篇 2025年12月20日 13:35:00

相关推荐

  • 哪些Docker扩展能让你在VSCode内轻松管理容器?

    Docker官方扩展是VSCode中管理容器的核心工具,提供容器、镜像、卷、网络的可视化操作,结合Remote-Containers可实现容器内开发,辅以YAML、GitLens等扩展提升效率,需确保本地Docker daemon运行。 在 VSCode 中管理 Docker 容器,最核心的扩展是 …

    2026年9月21日
    000
  • windows10如何解决“找不到恢复环境”的问题_windows10恢复环境修复方法

    首先启用恢复环境,若失败则修复BCD引导配置,最后检查并恢复Winre.wim文件以解决“找不到恢复环境”问题。 如果您尝试在Windows 10系统中使用“重置此电脑”或“高级启动”功能,但收到“找不到恢复环境”的提示,则可能是由于恢复环境被禁用、引导配置错误或核心文件丢失。以下是解决此问题的步骤…

    2026年9月21日
    200
  • PostgreSQL地理位置数据按距离排序的最佳实践:数据库层优化策略

    在处理大量地理位置数据并按距离排序时,将排序逻辑下推至数据库层(如postgresql)是更优的选择。这种方法能有效减少应用层的数据传输和内存消耗,充分利用数据库的计算能力,从而提升整体性能和资源利用率,而非在spring boot应用服务层进行排序。 1. 地理位置排序的需求与挑战 在现代Web应…

    2026年9月21日
    100
  • win11系统搜索索引损坏导致搜索缓慢怎么办_Win11搜索索引损坏修复方法

    首先运行搜索和索引疑难解答,然后重启Windows搜索服务;若问题依旧,需重建搜索索引数据库并重置Windows搜索应用组件,最后使用SFC和DISM命令修复系统文件,以彻底解决Windows 11搜索功能响应缓慢或结果不完整的问题。 如果您尝试在Windows 11中使用搜索功能,但发现响应缓慢或…

    2026年9月21日
    000
  • Flyway配置中安全使用环境变量的实践指南

    flyway配置中直接暴露数据库连接参数存在安全隐患。本文详细阐述了如何通过命令行参数和api调用两种主要方式,将环境变量安全地集成到flyway配置流程中。通过外部化管理敏感信息,可以有效提升数据库迁移配置的安全性、灵活性和可维护性,避免将凭证硬编码到配置文件中。 在数据库迁移实践中,将敏感的数据…

    2026年9月21日
    100
  • 如何为VSCode设置最小化到系统托盘?

    VSCode不支持内置最小化到系统托盘功能,可通过第三方工具实现:Windows推荐使用RBTray或AutoHotkey脚本,Linux可借助AppIndicator扩展,macOS则依赖Dock最小化及辅助工具视觉隐藏。 VSCode 本身不提供内置的“最小化到系统托盘”功能,但可以通过一些方法…

    2026年9月21日
    000
  • UC浏览器自带的截图功能快捷键是什么 UC浏览器内置截图快捷键使用说明

    首先通过快捷键或图标触发截图,再选择区域完成截取。UC浏览器支持三种方式:1. 使用Ctrl+Shift+X(Windows)或Command+Shift+X(Mac)快捷键截图;2. 点击地址栏右侧剪刀图标进行全屏、可见区域或自定义截图;3. 在设置中启用手势控制,使用三指下滑手势快速截图。所有截…

    2026年9月21日
    000
  • 怎样在iPhone情侣模式中设置情侣专属表情?个性化聊天的技巧

    怎样在iPhone情侣模式中设置情侣专属表情?个性化聊天的技巧怎样在iPhone情侣模式中设置情侣专属表情?个性化聊天的技巧怎样在iPhone情侣模式中设置情侣专属表情?个性化聊天的技巧怎样在iPhone情侣模式中设置情侣专属表情?个性化聊天的技巧

    通过Memoji、第三方贴纸应用和iOS 16+抠图功能,可为情侣打造专属表情包;结合自定义聊天背景、语音消息、共享相册等方式,既能提升聊天趣味性,又能保持沟通效率,增强情感连接。 在iPhone上设置情侣专属表情,与其说是开启一个内置的“情侣模式”,不如说是巧妙利用iOS系统和第三方应用提供的各种…

    2026年9月21日 用户投稿
    100
  • 如何用SumoPaint的AI裁剪图片?快速完成智能图片裁剪教程

    如何用SumoPaint的AI裁剪图片?快速完成智能图片裁剪教程如何用SumoPaint的AI裁剪图片?快速完成智能图片裁剪教程如何用SumoPaint的AI裁剪图片?快速完成智能图片裁剪教程如何用SumoPaint的AI裁剪图片?快速完成智能图片裁剪教程

    答案:SumoPaint虽无AI裁剪功能,但可通过魔棒、套索工具精确选区,结合图层蒙版与羽化、反选等操作实现智能裁剪效果,最后按需导出PNG或JPG高质量文件。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 在SumoPaint中,虽然它不…

    2026年9月21日 用户投稿
    100
  • Java OOP如何使用内部类提高代码组织性

    内部类提升Java代码组织性与封装性,成员内部类增强封装,静态内部类分离逻辑,局部与匿名内部类简化回调,私有内部类隐藏实现细节。 内部类在Java面向对象编程中是一种有效提升代码组织性和封装性的工具。通过将一个类定义在另一个类的内部,可以更好地表达类之间的逻辑关系,控制访问权限,并减少命名冲突。合理…

    2026年9月21日
    000
  • MySQL缓存机制对性能提升的作用_MySQL缓存配置及调优方案

    MySQL缓存机制对性能提升的作用_MySQL缓存配置及调优方案MySQL缓存机制对性能提升的作用_MySQL缓存配置及调优方案MySQL缓存机制对性能提升的作用_MySQL缓存配置及调优方案MySQL缓存机制对性能提升的作用_MySQL缓存配置及调优方案

    mysql的缓存机制主要包括innodb缓冲池、查询缓存和操作系统文件系统缓存等,其中innodb缓冲池是性能优化的核心。1. innodb缓冲池缓存表数据和索引页,减少磁盘i/o,提升读写效率;2. 查询缓存因失效频繁及锁竞争问题,在高并发场景下易成瓶颈,已在mysql 8.0中移除;3. 操作系…

    2026年9月21日 用户投稿
    100
  • VSCode中竖线怎么设置_VSCode编辑区竖线(标尺)显示与配置教程

    在VSCode中启用垂直标尺需修改settings.json文件中的editor.rulers属性,如设置{ “editor.rulers”: [80, 120] }可在第80和120列显示竖线,提升代码对齐与可读性;虽原生不支持自定义颜色样式,但可通过安装Guides或In…

    2026年9月21日
    100
  • Linux之包管理工具(RPM和YUM)

    包管理工具1. rpm包1.1 rpm指令1.1.1 查询指令使用rpm查询已安装的rpm列表:rpm -qa | grep xx 检查是否已安装firefox:rpm -qa | grep firefox 如果显示i686或i386,表示32位系统,noarch表示通用rpm -qa:列出所有已安…

    2026年9月21日
    000
  • windows11磁盘分区怎么操作_windows11磁盘分区调整方法

    可通过系统磁盘管理或易我分区大师调整Windows 11分区。先使用磁盘管理压缩卷释放未分配空间,再新建简单卷;或用易我分区大师无损调整分区,拖动滑块释放空间后合并至目标分区,最后执行任务完成操作。 如果您希望对Windows 11的硬盘进行重新规划,但不确定如何安全地拆分或合并存储空间,则可能是由…

    2026年9月21日
    100
  • Java集合框架在数据处理中的应用实例

    使用Set去重:通过LinkedHashSet去除标签重复并保持顺序;2. Map统计频次:利用HashMap统计单词出现次数;3. List结合Comparator排序:按年龄升序、姓名降序排列用户;4. 集合嵌套处理数据:用Map组织部门与员工列表。集合框架提升数据处理效率与代码可读性。 Jav…

    2026年9月21日
    000
  • Chrome浏览器怎么开启数据同步功能_Chrome浏览器跨设备数据同步设置教程

    首先登录Google账户启用Chrome同步功能,确保书签、历史记录、密码等数据跨设备一致;接着在设置中自定义同步内容类型以满足隐私需求;然后通过Google账户密钥或自定义密码加密同步数据,提升安全性;最后在新设备登录同一账户,自动接收已同步的浏览数据,实现无缝体验。 如果您希望在不同设备间无缝使…

    2026年9月21日
    000
  • 如何为iPhone12Pro刷机固件下载?一步步教你操作

    首先使用爱思助手一键下载适用于iPhone 12 Pro的iOS 18固件,若失败则手动导入IPSW文件,最后可通过恢复模式配合电脑工具强制刷机完成系统重装。 如果您尝试为您的设备重新安装操作系统,但无法获取正确的系统文件,则可能是由于固件下载路径不正确或工具不支持。以下是解决此问题的步骤: 本文运…

    2026年9月21日
    000
  • 如何使用XGBoost训练AI大模型?优化机器学习模型的步骤

    XGBoost并非用于训练GPT类大模型,而是擅长处理结构化数据的高效梯度提升算法,其优势在于速度快、准确性高、支持并行计算、内置正则化与缺失值处理,适用于表格数据建模;通过分阶段超参数调优(如学习率、树深度、采样策略)、结合贝叶斯优化与交叉验证,并配合特征工程、数据预处理和集成学习等关键步骤,可显…

    2026年9月21日
    000
  • VSCode远程开发:配置容器与SSH连接的最佳实践解析

    使用VSCode远程开发提升效率,通过Remote-Containers和Remote-SSH实现环境标准化。1. 配置.devcontainer文件夹,用devcontainer.json定义容器环境,推荐自定义Dockerfile并预装工具;2. SSH连接需配置公钥认证、~/.ssh/conf…

    2026年9月21日
    100
  • Ubuntu20.04安装详细图文教程(双系统)[通俗易懂]

    Ubuntu20.04安装详细图文教程(双系统)[通俗易懂]Ubuntu20.04安装详细图文教程(双系统)[通俗易懂]Ubuntu20.04安装详细图文教程(双系统)[通俗易懂]Ubuntu20.04安装详细图文教程(双系统)[通俗易懂]

    大家好,很高兴再次与你们见面,我是你们的朋友全栈君。 Ubuntu安装前言最近我决定将开发环境切换到Linux系统,经过一番研究,我选择了Ubuntu桌面版,因为它不仅美观,而且作为生产系统的生态环境也非常好。于是,我开始寻找安装Ubuntu双系统的方法。安装方法有三种: 虚拟机安装:这种方法无法充…

    2026年9月21日 用户投稿
    200

发表回复

登录后才能评论
关注微信