面向对象这么久了,还没找到对象?

2023-11-02

写代码的小伙伴们真幸福啊,
想要对象了?没问题,new一个就好了。
但是,new太多对象,对象也会生气的哦。
你瞧,她来了

图片

从两段代码发现端倪

我们来计算一个矩形的面积,看看这两段代码有什么区别呢?

第一段:

 

const height = 3;
const width = 5;
let aaa = 123;
let bbb = 456;
let ccc = 789;

// 定义一个函数,根据长宽计算矩形面积
function calculateRectangleArea(height, width) {
    return height * width;
}

//调用函数,得到一个结果
const area = calculateRectangleArea(height, width);
console.log(`面积为: ${area}`);

第二段:


let aaa = 123;
let bbb = 456;
let ccc = 789;

// 面向对象方式 - 矩形类
class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    calculateArea() {
        return this.height * this.width;
    }
}

const rectangle = new Rectangle(3, 5);
const area = rectangle.calculateArea();
console.log(`面积为: ${area}`);

有什么区别呢?区别呢?

第一段代码是面向过程的写法,第二段是面向对象的写法。其中很多相同的点,变量、函数、函数调用,无论是面向过程还是面向对象,这些基本的调用逻辑还是要有的。面向对象与面向过程的区别又在哪呢?

1.  第一个区别,是否是一个整体。第一段代码中变量是散乱的,只有调calculateRectangleArea函数的时候,才把、宽、高、面积建立了联系。而第二段代码则一开始就用矩形把宽和高绑定到一起,通过初始赋值(构造函数参数)将这个矩形定型为高为3宽为5的的矩形,这样长、宽就在一个整体中了。

2.  第二个区别,是编程思路的区别。在第一个区别的基础上,第一段代码需要按照书写顺序来理解代码。从编程人的视角来看,我们面向的就是从上到下运行的这样一个过程,简称面向过程。而第二段代码,我们先创造了一个整体,一个矩形的整体,再操作这个整体。这个"整体"在英文中叫做Object,中文翻译就有"对象"。当我们面向某一个整体编程的时候,我们就把这种编程思路叫做面向对象。也可以理解为面向(具象、万物、任何),因为对象可以代表任何具体的事物。

怎样算作对象?

非书面说法,设定属性后的那个实际的整体,被称作为对象。来看代码


class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    calculateArea() {
        return this.height * this.width;
    }
}

Rectangle这个是对象吗?height是吗?width呢?

都不是,这只是说一个矩形应该要有宽和高,只是设想、概念亦或者是模板。仅凭这些属性,无法描述某一个真实的、具体的矩形。如何创建一个具象的?给他具体的值,再使用new创造一下(创建啥不都得来个动作么,比如捏个泥人的是不是得捏),来看代码


const r1 = new Rectangle(100,200)
const r2 = new Rectangle(6,6)

通过new这个关键字结合具体的属性值,我们得到了两个具象的实际的整体(实体)。这两个实体虽然都是矩形类型的,但很容易分辨,一个是100*200的矩形r1,另一个是6*6正方形的特殊矩形r2,对象就这样产生了,这两个实体就是对象,创建的过程叫做实例化

那么,还要问个问题,是不是说r1,r2 这两个变量就是对象?

答案是否定的,这两个变量不是对象(至少此时此刻不能这样叫),真正的对象我们看不见、摸不着、操作不了的,创建的时候他在内存中,没有名字。来看代码


new Rectangle(123,333)

这条语句执行之后,必然也会创建出来一个对象,只不过没有给他指定任何名字,也就无法使用。类比刚降生的可爱的小宝宝,如果不给他起名字他就不存在了吗,他是实实在在存在的。想要跟他互动,引起ta的注意就要给他起个名字,避免和旁边其他的人混淆。r1、r2也是如此,用 r1、r2来表示创建出来的对象,方便使用,当然如果你了解这个过程了,我们以后也可以称作r1、r2为对象,了解了内在逻辑,怎么叫就都可以了

什么是面向对象

面向对象(Object-Oriented,简称OOP)是一种编程范式或方法论,用于组织、设计和实现计算机程序。面向对象编程的核心思想是将程序中的数据(对象)和操作(方法)组合成一个个独立的、可重用的模块,这些模块可以通过定义类和实例化对象的方式来创建。面向对象编程的主要目标是提高代码的可维护性、可扩展性和可重用性。

面向对象编程有以下几个主要概念:

构造函数,也叫做类(Class):构造函数是一个模板,用于定义对象的属性(数据成员)和行为(方法)。它描述了对象的基本结构和行为。类可以看作是创建对象的蓝图。

对象(Object):对象是类的一个实例,具有类定义的属性和行为。每个对象都是独立的,有自己的状态和行为。

封装(Encapsulation):封装是将数据和方法(行为)组合到一个单元中,通过访问权限控制来隐藏内部实现的细节。这可以提高代码的模块化和隔离性,减少了代码之间的耦合。在js中封装相对来说比较不好实现。es6中使用#定义内部属性,这个属性就不会被外部访问到

继承(Inheritance):继承允许一个类从另一个类派生,从而继承其属性和方法。派生类可以扩展、修改或覆盖基类的功能,实现代码的重用和扩展。es6中使用extends关键字来实现

面向对象的好处

不聊书面用语,用例子来看


const arr = new Array()

这是一个很常见的创建数组的方式,使用一个内置构造函数(类)Array ,通过 new的方式我们创建出来了一个实例对象,我们叫他arr,这个arr有很多方法,比如push、pop、shift、unshift等,这些是数组独有的方法

再看


let str1 = "qfedu"

这个 str1 对象是字符串类型的实例,它拥有多个方法,比如 split、toLowerCase 等,然而与数组不同,str1 对象无法使用像 push、pop、shift 等数组特有的方法。一个类型的实例对象只能调用其所属类的方法。

每个类,都很专业。一个类只负责一种特定的功能或任务,这个原则通常被称为 "单一职责原则"。这就是面向对象的好处。接下来,继续介绍一些其他的好处。

图片

积木式构建:就像搭积木一样,你可以将不同的类视为构建块,每个类都代表一个独立的功能或特性。通过将不同的类组合在一起,你就像是在搭建一个功能丰富的结构,每个类都负责一部分功能,最终形成一个完整的应用程序。

灵活组合:类似于积木的组合方式,不同的类可以以多种方式组合来实现不同的功能。你可以通过创建不同的类的实例,将它们组合成更大的对象,形成复杂的数据结构,从而实现更复杂的功能。这种组合方式可以根据需要灵活调整,实现不同的行为。

逐步扩展:就像你可以逐步添加积木块来扩展你的创意作品一样,你可以通过逐步添加新的类来扩展你的应用程序的功能。这种逐步添加功能的方式,使得你可以根据需求逐步完善和扩展应用,而不必一次性处理所有功能。

功能定制:类似于选择不同类型的积木块来创造不同的形状,你可以选择不同的类来实现不同的功能。每个类都代表一个特定的功能单元,你可以根据需要选择并组合不同的功能单元,定制出符合要求的应用程序。

总的来说,将面向对象编程比作摆积木一样的构建过程,强调了代码的组合性、可维护性和灵活性。通过将不同的类组合在一起,你可以构建出功能丰富且高度可定制的应用程序,就像用积木搭建出各种形状和结构一样。这种比喻可以帮助你更好地理解面向对象编程的优势和应用。

那么,现在找到对象了吗?祝小伙伴们都找到称心如意的对象

- End -

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

面向对象这么久了,还没找到对象? 的相关文章

  • 检测 jqGrid 单元格中的复选框事件

    我正在探索jqGrid在我学习 Javascript 和 jQuery 的过程中 我成功地把checkbox在网格单元中 太棒了 这是我所拥有的 myTable jqGrid colModel name cb index cb width
  • 有没有办法在javascript中代理(拦截)一个类的所有方法?

    我希望能够在类本身的构造函数内代理类的所有方法 class Boy constructor proxy logic do something before each call of all methods inside class like
  • JavaScript 支持逐字字符串吗?

    在 C 中 您可以像这样使用逐字字符串 server share file txt JavaScript中有类似的东西吗 模板字符串支持换行 so you can do this if you want https developer mo
  • jQuery JSONP ajax,未设置身份验证标头

    我正在尝试使用以下设置向 google 联系人 API 发出 ajax 请求 ajax url https www opensocial googleusercontent com api people me all dataType js
  • Mozilla WebExtension API 存储 - 使用和不使用断点进行调试会导致不同的输出

    大家好 我正在尝试为 Mozilla Firefox 浏览器实现一个附加组件 以下脚本显示了我已经成功集成的一个后台脚本 它使用 Mozilla WebExtension API 存储 它被执行了 但浏览器控制台上的日志让我感到惊讶 我交替
  • 如何动态删除嵌套的json键?

    这是示例 json search facets author language value nep count 3 value urd count 1 source value West Bengal State Council of Vo
  • 图表.js.如何更改“标签”数组的字体样式?

    我从 Chart JS 库中获取了一个图表 截屏 https i stack imgur com DnuRq png var ctx document getElementById myChart var data labels HTML
  • 使用javascript滚动滚动条或鼠标滚轮后触发事件

    我想知道是否可以触发事件after使用滚动条或鼠标滚轮 或在触摸设备上滑动 时滚动页面 基本上 我想检测用户何时停止滚动 以便我可以进行 AJAX 加载 而不是在滚动时加载 看起来jQuery s scroll 每次用户滚动时都会触发 并且
  • 网络上的等角柱状图

    我计划为游戏的标记 图钉 构建在线地图 但我无法设置标记的正确纬度 原始地图是一个2048 2048px 的正方形 然后我得到了标记 数千个 地图坐标使用 0 到 100 之间的 x y 表示法设置 0 0 是top left角和100 1
  • 无需重定向的 HTML 页面提交

    有没有什么方法可以在不使用ajax的情况下提交html表单而无需从当前页面重定向 你可以设置一个target 为您form 这样您就可以将表单提交到新选项卡 target blank 或一个小的 隐藏的iframe target nameo
  • 如何在单击按钮时清除反应挂钩中的间隔

    我正在用反应钩子构建一个简单的计时器 我有两个按钮启动和重置 当我单击开始按钮时 handleStart 函数工作正常 计时器启动 但我不知道如何在单击重置按钮时重置计时器 这是我的代码 const App gt const timer s
  • 在给定索引上将字符串分成两部分并返回两部分

    我有一个字符串 需要在给定索引上拆分 然后返回两个部分 并用逗号分隔 例如 string 8211 8 211 98700 98 700 因此 我需要能够在任何给定索引上拆分字符串 然后返回字符串的两半 内置方法似乎执行分割 但只返回分割的
  • 是否有跨浏览器的方式在Javascript中设置style.float?

    通常 如果您需要在 JavaScript 中设置样式属性 您可以这样说 element style attribute value 虽然略有不同 但属性名称通常与 HTML 属性名称类似 尽管是驼峰式 对我来说问题是 float 属性不起作
  • 使用 eval 时不会受到 XSS 威胁

    我正在制作 不是现在 但我仍然对这个感到好奇 一款使用 HTML5 和 JS 的游戏 我想要的是人们可以插入自定义脚本 但要安全 function executeCustomJS code eval code bad 当然这段代码非常糟糕
  • 文件缓存:查询字符串与上次修改时间?

    我正在研究缓存网站资源的方法 并注意到大多数与我类似的网站都使用查询字符串来覆盖缓存 例如 css style css v 124942823 后来 我注意到每当我保存 style css 文件时 最后修改的标头都会 更新 使得查询字符串变
  • JavaScript setTimeout 和更改系统时间会导致问题

    我注意到如果我设置setTimeout未来1分钟 然后将我的系统时间更改为过去5分钟 setTimeout功能将在 6 分钟后触发 我这样做是因为我想看看夏令时系统时钟更改期间会发生什么 我的 JavaScript 网页使用setTimeo
  • 获取类中的所有静态 getter

    假设我有这个类 我像枚举一样使用它 class Color static get Red return 0 static get Black return 1 有没有类似的东西Object keys to get Red Black 我使用
  • 如何计算一行中Flexbox项目的数量?

    网格是使用 CSS flexbox 实现的 Example http jsbin com jumosicasi edit html css js output 本示例中的行数为 4 因为我出于演示目的固定了容器宽度 但是 实际上 它可以根据
  • 测试 jQueryUI 是否已加载

    我正在尝试调试网站 并且我认为 jQueryUI 可能未正确加载 如何测试 jQueryUI 是否已加载 if jQuery ui UI loaded OR if typeof jQuery ui undefined UI loaded 应
  • 从json中获取所有子节点

    我有以下 json var source k 01 k 02 children k 05 k 06 children k ABC k PQR k 07 k 03 我希望能够指定 k 的值并取回所有孩子 以及孙

随机推荐