”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > JavaScript + 面向对象编程

JavaScript + 面向对象编程

发布于2024-11-01
浏览:973

JavaScript   OOPs

OOP(即面向对象编程)可以帮助您以更符合逻辑和更易于管理的方式组织代码,并且可以使将来更轻松地重用和扩展代码。

在 JavaScript 中,面向对象编程 (OOP) 是一种基于“对象”概念的编程范式,“对象”是协同工作以执行某些任务的数据和函数的集合。

在 OOP 中,对象是从“类”创建的,“类”是定义它们创建的对象的属性和方法的模板。

面向对象编程的优点

在 JavaScript 中使用 OOP 的主要优点之一是它允许您以更符合逻辑和更易于管理的方式组织代码。使用 OOP,您可以创建代表现实世界对象的类并定义这些对象所具有的属性和方法。这使得您的代码更容易理解和使用,尤其是当代码变得越来越复杂时。

OOP 在 JavaScript 或编程中的另一个好处是它允许代码重用和可扩展性。

一旦定义了一个类,您就可以根据需要从该类创建任意数量的对象。这可以节省您大量的时间和精力,因为您不必为每个对象一遍又一遍地编写相同的代码。

此外,您可以创建从现有类继承的新类,这允许您重用和扩展现有代码的功能。

OOP 入门
要开始使用 JavaScript 中的 OOP,您首先需要了解类的概念。在 JavaScript 中,类是一个模板,定义它所创建的对象的属性和方法。这是代表一个人的简单类的示例:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

在此示例中,Person 类有两个属性:name 和age。它还有一种方法,greet(),它向控制台输出问候语。

要从此类创建对象,请使用 new 关键字,后跟类的名称,如下所示:

const person1 = new Person("John", 25);
const person2 = new Person("Jane", 30);

创建对象后,您可以使用点表示法访问其属性和方法,如下所示:

JavaScript 中的 OOP 继承
除了定义类和创建对象之外,JavaScript 中的 OOP 还允许继承。这意味着您可以创建继承现有类的属性和方法的新类。例如,假设您想要创建一个代表学校学生的 Student 类。 Student 类可以继承自 Person 类,如下所示:

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  info() {
    console.log(`${this.name} is ${this.age} years old and goes to ${this.school}.`);
  }
}

OOPS 的四大支柱
JavaScript 中面向对象编程 (OOP) 的四大支柱是:

封装:
封装是指将数据和功能包装在一个对象内的想法。在 OOP 中,对象是代码的基本构建块,每个对象都有自己的属性和方法。这使您能够以更易于理解和使用的方式组织代码。

例如,您可以创建一个 Person 类,该类具有诸如姓名和年龄之类的属性以及诸如greet() 和introduction() 之类的方法。

抽象:

抽象是隐藏对象实现细节并仅向用户公开必要信息的过程。在 OOP 中,您可以使用抽象来使代码更加模块化和灵活。

例如,您可以定义一个抽象类,为一组相关对象提供公共接口,而无需指定这些对象的实现方式。

遗产:
继承是创建继承现有类的属性和方法的新类的过程。这允许您重用和扩展现有代码,从而节省您的时间和精力。

例如,如果您有一个为人员定义公共属性和方法的 Person 类,则可以创建一个继承自 Person 类并添加附加功能的 Student 类。

多态性:
多态性是不同对象以不同方式响应同一方法调用的能力。在 OOP 中,多态性允许您创建共享公共接口但具有不同实现的对象。这使您的代码更加灵活,并允许您编写更易于维护和扩展的代码。

例如,您可以创建一个定义通用draw()方法的Shape类,然后为不同类型的形状(例如圆形、矩形等)创建子类,每个子类在自己的中实现draw()方法方式。

以下是如何在 JavaScript 程序中使用 OOP 的这些支柱的示例:

// Encapsulation: define a Person class with properties and methods
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

// Inheritance: define a Student class that inherits from the Person class
class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  info() {
    console.log(`${this.name} is ${this.age} years old and goes to ${this.school}.`);
  }
}

// Abstraction: define an abstract Shape class with a common draw() method
abstract class Shape {
  abstract draw(): void;
}

// Polymorphism: define subclasses of Shape that implement the draw() method in their own way
class Circle extends Shape {
  draw() {
    console.log("Drawing a circle...");
  }
}
class Rectangle extends Shape {
  draw() {
    console.log("Drawing a rectangle...");
  }
}

总结
面向对象编程是 JavaScript 中的一个基本概念,可以极大地改进代码的结构和组织。通过理解和实现封装、继承和多态性等概念,您可以创建更高效​​和可维护的程序。

无论您是初学者还是经验丰富的开发人员,花时间掌握 JavaScript 中的 OOP 从长远来看都会得到回报。感谢您的阅读,祝您编码愉快。

版本声明 本文转载于:https://dev.to/adarshgupta101/javascript-oops-2elb?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何避免Go语言切片时的内存泄漏?
    如何避免Go语言切片时的内存泄漏?
    ,a [j:] ...虽然通常有效,但如果使用指针,可能会导致内存泄漏。这是因为原始的备份阵列保持完整,这意味着新切片外部指针引用的任何对象仍然可能占据内存。 copy(a [i:] 对于k,n:= len(a)-j i,len(a); k
    编程 发布于2025-07-08
  • 在Ubuntu/linux上安装mysql-python时,如何修复\“ mysql_config \”错误?
    在Ubuntu/linux上安装mysql-python时,如何修复\“ mysql_config \”错误?
    mysql-python安装错误:“ mysql_config找不到”“ 由于缺少MySQL开发库而出现此错误。解决此问题,建议在Ubuntu上使用该分发的存储库。使用以下命令安装Python-MysqldB: sudo apt-get安装python-mysqldb sudo pip in...
    编程 发布于2025-07-08
  • 人脸检测失败原因及解决方案:Error -215
    人脸检测失败原因及解决方案:Error -215
    错误处理:解决“ error:((-215)!empty()in Function Multultiscale中的“ openCV 要解决此问题,必须确保提供给HAAR CASCADE XML文件的路径有效。在提供的代码片段中,级联分类器装有硬编码路径,这可能对您的系统不准确。相反,OPENCV提...
    编程 发布于2025-07-08
  • FastAPI自定义404页面创建指南
    FastAPI自定义404页面创建指南
    response = await call_next(request) if response.status_code == 404: return RedirectResponse("https://fastapi.tiangolo.com") else: ...
    编程 发布于2025-07-08
  • 为什么我的CSS背景图像出现?
    为什么我的CSS背景图像出现?
    故障排除:CSS背景图像未出现 ,您的背景图像尽管遵循教程说明,但您的背景图像仍未加载。图像和样式表位于相同的目录中,但背景仍然是空白的白色帆布。而不是不弃用的,您已经使用了CSS样式: bockent {背景:封闭图像文件名:背景图:url(nickcage.jpg); 如果您的html,css...
    编程 发布于2025-07-08
  • \“(1)vs.(;;):编译器优化是否消除了性能差异?\”
    \“(1)vs.(;;):编译器优化是否消除了性能差异?\”
    答案: 在大多数现代编译器中,while(1)和(1)和(;;)之间没有性能差异。编译器: perl: 1 输入 - > 2 2 NextState(Main 2 -E:1)V-> 3 9 Leaveloop VK/2-> A 3 toterloop(next-> 8 last-> 9 ...
    编程 发布于2025-07-08
  • 如何有效地转换PHP中的时区?
    如何有效地转换PHP中的时区?
    在PHP 利用dateTime对象和functions DateTime对象及其相应的功能别名为时区转换提供方便的方法。例如: //定义用户的时区 date_default_timezone_set('欧洲/伦敦'); //创建DateTime对象 $ dateTime = ne...
    编程 发布于2025-07-08
  • Go web应用何时关闭数据库连接?
    Go web应用何时关闭数据库连接?
    在GO Web Applications中管理数据库连接很少,考虑以下简化的web应用程序代码:出现的问题:何时应在DB连接上调用Close()方法?,该特定方案将自动关闭程序时,该程序将在EXITS EXITS EXITS出现时自动关闭。但是,其他考虑因素可能保证手动处理。选项1:隐式关闭终止数...
    编程 发布于2025-07-08
  • `console.log`显示修改后对象值异常的原因
    `console.log`显示修改后对象值异常的原因
    foo = [{id:1},{id:2},{id:3},{id:4},{id:id:5},],]; console.log('foo1',foo,foo.length); foo.splice(2,1); console.log('foo2', foo, foo....
    编程 发布于2025-07-08
  • 用户本地时间格式及时区偏移显示指南
    用户本地时间格式及时区偏移显示指南
    在用户的语言环境格式中显示日期/时间,并使用时间偏移在向最终用户展示日期和时间时,以其localzone and格式显示它们至关重要。这确保了不同地理位置的清晰度和无缝用户体验。以下是使用JavaScript实现此目的的方法。方法:推荐方法是处理客户端的Javascript中的日期/时间格式化和时...
    编程 发布于2025-07-08
  • Java数组中元素位置查找技巧
    Java数组中元素位置查找技巧
    在Java数组中检索元素的位置 利用Java的反射API将数组转换为列表中,允许您使用indexof方法。 (primitives)(链接到Mishax的解决方案) 用于排序阵列的数组此方法此方法返回元素的索引,如果发现了元素的索引,或一个负值,指示应放置元素的插入点。
    编程 发布于2025-07-08
  • 如何使用Depimal.parse()中的指数表示法中的数字?
    如何使用Depimal.parse()中的指数表示法中的数字?
    在尝试使用Decimal.parse(“ 1.2345e-02”中的指数符号表示法表示的字符串时,您可能会遇到错误。这是因为默认解析方法无法识别指数符号。 成功解析这样的字符串,您需要明确指定它代表浮点数。您可以使用numbersTyles.Float样式进行此操作,如下所示:[&& && && ...
    编程 发布于2025-07-08
  • 如何实时捕获和流媒体以进行聊天机器人命令执行?
    如何实时捕获和流媒体以进行聊天机器人命令执行?
    在开发能够执行命令的chatbots的领域中,实时从命令执行实时捕获Stdout,一个常见的需求是能够检索和显示标准输出(stdout)在cath cath cant cant cant cant cant cant cant cant interfaces in Chate cant inter...
    编程 发布于2025-07-08
  • 如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    如何使用Java.net.urlConnection和Multipart/form-data编码使用其他参数上传文件?
    使用http request 上传文件上传到http server,同时也提交其他参数,java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...
    编程 发布于2025-07-08
  • 如何使用node-mysql在单个查询中执行多个SQL语句?
    如何使用node-mysql在单个查询中执行多个SQL语句?
    Multi-Statement Query Support in Node-MySQLIn Node.js, the question arises when executing multiple SQL statements in a single query using the node-mys...
    编程 发布于2025-07-08

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3