什么是面向对象编程

什么是面向对象编程?(OOP)

● 面向对象编程是一种基于对象概念的编程范式;(所谓的编程范式,就是代码风格,我们"如何"编写和组织代码);

● 我们使用对象来模拟(描述)现实世界(例如用户或者待办事项列表项)或抽象特征(例如 HTML 组件或数据结构);

● 对象可包含数据(属性)和代码(方法)。通过使用对象,我们可以将数据和相应的行为打包成一个块;例如下方:

● 在面向对象编程 中,对象是自成一体的代码块;

● 对象是应用程序的构件,并可相互影响;

● 交互通过公共接口(API)进行:对象外部的代码可以访问并使用这些方法与对象进行通信;

● 开发面对对象编程的目的是组织代码,使其更灵活、更易于维护(避免 "意大利面条代码")。

类和实例(传统 OPP)

class(就像一个蓝图,我们可以根据它创建新的对象)

注:只是一个表示,而不是实际的JavaScript语法!

JavaScript不支持这里所表示的真正的类

● 然后我们可以根据上面的class来生成很多的实例,例如

javascript 复制代码
const user = {
    user: 'IT知识一享',
    password: 'ItShare2024',
    email: 'admin@example.com',
    login(password) {
        // 登录逻辑
    },

    sendMessage(str) {
        //发送逻辑
    }
}

注:从类创建的新对象。就像一个真实的房子从一个抽象的蓝图

面向对象的4个基本原则

我们实际上是如何设计类的,我们如何将真实世界的数据建模成类?

面向对象程序设计的4个基本原则

● 抽象

● 封装

● 继承

● 多态

抽象

概念:忽略或隐藏无关紧要的细节,让我们能够从全局的角度来看待我们正在实现的事情,而不是去纠结那些对我们的实现并不重要的细节

例如我们现在需要制作一部手机,手机作为一个对象,可能含有很多细节,例如,充电、体积、电压、温度、屏幕、绝对电压、绝对温度、振动、声音、前摄像头、后摄像头等等;但是对于用户而已他并不需要关心这些内容,可能用户关心的仅仅一个细节抽象过的手机,例如主页、体积、屏幕;

其实我们无时不刻不使用这抽象,例如之前我们学习的监听事件,我们也仅仅去使用它而已,而不需要去关心其背后的实现细节!

封装

概念:将属性和方法保留在类内部,使类外部无法访问,某些方法可以作为公共接口(API)公开
例如:

为什么需要这么做?

● 防止外部代码意外的操作内部属性/状态

● 允许在不破坏外部代码的情况下更改内部实现

继承

概念:让子类可以使用某个类的所有属性和方法,形成类与类之间的层次关系。这样,我们就可以重复使用通用逻辑,并对现实世界中的关系进行建模

父类

子类

如上图,子类中user\password\email以及登录和发送消息的方法都可以从父类继承,并不用书写重复的代码

多态

概念:子类可以覆盖它从父类继承的方法 [虽然更复杂,但对我们来说已经足够]

注:例如,作者和管理员除了从user中继承的属性,如果自己有特殊的属性,可以书写逻辑代码来覆盖从user继承的属性

相关推荐
勤奋菲菲38 分钟前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
前端开发呀1 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云和数据.ChenGuang2 小时前
vue中构建脚手架
前端·javascript·vue.js
渣哥2 小时前
面试官最爱刁难:Spring 框架里到底用了多少经典设计模式?
javascript·后端·面试
朱昆鹏2 小时前
如何通过sessionKey 登录 Claude
前端·javascript·人工智能
wdfk_prog2 小时前
klist 迭代器初始化:klist_iter_init_node 与 klist_iter_init
java·前端·javascript
code_Bo2 小时前
基于vxe-table进行二次封装
前端·javascript·vue.js
闭着眼睛学算法3 小时前
【双机位A卷】华为OD笔试之【模拟】双机位A-新学校选址【Py/Java/C++/C/JS/Go六种语言】【欧弟算法】全网注释最详细分类最全的华子OD真题题解
java·c语言·javascript·c++·python·算法·华为od
晴殇i3 小时前
为什么现代 JavaScript 代码规范开始建议禁止使用 else ?
前端·javascript·前端框架
源力祁老师3 小时前
OWL与VUE3 的高级组件通信全解析
前端·javascript·vue.js