基础知识|原型在什么时候用和类的区别

在 JavaScript 中,原型是两个密切相关但有所不同的概念。理解这两者之间的差异有助于更好地掌握面向对象编程(OOP)在 JavaScript 中的实现。

1. 原型(Prototype)

原型是 JavaScript 中实现继承和共享行为的核心机制。每个函数在被用作构造函数创建对象时,都会自动获得一个 prototype 属性,指向一个包含共享方法和属性的对象。

  • 原型的作用: 原型提供了一个可以在对象实例间共享的方法或属性的地方。当你访问对象的方法或属性时,如果该对象自身没有该属性或方法,JavaScript 会沿着原型链向上查找,直到找到或达到原型链的末端(null

  • 什么时候用原型:

    • 共享方法和属性: 当你希望所有实例共享某些方法或属性时,可以将它们定义在构造函数的原型上,而不是每个实例上。例如,你想给所有 MyLinkedList 的实例添加一个 get 方法,可以将它定义在 MyLinkedList.prototype 上。
    • 继承: 通过 prototype 你可以实现继承,让一个对象从另一个对象继承方法和属性。通过 Object.create()class 语法,JavaScript 使用原型链来建立对象之间的继承关系。
  • // 定义构造函数
    function Person(name) {this.name = name;
    }// 定义原型方法
    Person.prototype.sayHello = function() {console.log('Hello, ' + this.name);
    };// 创建实例
    const person1 = new Person('Alice');
    person1.sayHello(); // 输出 "Hello, Alice"
    

    2. 类(Class)

​​​类是 JavaScript 在 ECMAScript 6(ES6)引入的一个新语法,它是构造函数和原型的语法糖,提供了一种更接近传统面向对象语言(如 Java、C++)的方式来创建对象和定义方法。

  • 类的作用: 类是用于创建对象的蓝图,定义了构造函数和实例方法。类的每个实例都会有自己的属性,但共享类中的方法。虽然语法上类提供了更清晰、更简洁的方式,但它在底层依然依赖原型机制。

  • 什么时候用类:

    • 创建对象: 如果你想使用面向对象的编程风格来创建对象,并通过类提供更清晰的结构,可以使用 class
    • 继承: 类的继承非常直观,使用 extends 关键字可以轻松继承另一个类的属性和方法。
    • 更易维护: 类提供了更简洁的语法,特别是当涉及到继承和代码组织时,比原型链方式更加清晰和易于维护。
class Person {constructor(name) {this.name = name;}sayHello() {console.log('Hello, ' + this.name);}
}const person2 = new Person('Bob');
person2.sayHello(); // 输出 "Hello, Bob"

这里,Person 类的实例有一个 sayHello 方法。class 语法自动处理了原型链的创建,实例对象通过类自动继承这些方法

3. 原型与类的区别

特性原型 (Prototype)类 (Class)
定义方式使用构造函数和 prototype 来定义方法使用 class 关键字来定义
方法共享方法通过 prototype 共享方法默认在类的原型上共享(但语法更加简洁)
继承机制使用 prototypeObject.create() 来继承使用 extends 关键字来继承
可读性和简洁性比较底层,需要手动操作原型链语法糖,结构清晰,易于理解
底层实现依赖原型链机制底层还是基于原型链实现,class 是对原型的封装

4. 原型链与类继承的关系

虽然 class 语法是对 prototype 机制的封装,但它本质上还是依赖原型链来实现继承。class 会自动处理原型的设置,使得代码更加简洁易读。

例如,使用 class 语法继承另一个类时,JavaScript 内部实际上是在做原型链的设置。来看这个例子:

class Animal {speak() {console.log('Animal speaking');}
}class Dog extends Animal {speak() {console.log('Dog barking');}
}const dog = new Dog();
dog.speak(); // 输出 "Dog barking"

这里,Dog 类继承了 Animal 类。在底层,Dog 会通过 __proto__ 属性指向 Animal 类的原型。这意味着 Dog 的实例可以访问 Animal 类的 speak 方法,除非它自己定义了该方法(如这里所示)。

5. 什么时候选择使用原型,什么时候使用类

  • 使用原型:

    • 当你想直接操作原型链或实现更底层的继承时,原型机制非常灵活且高效。
    • 当你在学习 JavaScript 面向对象的实现原理时,原型链机制能帮助你理解 JavaScript 中的继承、方法共享等概念。
  • 使用类:

    • 当你希望代码结构更加简洁、易读且更接近传统面向对象语言时,使用 class 会更直观。
    • 如果你的项目需要清晰的继承体系和方法组织,使用 class 可以让代码更容易维护。

总结

  • 原型是 JavaScript 中实现继承的核心机制,每个构造函数都有一个 prototype 属性,用于定义共享方法和属性。
  • 是对原型机制的语法糖,使得面向对象编程的风格在 JavaScript 中更加直观和易用。
  • 虽然 class 提供了更简洁的语法,但底层仍然依赖原型链。因此,你可以把类看作是对原型机制的封装,它让继承和方法共享的实现更易于理解和使用。

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

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

相关文章

CMake小结2(PICO为例)

1 前言 之前写过一篇cmake,不过很简单:CMake小结_cmake ${sources}-CSDN博客 构建系统现在真的太多了,完全学不过来的感觉,meson,gardle,buildroot, Maven。。。我是真的有点放弃治疗了。之前…

使用OpenCV实现帧间变化检测:基于轮廓的动态区域标注

在计算机视觉中,帧间差异检测(frame differencing)是一种常用的技术,用于检测视频流中的动态变化区域。这种方法尤其适用于监控、运动分析、目标追踪等场景。在这篇博客中,我们将通过分析一个基于OpenCV的简单帧间差异…

机器学习01

机器学习的基本过程如下: 1.数据获取 2.数据划分 3.特征提取 4.模型选择与训练 5.模型评估 6.模型调优 一、特征工程(重点) 0. 特征工程步骤为: 特征提取(如果不是像dataframe那样的数据,要进行特征提取&#…

每日Attention学习24——Strip Convolution Block

模块出处 [TIP 21] [link] CoANet: Connectivity Attention Network for Road Extraction From Satellite Imagery 模块名称 Strip Convolution Block (SCB) 模块作用 多方向条形特征提取 模块结构 模块特点 类PSP设计,采用四个并行分支提取不同维度的信息相比于…

用FileZilla Server 1.9.4给Windows Server 2025搭建FTP服务端

FileZilla Server 是一款免费的开源 FTP 和 FTPS 服务器软件,分为服务器版和客户端版。服务器版原本只支持Windows操作系统,比如笔者曾长期使用过0.9.60版,那时候就只支持Windows操作系统。当时我们生产环境对FTP稳定性要求较高,比…

es-head(es库-谷歌浏览器插件)

1.下载es-head插件压缩包,并解压缩 2.谷歌浏览器添加插件 3.使用

健康检查、k8s探针、Grails+Liquibase框架/health 404 Not Found排查及解决

概述 健康检查对于一个pod而言,其重要性不言而喻。 k8s通过探针来实现健康检查。 探针 k8s提供三种探针: 存活探针:livenessProbe就绪探针:readinessProbe启动探针:startupProbe 存活探针 存活探针决定何时重启…

5个GitHub热点开源项目!!

1.自托管 Moonlight 游戏串流服务:Sunshine 主语言:C,Star:14.4k,周增长:500 这是一个自托管的 Moonlight 游戏串流服务器端项目,支持所有 Moonlight 客户端。用户可以在自己电脑上搭建一个游戏…

【Linux C | 时间】localtime 的介绍、死机、死锁问题以及 localtime_r 函数的时区问题

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…

122. 买卖股票的最佳时机 II 反向递推的方法

下面是将你提供的代码整理成一篇Markdown格式的博客内容: 股票买卖的最大利润 问题描述 给定一个整数数组 prices,其中 prices[i] 是股票在第 i 天的价格。你可以选择在某一天买入股票,并在之后的某一天卖出股票。要求计算出你能够获得的最…

详解Tomcat下载安装以及IDEA配置Tomcat(2023最新)

目录 步骤一:首先确认自己是否已经安装JDK步骤二:下载安装Tomcat步骤三:Tomcat配置环境变量步骤四:验证Tomcat配置是否成功步骤五:为IDEA配置Tomcat 步骤一:首先确认自己是否已经安装JDK jdk各版本通用安…

html中的css

css (cascading style sheets,串联样式表,也叫层叠样式表) css规范一般约定: 1.存放CSS样式文件的目录一般命名为style或css。 2.在项目初期,会把不同类别的样式放于不同的CSS文件,是为了CSS编…

前端项目配置初始化

creat-vue 安装 https://cn.vuejs.org/guide/quick-start.html 官网复制npm安装语句 cmd窗口创建文件夹 npm create vue3.12.2安装webstorm启动vue项目 https://www.jetbrains.com/webstorm/download/other.html 2024.3.2.1 安装依赖 下载包node_modules package 运行服…

Java注解的原理

目录 问题: 作用: 原理: 注解的限制 拓展: 问题: 今天刷面经,发现自己不懂注解的原理,特此记录。 作用: 注解的作用主要是给编译器看的,让它帮忙生成一些代码,或者是帮忙检查…

seacmsv9注入管理员账号密码+orderby+limit

seacmsv9注入管理员账号密码 安装海洋CMS(seacms) 将upload文件夹里的文件全部上传至网页服务器后,执行以下操作: 请运行http://域名/install/index.php进行程序安装 SQL语句尝试注入 http://127.0.0.1/upload/comment/api/index.php?g…

【构建工具】Gradle Kotlin DSL中的大小写陷阱:BuildConfigField

在Android开发当中,BuildConfig是一个非常有用的功能,它允许我们在构建过程中定义常量,并在运行时使用它们。But!!当我们从传统的Groovy DSL迁移到Kotlin DSL时或者被Android Studio坑的时候,有一些细微的差…

AI如何改变传统工厂的生产模式?

随着第四次工业革命的浪潮席卷全球,制造业的数字化转型成为企业在竞争中脱颖而出的关键。过去,传统制造业往往依赖于大量的人工操作和低效率的管理流程,而如今,智能化、自动化、数据化已经成为未来制造业的必由之路。从车间到云端…

Redis

redis启动命令 默认端口启动redis: redis-server redis.windows.conf 指定端口9001和9002启动redis(需要新建配置文件,并修改配置文件port属性): redis-server .\redis-9001.conf redis-server .\redis-9002.conf 检查是否启动Redis &#…

洛谷 P8705:[蓝桥杯 2020 省 B1] 填空题之“试题 E :矩阵” ← 卡特兰数

【题目来源】 https://www.luogu.com.cn/problem/P8705 【题目描述】 把 1∼2020 放在 21010 的矩阵里。要求同一行中右边的比左边大,同一列中下边的比上边的大。一共有多少种方案? 答案很大,你只需要给出方案数除以 2020 的余数即可。 【答案提交】 …

ARM 处理器平台 eMMC Flash 存储磨损测试示例

By Toradex秦海 1). 简介 目前工业嵌入式 ARM 平台最常用的存储器件就是 eMMC Nand Flash 存储,而由于工业设备一般生命周期都比较长,eMMC 存储器件的磨损寿命对于整个设备来说至关重要,因此本文就基于 NXP i.MX8M Mini ARM 处理器平台演示…