前端 JavaScript 设计模式前奏--面向对象-封装、继承、多态
2024-04-20 06:33:34
JavaScript 面向对象
如图所示:
1. 什么是面向对象
1. 面向对象的概念
2. 面向对象的三要素: 继承/封装/多态 ⭐️
3. JS 的应用举例
4. 面相对象的意义 --- 数据结构化
2. 面向对象 的概念: 类 + 对象
1. 面向对象 的概念: 类 + 对象1. 类(模板) / 对象(实例)1. 通过 class 这个 类(模板)来实例化很多对象 (如同 ES5 的构造函数一样) 。
2.1 对象(实例):
类图关系如图所示:
1. 对象(实例):1. 所谓对象: 本质上就是指事物 (包括人和物) 在程序设计语言中的表现形式 。 这里的事物可以是任何东西 (如某个客观存在的对象, 或者某些较为抽象的概念)。 例如, 对于猫这种常见对象来说, 具有某些明确的特征 (如 颜色/名字/体型 等), 能执行某些动作 (如 喵喵叫/睡觉/躲起来/逃跑 等)。 在 OOP 语义中, 这些对象特征都叫做属性, 而那些动作则被称为方法 。2. 此外, 还有一个口语方面的类比: 对象往往是用名词表示的 (如 book、person), 方法一般都是些动词（如read、run), 属性值则往往是一些形容词 。// 概念 -- 对象(实例)
class People2 {constructor(name, age) {this.name = namethis.age = age}eat2() {document.write(`${this.name} eat something`)}speak2() {document.write(`my name is ${this.name}, age ${this.age}`)}
}// 创建实例
let zhang2 = new People2('zhang', '20')
zhang2.eat2()
zhang2.speak2()
// console.log(zhang.eat2())
// console.log(zhang.speak2())// 创建实例
let wang2 = new People2('wang', '22')
wang2.eat2()
wang2.speak2()
// console.log(wang.eat2())
// console.log(wang.speak2())
2.2 类(模板):
2. 类(模板):1. 在现实生活中, 相似对象之间往往都有一些共同的组成特征 。 例如蜂鸟和老鹰都具有鸟类的特征, 因此它们可以被统称为鸟类 。2. 在 OOP 中, 类实际上就是对象的设计蓝图或制作配方 。 对象这个词, 有时候也叫做实例 。 所以, 老鹰是鸟类的一个实例 。 可以基于同一个类创建出许多不同的对象, 因为类更多的是一种模板 。 而对象则是在这些模板的基础上被创建出来的实体 。3. javascript 实际上压根没有类 。 该语言的一切都是基于对象的, 其依靠的是一套原型 (prototype) 系统 。 而原型本身实际上也是一种对象 。4. 在传统的面向对象语言中, 基于 Person 类创建了一个 Match 的新对象; 而在 javascript 中, 则是将现有的 Person 对象扩展成一个 Match 的新对象 。// 概念 -- 类(即 模板)
export class Person1 {// 初始化时需要传入什么内容是由 constructor 这里来定义的 。constructor(name, age) {// 特性(属性)this.name = namethis.age = age}// 动作(方法)eat() {document.write(`${this.name} eat something`)}speak() {document.write(`my name is ${this.name}, age ${this.age}`)}
}
3. 面向对象的三要素: 封装/继承/多态
如图所示:
1. 封装 (public:完全开放; protected:对子类开放; private:对自己开放)1. 封装: 数据的权限和保密 (利于数据, 接口的权限管理)。1. 封装主要用于阐述对象中所包含的内容 。 封装概念通常由两部分组成: 相关的数据 (用于存储属性), 基于这些数据所能做的事 (所能调用的方法)。2. 减少耦合, 不该外漏的不外漏1. 封装的目的是将信息隐藏, 即方法与属性的可见性 。 一般而言, 封装包括 封装数据和封装实现 。3. 在许多语言的对象系统中, 封装数据是由语法解析来实现的, 这些语言提供了 public(完全开放) / private(对自己开放/私有的) / protected(对子类开放) 这些关键字来限定方法和属性的可见性, 这种限定分类定义了 对象用户 所能访问的层次 。4. 但 javascript 并没有提供对这些关键字的支持, 只能依赖 变量的作用域 来实现封装特性, 而且只能模拟出 public 和 private 这两种封装性 。 除了 ECMAScript6 中提供的 let 之外, 一般通过函数来创建作用域 。5. ES6 尚不支持, 一般认为 _ 开头的属性为私有属性; 可以使用 typeScript 来演示 (typeScript 是 JavaScript 的超级)2. 继承1. 继承: 就是子类继承父类1. 通过继承这种方法, 可以非常优雅地实现对现有代码的重用 。 在传统的 OOP 环境中, 继承通常指的是类与类之间的关系, 但由于 javascript 中不存在类, 因此它的继承只能发生在对象之间 。2. 比如, 有一个 Person 的一般性对象, 其中包含一些 姓名、性别 之类的属性, 以及一些功能性函数, 如 步行、谈话、睡觉、吃饭 等。 然后, 需要一个 Programmer 对象时, 可以让 Programmer 继承自 Person; Programmer 对象只需要实现属于它自己的那部分特殊功能(如编写代码), 而其余部分重用 Person 的实现即可 。3. 当一个对象继承自另一个对象时, 通常会往其中加入新的方法, 以扩展被继承的老对象 。 通常将这一过程称之为 "B继承自A" 或 "B扩展自A" 。 另外对于新对象来说, 它可以根据自己的需要, 从继承的那组方法中选择几个来重新定义 。 这样做并不会改变对象的接口, 因为其方法名是相同的, 只不过当调用新对象时, 该方法的行为与之前不同了 。 这种重定义继承方法的过程叫做覆写 。3. 多态1. 同一接口, 不同实现 (不同表现); JS 应用极少 。1. 原因: 需要结合 java 等语言的 接口/重写/重载 等功能; 这些 JS 中是没有的 。1. 多态一词源于希腊文 polymorphism, 拆开来看是 poly(复数) + morph(形态) + ism, 从字面意思可以理解为 复数形态 。2. 多态的实际含义是: 同一个操作作用于不同的对象上面, 可以产生不同的解释和不同的执行结果 。 换句话说, 给不同的对象发送同一个消息的时候, 这些对象会根据这个信息分别给出不同的反馈 。3. Programmer 对象继承了上一级对象 Person 的所有方法 。 这意味着这两个对象都实现了 "talk" 等方法 。 现在, 代码中有一个叫做 “Match” 的变量, 即使是在不知道它是一个 Person 对象还是一个 Programmer 对象的情况下, 也依然可以直接调用该对象的 "talk" 方法, 而不必担心这会影响代码的正常工作 。 类似这种不同对象通过相同的方法调用来实现各自行为的能力, 称之为多态 。4. 多态背后的思想是将 "做什么" 和 "谁去做以及怎样去做" 分离开来, 也就是将 “不变的事物” 与 “可能改变的事物” 分离开来 。 把不变的部分隔离出来, 把可变的部分封装起来, 这给予了我们扩展程序的能力, 程序看起来是可生长的, 也符合开放——封闭原则, 相对于修改代码来说, 仅仅增加代码就能完成同样的功能, 这显然优雅和安全得多 。5. 多态最根本的作用是通过把 过程化的条件分支语句 转化为 对象的多态性, 从而消除这些条件分支语句 。
3.1 封装-代码示例
/**
1. 封装:*/
var myObject1 = (function(){var name = 'match'; // 私有 (private) 变量return {getName: function(){ // 公开 (public) 方法return name;}}
})();
console.log(myObject1.getName() );// 输出: match
console.log(myObject1.name) // 输出: undefined// // http://www.typescriptlang.org/play/ <线上转化代码网址>
// // 使用 typeScript 来演示封装效果
// class People3 {// // name age 相当于是 public 声明的属性
// name
// age
// // 定义 protected 属性(可以自己获取, 也可以在子类中获取)
// protected weight
// constructor(name, age) {// this.name = name
// this.age = age
// this.weight = 120
// }
// eat3() {// document.write(`${this.name}::: eat something`)
// }
// speak3() {// document.write(`my name is::: ${this.name}, age::: ${this.age}`)
// }
// }// class Students3 extends People3 {// num
// // 定义 private 属性(私有的, 只能在当前这个子类中使用, 不能通过方法调用)
// private girlFriend
// constructor(name, age, num) {// super(name, age)
// this.num = num
// this.girlFriend = '小红'
// }
// study3() { // 子类特有的方法
// document.write('<br>' + `${this.name} study::: ${this.num}` + '<br>')
// }
// getWeight3() {// document.write('<br>' + `${this.name}的体重::: ${this.weight}` + '<br>')
// }
// }
// // 使用方法
// let xiaoming3 = new Students3('小明', 333, 'cccc')
// xiaoming3.study3()
// xiaoming3.eat3()
// xiaoming3.getWeight3()
// console.log(xiaoming3.girlFriend) // 注意: 编译时会报错, 编译直接不通过; 因为 girlFriend 是私有的, 只能在子类 Students3 中去使用 。// 编译过之后的代码
class People3 {constructor(name, age) {this.name = name;this.age = age;this.weight = 120;}eat3() {document.write(`${this.name}::: eat something`);}speak3() {document.write(`my name is::: ${this.name}, age::: ${this.age}`);}
}
class Students3 extends People3 {constructor(name, age, num) {super(name, age);this.num = num;this.girlFriend = '小红';}study3() {document.write('<br>' + `${this.name} study::: ${this.num}` + '<br>');}getWeight3() {document.write('<br>' + `${this.name}的体重::: ${this.weight}` + '<br>');}
}
// 使用方法
let xiaoming3 = new Students3('小明', 333, 'cccc');
xiaoming3.study3();
xiaoming3.eat3();
xiaoming3.getWeight3();
console.log(xiaoming3.girlFriend); // 注意: 编译时会报错, 编译直接不通过; 因为 girlFriend 是私有的, 只能在子类 Students3 中去使用 。
3.2 继承-代码示例
/**
2. 继承:*
1. Person3 是父类, 公共的, 不仅仅是服务于 Students
2. 继承可以将公共方法抽离出来, 提高复用, 减少沉余*/
// 父类
class Person3 {constructor(name, age) {this.name = namethis.age = age}eat() {console.log(`${this.name}: eat something`)}speak() {console.log(`my name is: ${this.name}, age: ${this.age}`)}
}
// 子类: 子类继承父类
class Students3 extends Person3 {constructor(name, age, num) {super(name, age) // super 将 name, age 传递给父类来执行 。this.num = num}study() { // 子类特有的方法console.log(`${this.name} study something: ${this.num}`)}
}
// 使用方法
let xiaoming = new Students3('xiaoming', 10, 'aaa')
console.log(xiaoming.study())
console.log(xiaoming.eat())let lisi = new Students3('lisi', 111, 'bbbb')
console.log(lisi.study())
console.log(lisi.speak())
3.3 多态-代码示例
类图关系如图所示:
/**
3. 多态:*
1. 我们只能通过这种方式去演示, 效果不是特别的好 。
2. 它不像 java 一样, 那样的明显; 很重要的原因就是 JS 是一门弱类型的语言 。
3. 保持子类的灵活性和开放性 。
4. 面向接口编程 。*/
class Animal1 {constructor (name) {this.name = name}saySomething() {console.log('saySomething 多态')}
}class Dog1 extends Animal1 {constructor (name) {super(name)}saySomething() {console.log('____Dog eat DDDD')}
}class Mouse1 extends Animal1 {constructor (name) {super(name)}saySomething() {console.log('____mouse1 eat MMMM')}
}let d1 = new Dog1('dog')
let m1 = new Mouse1('mouse1')
console.log(d1.saySomething())
console.log(m1.saySomething())
以上代码打印结果:
之前有整理过部分知识点, 现在将整理的相关内容, 验证之后慢慢分享给大家; 这个专题是 “前端设计模式” 的相关专栏; 不积跬步，无以至千里, 戒焦戒躁 。
《前端设计模式》专栏上篇:搭建开发环境
《前端设计模式》专栏下篇: 面向对象-Class类
如果对大家有所帮助，可以点个关注、点个赞; 文章会持续打磨 。
有什么想要了解的前端知识, 可以在评论区留言, 会及时分享所相关内容 。
前端 JavaScript 设计模式前奏--面向对象-封装、继承、多态相关推荐
- 大数据笔记8—java基础篇4（面向对象-封装-继承-多态）
面向对象 一.面向对象 1.面向过程 1.2.举例 1.3.总结 二.面向对象 1.简述 2.举例 3.思想特点 2.1.类的定义格式 2.1.1.简述 2.2.2.格式 2.3.3.示例 三.类的使 ...
- (十)Core Java 面向对象(封装,继承,多态,接口) -02 (96)
目录 : 24 ). 面向对象(聚集关系) 25 ). 面向对象(子父类中变量的特点) 26 ). 面向对象(子父类中函数的特点-覆盖) 27 ). 面向对象(子父类中构造函数的特点 ...
- 面向对象封装继承多态五大基本原则魔法方法反射
目录 面向对象 三大基本特征 五大基本原则 魔法方法 反射 面向对象 什么是面向对象 使用模板的思想,将世界万事万物使用对象来表示一个类型 面向对象和面向过程的区别: 面向对象的不就是使用程序处理事情 ...
- 猜丁壳（面向对象 封装 继承 多态）
创建三个包: util包中的Constans是用来存储常量的: util包中的MyUtil是用来存储工具类的: service包中的Player定义玩家的共同属性及方法: service包中的Comp ...
- c语言编程 菲薄拉,C语言设计模式-封装-继承-多态
快过年了,手头的工作慢慢也就少了,所以,研究技术的时间就多了很多时间,前些天在CSDN一博客看到有大牛在讨论C的设计模式,正好看到了,我也有兴趣转发,修改,研究一下. 记得读大学的时候,老师就告诉我们 ...
- python多态的三种表现形式_python小结----面向对象的三大特征(封装,继承,多态)
面向对象的三大特征: 封装,继承,多态 面向对象的编程思想核心:高类聚,低耦合–程序的设计模式范畴 封装 什么是封装: 在面向对象编程的思想中,对代码进行高度封装,封装又叫包装 封装就是指将数据或者函 ...
- python 参数类型的多态_【Python】面向对象：类与对象\封装\继承\多态
六.Python面向对象--类与对象\封装\继承\多态 1.什么是面向对象编程 1.1 程序设计的范式:程序可控,易于理解 1.2 抽象并建立对象模型 1.3 程序是不同对象相互调用的逻辑.每个对象在 ...
- python--编写程序：实现乐手弹奏乐器，乐手可以弹奏不同的乐器而发出不同的声音------使用类的封装继承多态的问题/使用面向对象的思想，设计自定义类，描述出租车和家用轿车的信息
编写程序:实现乐手弹奏乐器,乐手可以弹奏不同的乐器而发出不同的声音 ------使用类的封装继承多态的问题 class Instrumnet():#乐器类def make_sound(self):pa ...
- Day55-每日一道Java面试题-Java 面向对象编程三大特性: 封装 继承 多态
Java 面向对象编程三大特性: 封装 继承 多态 封装 封装把一个对象的属性私有化,同时提供一些可以被外界访问的属性的方法,如果属性不想被外界访问,我们大可不必提供方法给外界访问.但是如果一个类没有 ...
最新文章
- 最全面的homogeneous单应性坐标的定义，以及不同投影，仿射，相似，刚体变换矩阵的关系和自由度分析
- JS脚本语言 JavaScript
- 使用SQLite学习SQL
- 用户控件中使用相对路径问题
- 赛尔原创 | N-LTP：基于预训练模型的中文自然语言处理平台
- eclipse调试java web_eclipse调试web项目
- 【深度学习原理】交叉熵损失函数的实现
- eureka多了一个莫名其妙的服务_这些手游服务器全部飘红，每一个服务器都人多到爆满...
- 微信小程序获取当前地理位置中文_微信小程序获取位置信息
- 面试题：synchronized的底层实现（偏向锁，轻量级锁，重量级锁）
- 项目采集自动刷新 php,PHP168 CMS自动采集-PHP168 CMS自动更新-齐博CMS站群管理系统...
- unity游戏开发之游戏过审后 国行PS4将在3月20日发售
- Windows debugging tools
- Excel 数据统计小技巧
- FaceBoxes论文阅读
- php 安装、使用sphinx
- 三、道阻且长之单例模式
- Codeforces 1612C. Keshi Is Throwing a Party
- 实例化对象是什么意思，什么是实例化，什么是对象。多态性
- axios（5）——请求拦截器和响应拦截器
热门文章
- flex换行后如何设置行距？
- 2019年区块链发展10大趋势（转）
- 多变量高斯分布的KL散度
- github创建分支并提交代码至分支
- qnx 设备驱动开发_QNX操作系统及网络设备驱动模块
- Gilde 加载高斯模糊图片没有走到listener回调原因记录
- 数学建模-分类模型（SPSS）
- Error parsing SQL Mapper Configuration. Cause: org.apache.ibatis.builder.BuilderException: Error cre
- uniapp、uview——图片上传（单图上传、多图上传、多组照片上传、图片回显）
- Virtual Data Augmentation: 虚拟数据扩增技术