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

JavaScript + 面向对象编程

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

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]删除
最新教程 更多>
  • 如何同步迭代并从PHP中的两个等级阵列打印值?
    如何同步迭代并从PHP中的两个等级阵列打印值?
    同步的迭代和打印值来自相同大小的两个数组使用两个数组相等大小的selectbox时,一个包含country代码的数组,另一个包含乡村代码,另一个包含其相应名称的数组,可能会因不当提供了exply for for for the uncore for the forsion for for ytry...
    编程 发布于2025-04-17
  • 如何解决由于Android的内容安全策略而拒绝加载脚本... \”错误?
    如何解决由于Android的内容安全策略而拒绝加载脚本... \”错误?
    Unveiling the Mystery: Content Security Policy Directive ErrorsEncountering the enigmatic error "Refused to load the script..." when deployi...
    编程 发布于2025-04-17
  • 您如何在Laravel Blade模板中定义变量?
    您如何在Laravel Blade模板中定义变量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配变量对于存储以后使用的数据至关重要。在使用“ {{}}”分配变量的同时,它可能并不总是最优雅的解决方案。幸运的是,Blade通过@php Directive提供了更优雅的方法: $ old_section =“...
    编程 发布于2025-04-17
  • 如何从PHP中的数组中提取随机元素?
    如何从PHP中的数组中提取随机元素?
    从阵列中的随机选择,可以轻松从数组中获取随机项目。考虑以下数组:; 从此数组中检索一个随机项目,利用array_rand( array_rand()函数从数组返回一个随机键。通过将$项目数组索引使用此键,我们可以从数组中访问一个随机元素。这种方法为选择随机项目提供了一种直接且可靠的方法。
    编程 发布于2025-04-17
  • \“(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-04-17
  • 为什么PYTZ最初显示出意外的时区偏移?
    为什么PYTZ最初显示出意外的时区偏移?
    与pytz 最初从pytz获得特定的偏移。例如,亚洲/hong_kong最初显示一个七个小时37分钟的偏移: 差异源利用本地化将时区分配给日期,使用了适当的时区名称和偏移量。但是,直接使用DateTime构造器分配时区不允许进行正确的调整。 example pytz.timezone(...
    编程 发布于2025-04-17
  • 如何修复\“常规错误:2006 MySQL Server在插入数据时已经消失\”?
    如何修复\“常规错误:2006 MySQL Server在插入数据时已经消失\”?
    How to Resolve "General error: 2006 MySQL server has gone away" While Inserting RecordsIntroduction:Inserting data into a MySQL database can...
    编程 发布于2025-04-17
  • 如何有效地选择熊猫数据框中的列?
    如何有效地选择熊猫数据框中的列?
    在处理数据操作任务时,在Pandas DataFrames 中选择列时,选择特定列的必要条件是必要的。在Pandas中,选择列的各种选项。选项1:使用列名 如果已知列索引,请使用ILOC函数选择它们。请注意,python索引基于零。 df1 = df.iloc [:,0:2]#使用索引0和1 c...
    编程 发布于2025-04-17
  • 如何阻止表单提交而不更改提交按钮?
    如何阻止表单提交而不更改提交按钮?
    在不修改提交按钮的情况下,在表单中包含一个无法直接修改的提交按钮的情况下,禁用表单提交将成为必要的情况。要实现这一目标,请考虑以下内容:从事件处理程序中返回false,例如OnSubmit,拦截提交事件并防止表格被提交。但是,它具有局限性,因为javaScript错误在返回语句以自动表单提交结果之...
    编程 发布于2025-04-17
  • 为什么不使用CSS`content'属性显示图像?
    为什么不使用CSS`content'属性显示图像?
    在Firefox extemers属性为某些图像很大,&& && && &&华倍华倍[华氏华倍华氏度]很少见,却是某些浏览属性很少,尤其是特定于Firefox的某些浏览器未能在使用内容属性引用时未能显示图像的情况。这可以在提供的CSS类中看到:。googlepic { 内容:url(&#...
    编程 发布于2025-04-17
  • Go语言垃圾回收如何处理切片内存?
    Go语言垃圾回收如何处理切片内存?
    Garbage Collection in Go Slices: A Detailed AnalysisIn Go, a slice is a dynamic array that references an underlying array.使用切片时,了解垃圾收集行为至关重要,以避免潜在的内存泄...
    编程 发布于2025-04-17
  • 如何避免Go语言切片时的内存泄漏?
    如何避免Go语言切片时的内存泄漏?
    ,a [j:] ...虽然通常有效,但如果使用指针,可能会导致内存泄漏。这是因为原始的备份阵列保持完整,这意味着新切片外部指针引用的任何对象仍然可能占据内存。 copy(a [i:] 对于k,n:= len(a)-j i,len(a); k
    编程 发布于2025-04-17
  • 解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常
    解决MySQL插入Emoji时出现的\\"字符串值错误\\"异常
    Resolving Incorrect String Value Exception When Inserting EmojiWhen attempting to insert a string containing emoji characters into a MySQL database us...
    编程 发布于2025-04-17
  • 如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    如何为PostgreSQL中的每个唯一标识符有效地检索最后一行?
    postgresql:为每个唯一标识符在postgresql中提取最后一行,您可能需要遇到与数据集合中每个不同标识的信息相关的信息。考虑以下数据:[ 1 2014-02-01 kjkj 在数据集中的每个唯一ID中检索最后一行的信息,您可以在操作员上使用Postgres的有效效率: id dat...
    编程 发布于2025-04-17

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

Copyright© 2022 湘ICP备2022001581号-3