javascript面向对象的三大特性

article/2025/1/19 3:05:36

面向过程和面向对象

区别

  • 面向过程：关注的是过程 中的每一个环节
    • 吃蛋炒饭：买鸡蛋→买米→蒸米→炒蛋→炒米→混合→搅拌→蛋炒饭
  • 面向对象：关注的是让对象 做事情
    • 找一个对象（老公或老婆）.做蛋炒饭

面向对象编程

​ Object Oriented Programming，简称 OOP ，是一种编程开发思想 。它将真实世界各种复杂的关系 ，抽象为一个个对象 ，然后由对象之间的分工与合作，完成对真实世界的模拟。

// ① 现实需求（盖大楼）

// ② 需要哪些对象（设计师、搬运工、砌墙师、木匠、导购…）

// ③ 分工与合作

// ④ 完成项目

面向对象的好处

  • 易于分工与合作，适合大型项目的开发。
  • 健壮性强，易于维护。

面向对象的特征

  • 封装:对象把实现过程封装在方法中，调用者只需要调用即可。而不需要了解过程。
  • 继承：子承父业。 对象b可以继承对象a中的属性和方法。可以减少代码冗余
  • [多态]：一种事物（动物），可以具有多种表现形式（鸭、狗、猫…）。

面向对象不是替代面向过程，而是面向过程的更高一级的封装。

类和实例和对象的比较

类：类型，对具体事物的一个抽象认识，是抽象出来的结果。

类的说明：
类就是一组相关属性和行为定义的集合。
属性：对于事物特征的描述，一般是名词或者形容词。

  • 传统的编程语言：java、C# → class
  • ES3.0 和 ES5.0 没有类的概念 ECMAScript → ES
  • 构造函数模拟类
  • ES6.0 有类概念→ class

对象：事物的具体表现。

  • 创建对象：new 类名();
  • ES3.0 和 ES5.0 ： new 构造函数名();

类和实例关系：类是实例的模板，实例是类的一个具体的实现。

自定义构造函数创建对象

  • 自定义构造函数的语法：

    function 构造函数名(形参…){

    ​ this.key = value;

    ​ this.key = value;

    }

  • 创建对象：new 构造函数(实参…);

new 这个关键字干了什么？

  1. 在内存中申请了一块空间，存放了一个对象。（看不见）
  2. 让构造函数内部的this指向该空间（看不见）
  3. 通过this向内存中空的对象中添加属性和方法（看的见）
  4. new关键字最后将this返回给外部变量（看不见）

构造函数和实例对象的关系

  • 构造函数：构造函数是对象的模板。
  • 实例对象：具体存在的，对象是类的一个实例。

构造函数和普通函数的区别

相同：都是函数

不同：命名规范：
+构造函数：帕斯卡
+普通函数：驼峰

调用方式：
+ 构造函数： new 构造函数();
+ 普通函数：普通函数();

  • 构造函数：
    • 内置的构造函数：Object、Date、Array
    • 自己定义的：Dog、Cat、Hero

--------------------------------------------------理解了对象，类，构造函数，那么我们就聊聊，面向对象的特性----------------------------------

封装：

封装(把相关的信息（无论数据或方法）存储在对象中的能力)

我的理解是：一个页面或多个页面公用的方法或功能，用一个方法来实现，多个页面调用就可以实现想要的功能效果；
这样做的好处是：减少代码冗余，页面清晰，可读性强，好维护；
常用于封装插件，方法公用；

封装案例：

<div class="box"><div class="hd"><span class="current span">标签一</span><span class="span">标签二</span><span class="span">标签三</span><span class="span">标签四</span></div><div class="bd"><ul><li class="show item">我是标签一</li><li class="item">我是标签二</li><li class="item">我是标签三</li><li class="item">我是标签四</li></ul></div>
</div><script src="jquery-1.12.4.min.js"></script><script src="jquery.tab.js"></script><script>// 调用tab函数后表示给类名为box的元素设置选项卡切换效果$('.box').tab();$('.box2').tab();</script>
</body>
</html>

$.fn === $.prototype

jquery.tab.js 文件：(function () {// 给$.fn设置一个tab方法：$.fn.tab = function () {// this内部的类名为span的元素为顶部操作按钮// this内部的类名为item的元素为底部显示区域var $spans = this.find('.item');this.find('.span').on('click', function () {$(this).addClass('current').siblings().removeClass('current');$spans.eq($(this).index()).addClass('show').siblings().removeClass('show');});};})();

还有经常用的函数封装复用

继承:

继承(由另一个类（或多个类）得来类的属性和方法的能力)

我的理解是 ： 子承父业 ,继承f父级的方法和属性为自己所用；
实现继承的方法：利用原型prototype来实现；

// 学生类：属性（姓名、年龄、性别）；方法（吃、打招呼）// 医生类：属性 （姓名、年龄、性别）；方法（吃、打招呼）// 【人类】-父类// 构造函数function Person(name, age, gender) {this.name = name;this.age = age;this.gender = gender;};// 人类的原型Person.prototype.eat = function () {console.log('吃东西...');};Person.prototype.sayHi = function () {console.log('大家好..');};// 【学生类】-子类// 构造函数function Student(name, age, gender) {// this 代表当前创建的对象 stu1、stu2// 【借用继承】Person.call(this,name,age,gender);};// 原型继承Student.prototype = new Person();Student.constructor = Student;// 创建了一个学生对象var stu1 = new Student('张三', 10, '男');// 创建了一个学生对象var stu2 = new Student('李四', 20, '男');

经常用的是在vue原型中加一个属性方法，在vue全局中都可以使用
例如：

// 引入axios
import axios from '@/assets/js/axios'
Vue.prototype.$axios = axios

多态:

多态(一个对象在不同情况下的多种形态)；

多态的实际含义是：同一操作作用于不同的对象上面，可以产生不同的解释和不同的执行结果。换句话说，给不同的对象发送同一个消息的时候，这些对象会根据这个消息分别给出不同的反馈。

//主人家里养了两只动物，分别是一只鸭和一只鸡，当主人向它们发出“叫”的命令时，鸭会“嘎嘎嘎”地叫，而鸡会“咯咯咯”地叫。
//这两只动物都会以自己的方式来发出叫声。它们同样“都是动物，并且可以发出叫声”，但根据主人的指令，它们会各自发出不同的叫声。一般写法：
var makeSound = function( animal ){if ( animal instanceof Duck ){console.log( '嘎嘎嘎' );}else if ( animal instanceof Chicken ){console.log( '咯咯咯' );}
};var Duck = function(){};
var Chicken = function(){};makeSound( new Duck() );        //嘎嘎嘎
makeSound( new Chicken() );    //咯咯咯

下面是改写后的代码，首先我们把不变的部分隔离出来，那就是所有的动物都会发出叫声：var makeSound = function( animal ){animal.sound();
};
然后把可变的部分各自封装起来，我们刚才谈到的多态性实际上指的是对象的多态性：var Duck = function(){}  Duck.prototype.sound = function(){console.log( '嘎嘎嘎' );
};var Chicken = function(){}Chicken.prototype.sound = function(){console.log( '咯咯咯' );
};makeSound( new Duck() );        //嘎嘎嘎
makeSound( new Chicken() );    //咯咯咯
现在我们向鸭和鸡都发出“叫唤”的消息，它们接到消息后分别作出了不同的反应。如果有一天动物世界里又增加了一只狗，这时候只要简单地追加一些代码就可以了，而不用改动以前的makeSound函数，如下所示：var Dog = function(){}Dog.prototype.sound = function(){console.log( '汪汪汪' );
};makeSound( new Dog() );     //汪汪汪

多态背后的思想是将“做什么”和“谁去做以及怎样去做”分离开来，也就是将“不变的事物”与 “可能改变的事物”分离开来。在这个故事中，动物都会叫，这是不变的，但是不同类型的动物具体怎么叫是可变的。把不变的部分隔离出来，把可变的部分封装起来，这给予了我们扩展程序的能力，程序看起来是可生长的，也是符合开放-封闭原则的，相对于修改代码来说，仅仅增加代码就能完成同样的功能，这显然优雅和安全得多。

关于封装继承的使用，我写了一个关于金额转换的案例，有兴趣的可以去看一下?=>金额转换案例


http://chatgpt.dhexx.cn/article/DeEp572o.shtml

相关文章

JS面向对象的三大特性简述

JS面向对象的三大特性简述

1.语法 1.1 对象的声明语法 1.1.1通过字面量方式新建对象 var obj {}var obj1 {name: hhupp,call: function() {console.log(CALL)}}console.log(obj, obj)console.log(obj1, obj1)obj1.call() 1.1.2通过new关键词新建对象&#xff08;不推荐--和通过字面量方式新建对象并无…
阅读更多...
一个小实验告诉你，内存速度到底比硬盘快多少!!!

一个小实验告诉你，内存速度到底比硬盘快多少!!!

近期在Linux下做了一个小实验&#xff0c;亲身体会了内存的速度到底比硬盘快多少。 实验步骤如下&#xff1a; 1. df #查看磁盘信息 2. dd if/dev/zero of /dev/shm/file bs1M count3000 3. dd if/dev/zero of/mnt/file bs1M count3000由此可见&#xff0c;内存的读取速…
阅读更多...
硬盘和内存的速度

硬盘和内存的速度

1. 简介 随着电子技术的发展&#xff0c;内存和硬盘的速度都在提高&#xff0c;但同时&#xff0c;旧技术因为应用场景依然存在&#xff0c;速度上有个大致的理解上有必要的。 2. 内存的速度 3. 存储介质的速度 操作平台 读 写 NVME PCIE SSD(gen3 4x) 2.1 GB/s 1.2 GB/s…
阅读更多...
AMDR5-5600X+光威天策3200 16G AIDA64内存速度测试

AMDR5-5600X+光威天策3200 16G AIDA64内存速度测试

1. 2400MHz&#xff0c;双通道 2. xmp 3200MHz
阅读更多...
CPU、寄存器、内存、磁盘、网络性能分析

CPU、寄存器、内存、磁盘、网络性能分析

介绍 寄存器 最靠近 CPU 的控制单元和逻辑计算单元的存储器&#xff0c;就是寄存器了&#xff0c;它使用的材料速度也是最快的&#xff0c;因此价格也是最贵的&#xff0c;那么数量不能很多。 存储器的数量通常在几十到几百之间&#xff0c;每个寄存器可以用来存储一定的字节…
阅读更多...
《手机网速、CPU、内存和闪存》的速度制衡之道

《手机网速、CPU、内存和闪存》的速度制衡之道

一、手机网速、CPU、内存与闪存的速度制衡之道&#xff1a; 手机响应速度的快慢很大程度上是多方面因素共同作用的结果&#xff0c;例如高性能的处理器、快速的内存和闪存标准、良好的网络链接性能、优化完善的操作系统等等&#xff0c;这就是Iphone手机的流畅体验要远远好于大…
阅读更多...
类比 -高速缓存Cache/内存/磁盘读写速度类比

类比 -高速缓存Cache/内存/磁盘读写速度类比

1、计算机设备、组件数据传输速度类比 计算机设备、组件读类比机械硬盘0.1G/S蜗牛量级&#xff08;60m/h&#xff09; &#xff0c; 以机械盘为基准固态盘1.3G/S龟速量级&#xff08;780m/h&#xff09;&#xff0c;13倍机械硬盘内存30G/S跑步量级&#xff08;23.4km/h&#x…
阅读更多...
内存的速度和CPU缓存速度比较

内存的速度和CPU缓存速度比较

转载于&#xff1a;https://blog.csdn.net/moyeshuier/article/details/103943355 这之前&#xff0c;我必须先讲一下cpu cache 内存三个组件在运行程序时候的关联&#xff0c;有了这个基础我后面才能讲锁。 那今天讲的是缓存一致性&#xff0c;首先要理解我说的缓存是什么意思…
阅读更多...
计算机内存加速,电脑内存运行速度如何提升

计算机内存加速,电脑内存运行速度如何提升

电脑内存运行速度如何提升是一个经常提到的话题，需要了解一些基本的电脑知识来处理，下面学习啦小编介绍内存升级提高电脑运行速度的办法。 电脑内存运行速度提升方法 1.调整高速缓存区域的大小。所谓高速缓存，是指系统在读取磁盘、光盘上的数据时，采取“预读取”技术，也 就…
阅读更多...
GPU 内存结构

GPU 内存结构

GPU 和CPU通过 VLink 或者PCLe 相连。 每个SM 又含有多个cuda core&#xff0c;多个SM共享全局内存&#xff0c;通过L2 高速缓存和全局内存进行相连&#xff0c;不同代的GPU之间的体系结构有所不同。 右边是一个SM 上的 内存&#xff0c;有共享内存&#xff0c;局部内存&…
阅读更多...
计算机专业电脑内存,电脑内存大小是否和速度有关？

计算机专业电脑内存,电脑内存大小是否和速度有关？

我们总觉得内存大一点，就是运行速度一定是快。现在市面上的电脑，配置已经很强大了，动不动内存就上12G、16G的笔记本、一体机电脑随处可见。电脑已经到了瓶颈且性能过剩的年代，其实内存越大就代表电脑速度越快，这里有些误区，今天就让小编跟大家说说内存这点事儿。 计算机运…
阅读更多...
linux怎么看内存时序,内存速度和时序重要么

linux怎么看内存时序,内存速度和时序重要么

描述 最近是跟内存耗上了，其一是手里没有其它硬件可测，更重要的是想趁着这段时间，把内存与性能之间的影响都慢慢测一下。今天测的就是时序与内存性能之间的关系了。时序很重要吗？答案是肯定的，但是时序对内存性能的影响到底有多大呢？下面就详细的测试一下。 用来测试的内…
阅读更多...
手机测试内存速度的软件,如何查看手机内存速度？手机内存读取速度测试_手机内存速度多少算正常...

手机测试内存速度的软件,如何查看手机内存速度？手机内存读取速度测试_手机内存速度多少算正常...

如何查看手机内存速度&#xff1f;手机内存速度多少算正常&#xff1f;下面小编就给大家介绍下手机内存读取速度测试发方法&#xff01; 今早&#xff0c;手机内存问题再度引起热潮&#xff0c;很多朋友都在讨论手机内存速度问题。那么问题来了&#xff0c;如何正确测试自己手机…
阅读更多...
双倍数据率同步動態隨機存取記憶體（英語：，簡稱DDR SDRAM）

双倍数据率同步動態隨機存取記憶體（英語：，簡稱DDR SDRAM）

双倍数据率同步動態隨機存取記憶體&#xff08;英語&#xff1a;&#xff0c;簡稱DDR SDRAM&#xff09;為具有雙倍資料傳輸率的SDRAM&#xff0c;其資料傳輸速度為系統時脈的兩倍&#xff0c;由於速度增加&#xff0c;其傳輸效能優於傳統的SDRAM。 DDR SDRAM 研發商SamsungJED…
阅读更多...
古风排版java_古风排版java版-Go语言中文社区

古风排版java_古风排版java版-Go语言中文社区

7-7 古风排版(20 分) 中国的古人写文字&#xff0c;是从右向左竖向排版的。本题就请你编写程序&#xff0c;把一段文字按古风排版。 输入格式&#xff1a; 输入在第一行给出一个正整数N(<100)&#xff0c;是每一列的字符数。第二行给出一个长度不超过1000的非空字符串&#…
阅读更多...
古风排版问题

古风排版问题

7-7 古风排版 中国的古人写文字&#xff0c;是从右向左竖向排版的。本题就请你编写程序&#xff0c;把一段文字按古风排版。 输入格式&#xff1a; 输入在第一行给出一个正整数N&#xff08;<100&#xff09;&#xff0c;是每一列的字符数。第二行给出一个长度不超过1000…
阅读更多...
古风排版 （

古风排版 （

中国的古人写文字&#xff0c;是从右向左竖向排版的。本题就请你编写程序&#xff0c;把一段文字按古风排版。 输入格式 输入在第一行给出一个正整数 NN&#xff0c;是每一列的字符数。第二行给出一个长度不超过 10001000 的非空字符串&#xff0c;以回车结束。 输出格式 按…
阅读更多...
开源中文古风排版样式，简约美观，超级好用！

开源中文古风排版样式，简约美观，超级好用！

只推荐用过的好用工具&#xff0c;关注DD帮你提高效率 如果有一篇古诗&#xff0c;要放在Web页面上&#xff0c;你会如何排版呢&#xff1f;如果要实现类似语文书中的那种效果&#xff0c;有没有办法快速实现呢&#xff1f; 今天给大家推荐一个非常好用的开源项目&#xff0c;就…
阅读更多...
微分和导数的关系是什么？

微分和导数的关系是什么？

在初学微分和导数时&#xff0c;虽然感觉概念不复杂&#xff0c;但是我对两者的关系有点模糊&#xff0c;比如以下问题就觉得模棱两可&#xff1a; 对于导数链式法则&#xff0c; d y d x d y d u d u d x \frac {dy}{dx} \frac {dy}{du} \frac {du}{dx} dxdy​dudy​dxdu​…
阅读更多...
重新认识微分和导数

重新认识微分和导数

之前写过不少关于微分和导数的文章&#xff1a; 微分是什么&#xff1f; dx&#xff0c;dy是什么&#xff1f; 微分和导数的关系是什么&#xff1f; 今天这篇文章再换一个角度来谈论微分和导数&#xff0c;让我们从微分出现的原因说起。 1 微分出现的原因 出于种种原因…
阅读更多...
推荐文章

Copyright @ 2022~2023