四天学会JS高阶(学好vue的关键)——深入面向对象(理论+实战)(第三天)

 ***本章面试使用居多*  理论篇**

一、编程思想

1.1 面向过程 JS 前端居多

按照步骤
性能高 适合跟硬件关系很紧密
没有面向对象易维护易复用易扩展

1.2 面向对象 java典型

按照功能,把事务分别成一个个对象,对象之间分工合作
比较灵活 适合多人合作的大型软件项目
三大特性:
想象将拖拉机改装成了扫地机理解特性
封装性
继承性
多态性 多种功能

二者区别:打游戏刚开始是面向对象的,中期互相帮忙的时候变成了面向过程

二、构造函数

封装是面向对象的比较重要一部分,js面向对象可以通过构造函数实现封装
1.构造函数体现了面向对象的封装性
2.构造函数实现的对象互不影响

   //构造函数  公共的属性和方法封装到构造函数function Star (uname, age) {this.uname = unamethis.age = agethis.sing = function () {console.log('唱歌')}}// 只要一new  就创建了一个实例对象const ldh = new Star('刘德华', 60)const zxy = new Star('张学友', 60)// 各个对象之间互不影响console.log(ldh === zxy)// 理论上是一样的  false  说明不一样 各个对象之间的属性互不影响console.log(ldh.sing === zxy.sing);

构造函数创建有问题:浪费内存,如果里面的属性是添加方法的话,因为函数属于复杂数据类型,所以需要先将内存的地址存到栈中,实际上的函数存到了堆中 如果对象有100个,这样就不浪费了内存 如果只是单纯的属性名属性值用完就销毁。

在这里插入图片描述
在这里插入图片描述
JS实现面向对象通过构造函数,但是构造函数会有浪费内存(复杂数据类型),创建一个对象开一个内存去存funciton()

所以所有的对象使用同一个函数,需要节省内存,我们就引入到了原型:

三、原型

构造函数里面浪费内存的问题,对象中的方法。
目标:能够利用原型对象实现方法(就是函数)共享。

3.1 原型

定义:
一些共享的属性或者方法不应该写在构造函数上 ,写在原型上 原型是一个对象,所以称为原型对象。
构造函数都有一个prototrpe属性,这就是原型 ——原型对象

 <script>//构造函数  公共的属性和方法封装到构造函数// 公共的属性写在构造函数中  公共的方法写在原型对象身上function Star (uname, age) {this.uname = unamethis.age = age// this.sing = function () {//     console.log('唱歌')// }}// 构造函数的属性prototype对象  这个对象可以挂载函数 是对象 可以使用对象.属性的方式进行赋值  相当于给对象追加属性  只调用一个Star.prototype.sing = function () {console.log('唱歌')}// 只要一new  就创建了一个实例对象const ldh = new Star('刘德华', 60)const zxy = new Star('张学友', 60)ldh.sing()zxy.sing()// 各个对象之间互不影响console.log(ldh === zxy)// 理论上是一样的  false  说明不一样 各个对象之间的属性互不影响  //trueconsole.log(ldh.sing === zxy.sing)// 写法是一个属性 但打印出来是一个对象console.dir(Star.prototype)</script>

原型的作用:共享方法 把那些不变的方法直接定义在prototype对象上
构造函数和原型里面的this指向谁?实例化的对象
案例:数组里面没有直接的方法,我们自己写一个:
只要一执行 就能够求和 自定义求和 求最大值
任何对象都能使用 放在prototype对象上

求最值

 //自己定义  数组扩展方法 和最大值// 1.我们定义的这个方法  任何一个数组实例对象都可以使用// 2.自定义的方法 写到数组.protot ype上// 1.求最大值const arr = [1, 23]// 同const arr = new Array(1, 2)Array.prototype.max = function () {//展开运算符  死记硬背return Math.max(...this)// 原型函数里面的this 指向实例对象 Array}console.log(arr.max())console.log([2, 6, 8].max());

求和

 // 求和方法Array.prototype.sum = function () {return this.reduce((prev, item) => prev + item, 0)}console.log([1, 2, 3].sum());

打印的两种方式和区别
前者打印出的是外部结构 后者打印出的是让人更容易理解 例如:数组 前者打印出的是 [ 内容 ],后者是Array 所以当我们想要打印的是函数或者对象的时候,最好使用dir打印 看的更清楚

 const arr = [1, 223, 543]console.log(arr)console.dir(arr);

3.2 constructor属性

constructor属性告诉prototype对象他的爸爸是谁)——是构造函数
使用场景:
利用原型封装属性时,属于赋值,这样修改后的原型对象就不在指向构造函数了

 <script>// constructor  构造函数function Star () {}// Star.prototype.sing = function () {//     console.log('唱歌')// }// Star.prototype.dance = function () {//     console.log('跳舞')// }console.log(Star.prototype)Star.prototype = {//重新指回创造这个原型对象的 构造函数constructor: Star,sing: function () {console.log('唱歌')}, dance: function () {console.log('跳舞')}}console.log(Star.prototype)// const ldh = new Star()// // console.log(Star.prototype);// console.log(Star.prototype.constructor === Star);</script>

3.3 对象原型

为什么实例对象可以访问原型上的方法:对象原型
包含在实例对象中

  __proto__

里面有一个constructor 所有的实例对象都可以访问原型对象
实例对象中的__proto__属性可以获取构造函数的prototype原型对象
原型对象里面装的是公共属性 原型对象是由构造函数得来的· 实例对象中说原型对象不适用prototype,使用__proto__ 所以既然有这个属性 那么打印实例对象的时候就会打印出原型对象 在浏览器中显示是prototype
在这里插入图片描述
结合上面图示搞懂之间的关系

function Person () {this.name = name}const peppa = new Person('佩奇')console.log(peppa)console.log(Person.prototype.constructor === Person)//实例对象 构造函数   原型对象之间的关系console.log(peppa.__proto__ === Person.prototype)console.log(peppa.__proto__.constructor === Person);

3.4 原型继承

构造了两个分别是Man、Woman的构造函数,里面有很多类似属性,也就是公共属性,需要封装到一个对象上,然后将这个对象赋值给原型对象,实例对象通过原型对象获得公共属性。即为原型继承
注意:因为是对象赋值,那么就会把原来原型对象可以指向构造函数的属性失去,还需要给它指回去。

  <script>// 继续抽取   公共的部分放到原型上const Person = {eyes: 2,head: 1}//女人 构造函数  想要继承Personfunction Woman () {}//woman  通过原型来继承Person  把公共属性给了原型对象Woman.prototype = Person// 指回原来的构造函数Woman.prototype.constructor = Womanconst red = new Woman()// console.log(red.eyes)// console.log(Woman.prototype === red.__proto)console.log(red)console.log(Woman.prototype)//男人function Man () {}Man.prototype = PersonMan.prototype.constructor = Manconst pink = new Man()// console.log(pink);console.log(pink);</script>

赋值时,使用同一个对象所以添加其中一个原型对象的属性 另外一个也要添加 所以不能是同一个Person
在这里插入图片描述
结构相同 但是不同对象里面包含相同属性和方法——采用构造函数 new每次都会创建一个新的对象

  <script>// 继续抽取   公共的部分放到原型上// const Person1 = {//     eyes: 2,//     head: 1// }// const Person2 = {//     eyes: 2,//     head: 1// }// 结构相同 对象不同function Person () {this.eyes = 2this.head = 1}console.log(new Person())//女人 构造函数  想要继承Personfunction Woman () {}//woman  通过原型来继承Person  把公共属性给了原型对象//父构造函数(父类)  子构造函数//子类的原型=new 父类()Woman.prototype = new Person()// 指回原来的构造函数Woman.prototype.constructor = WomanWoman.prototype.baby = function () {console.log('宝贝')}const red = new Woman()console.log(red)//男人function Man () {}Man.prototype = new Person()Man.prototype.constructor = Manconst pink = new Man()console.log(pink);</script>

3.5 原型链

为什么Object对象是最大的对象?

只要是原型对象就有constructor,指向构造函数 只要是对象有__proto__ 指向原型对象

公共属性会被放在prototype
死记硬背:只要原型对象上有这个公共属性,只要在原型链上的对象都可以使用

在这里插入图片描述

原型链是什么:查找规则 查找属性或者方法的一条路 先从自身原型对象 如果没有 就往上一层查找 如果有就使用 如果没有 就去往上上一层查找 在上面一层能查最后的任何一个地方 在没有 再去最大的一层查找 因为有原型链的存在 实例对象可以实现最上一层的方法 往上查找到null就没有这个属性了。

在这里插入图片描述
instanceof运算符 是用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上
死记硬背:换句话就是在这条原型链上,因为原型链的存在,对象和实例对象 以及原型对象之间可以互相指向,所以直接简单理解为 小对象 instanceof 大对象 小对象属与大对象 结合原型链

console.log(ldh instanceof Person)console.log(ldh instanceof Object)console.log(ldh instanceof Array)console.log([1, 2, 3] instanceof Array)console.log(Array instanceof Object)  //万事皆对象

四、 综合案例

首先模态框里面有open方法和close方法
模态框使用构造函数
open方法和close方法使用构造函数的原型对象上 这样,每一个模块狂都可以使用open和close方法
不理解的是:构造函数提到了模态框 两个方法中=》模态框

模态框业务 构造函数

使用构造函数创建模态框内容
使用this 才能使得创建不同的盒子都可以轻松利用构造函数 而不是const

打开oppen 显示

将创建的模态框显示在页面中
在这里:为什么要将属性放在构造函数中,将方法放在原型对象中?首先就要想到是由于原型对象的特性,它是用于共享属性和方法,所以如果对于每个实力来说,属性如果是唯一的,就放在构造函数中,不是唯一,就放在原型对象上。

关闭 模态框 挂载

思路:关闭模态框的时候 因为是要出现模态框才能关闭 所以关闭语句要在open方法中写

难点理解:我们使用箭头函数 这样便于this指向实例对象 而不是箭头函数的调用者i,这样才可以调用close方法

出现的bug,多次点击会出现多个模态框 解决:准备open的时候 先判断页面中有没有modal盒子 有就移除 没有就添加
为什么是在open的时候来判断 是因为点击open方法的时候才会有模态框

 <button id="delete">删除</button><button id="login">登录</button><button id="add">新增</button><!-- <div class="modal"><div class="header">温馨提示 <i>x</i></div><div class="body">您没有删除权限操作</div></div> --><script>// 1.modal构造函数封装——模态框function Modal (title = '', message = '') {console.log(title, message)//创建modal模态框盒子// 1.1 创建div标签// 因为是构造函数 所以使用this  this经过new 谁new谁是实例对象  两个不同的盒子 this指向当前的盒子this.modalBox = document.createElement('div')// 1.2 给div标签添加类名为modalthis.modalBox.className = 'modal'// 1.3  modal盒子内部填充 2个div标签并且修改文字内容this.modalBox.innerHTML = `<div class="header">${title} <i>x</i></div><div class="body">${message}</div>`console.log(this.modalBox)}// new Modal('温馨提示', '您没有权限删除操作')// new Modal('友情提示', '您还没登录呢')//  当我们打印函数时,想要知道里面的属性使用dir// console.dir(Modal)// 2.给构造函数原型对象挂载open方法  this指向函数的调用者 函数的调用者是实例对象Modal.prototype.open = function () {console.log(this)// 先判断页面中有没有modal盒子 有就移除  没有就添加const box = document.querySelector('.modal')// 逻辑与中断  如果有 就执行remove  没有就执行中断这条语句 继续执行下面的语句box && box.remove()//注意这个方法不要用箭头函数//把刚才创建的modalBox显示到页面body中document.body.append(this.modalBox)// 要等着盒子显示出来 就可以绑定点击事件了// 使用箭头函数的原因是因为箭头函数中无this 所以this才会指向函数的调用者this.modalBox.querySelector('i').addEventListener('click', () => {// 这个地方需要用到箭头函数// 这个this指向 实例对象  调用close方法进行移除this.close()})}// 测试一下 点击删除按钮document.querySelector('#delete').addEventListener('click', () => {// 先调用modal构造函数const del = new Modal('温馨的提示', '您没有权限删除操作')// 实例对象调用open方法//使用原型链的原理:Modal.prototype 上定义了一个 open 方法。这意味着 open 方法是 Modal 构造函数的原型方法,并且会被所有通过 Modal 构造函数创建的实例所共享。 当调用 del.open() 时,JS引擎首先会查看 del 实例自身是否有一个名为 open 的方法。由于 open 方法是定义在原型上的,而不是直接定义在实例上的,所以引擎会在 del 实例的原型链上查找这个方法del.open()})// 测试一下 点击登录按钮document.querySelector('#login').addEventListener('click', () => {//先调用Modal构造函数const login = new Modal('友情的提示', '您没有注册呢')//实例对象调用open方法login.open()})// 测试一下 点击新增按钮document.querySelector('#add').addEventListener('click', () => {//先调用Modal构造函数const add = new Modal('提示', '您没有新增权限呢')//实例对象调用open方法add.open()})// 3.给构造函数原型对象挂载close方法Modal.prototype.close = function () {this.modalBox.remove()}</script>

完整代码设计

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>面向对象封装消息提示</title><style>.modal {width: 300px;min-height: 100px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);border-radius: 4px;position: fixed;z-index: 999;left: 50%;top: 50%;transform: translate3d(-50%, -50%, 0);background-color: #fff;}.modal .header {line-height: 40px;padding: 0 10px;position: relative;font-size: 20px;}.modal .header i {font-style: normal;color: #999;position: absolute;right: 15px;top: -2px;cursor: pointer;}.modal .body {text-align: center;padding: 10px;}.modal .footer {display: flex;justify-content: flex-end;padding: 10px;}.modal .footer a {padding: 3px 8px;background: #ccc;text-decoration: none;color: #fff;border-radius: 2px;margin-right: 10px;font-size: 14px;}
.modal .footer a.submit {background-color: #369;}</style>
</head><body><button id="delete">删除</button><button id="login">登录</button><button id="add">新增</button><!-- <div class="modal"><div class="header">温馨提示 <i>x</i></div><div class="body">您没有删除权限操作</div></div> --><script>// 1.modal构造函数封装——模态框function Modal (title = '', message = '') {console.log(title, message)//创建modal模态框盒子// 1.1 创建div标签// 因为是构造函数 所以使用this  this经过new 谁new谁是实例对象  两个不同的盒子 this指向当前的盒子this.modalBox = document.createElement('div')// 1.2 给div标签添加类名为modalthis.modalBox.className = 'modal'// 1.3  modal盒子内部填充 2个div标签并且修改文字内容this.modalBox.innerHTML = `<div class="header">${title} <i>x</i></div><div class="body">${message}</div>`console.log(this.modalBox)}// new Modal('温馨提示', '您没有权限删除操作')// new Modal('友情提示', '您还没登录呢')//  当我们打印函数时,想要知道里面的属性使用dir// console.dir(Modal)// 2.给构造函数原型对象挂载open方法  this指向函数的调用者 函数的调用者是实例对象Modal.prototype.open = function () {console.log(this)// 先判断页面中有没有modal盒子 有就移除  没有就添加const box = document.querySelector('.modal')// 逻辑与中断  如果有 就执行remove  没有就执行中断这条语句 继续执行下面的语句box && box.remove()//注意这个方法不要用箭头函数//把刚才创建的modalBox显示到页面body中document.body.append(this.modalBox)// 要等着盒子显示出来 就可以绑定点击事件了// 使用箭头函数的原因是因为箭头函数中无this 所以this才会指向函数的调用者this.modalBox.querySelector('i').addEventListener('click', () => {// 这个地方需要用到箭头函数// 这个this指向 实例对象  调用close方法进行移除this.close()})}// 测试一下 点击删除按钮document.querySelector('#delete').addEventListener('click', () => {// 先调用modal构造函数const del = new Modal('温馨的提示', '您没有权限删除操作')// 实例对象调用open方法//使用原型链的原理:Modal.prototype 上定义了一个 open 方法。这意味着 open 方法是 Modal 构造函数的原型方法,并且会被所有通过 Modal 构造函数创建的实例所共享。 当调用 del.open() 时,JS引擎首先会查看 del 实例自身是否有一个名为 open 的方法。由于 open 方法是定义在原型上的,而不是直接定义在实例上的,所以引擎会在 del 实例的原型链上查找这个方法del.open()})// 测试一下 点击登录按钮document.querySelector('#login').addEventListener('click', () => {//先调用Modal构造函数const login = new Modal('友情的提示', '您没有注册呢')//实例对象调用open方法login.open()})// 测试一下 点击新增按钮document.querySelector('#add').addEventListener('click', () => {//先调用Modal构造函数const add = new Modal('提示', '您没有新增权限呢')//实例对象调用open方法add.open()})// 3.给构造函数原型对象挂载close方法Modal.prototype.close = function () {this.modalBox.remove()}</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/840633.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python绘制多级饼图(分层饼图)

python绘制多级饼图&#xff08;分层饼图&#xff09; 介绍效果代码 介绍 多级饼图展示了数据的层次结构&#xff0c;其中每个级别表示数据的一个层次。我们可以使用matplotlib绘制多级饼图。 效果 代码 import matplotlib.pyplot as plt# 示例数据 outer_labels [Category…

css卡片横线100%宽度

所需样式: 横线不用border, 用单独一个div, 这样就不会影响父组件的padding <div class"pumpDetailView"><div class"pump_title_name"><span>{{ pumpInfo.pointname }}</span><divclass"point_state":style"…

Python的基本使用(numpy、pandas、matplotlib)

numpy、pandas、matplotlib 1. numpy numpy&#xff08;Numerical Python 的简称&#xff09;是 Python 语言的一个扩展程序库&#xff0c;支持大量的维度数组与矩阵运算&#xff0c;此外也针对数组运算提供大量的数学函数库。它的主要特点是&#xff1a; N维数组对象&#x…

MPC源码解读及路径跟踪demo

一、前言 上篇文章对MPC原理进行了推导&#xff0c;这篇文章对网上开源代码进行解读及实现路径跟踪demo。 分享一段心灵鸡汤&#xff1a; 最近在读的一本书《杀死一只知更鸟》&#xff0c;里面有这样一段话引起了我的共鸣&#xff1a;”我想让你见识一下什么是真正的勇敢&…

JSON转kotlin数据类的在线工具

toc 以下几个在线工具来将JSON转换为Kotlin数据类&#xff1a; ## 1. **Quicktype** (app.quicktype.io/#lkt)&#xff1a;这是一个在线工具&#xff0c;可以将JSON数据转换为多种编程语言的数据类型&#xff0c;包括Kotlin。您可以将JSON数据复制到Quicktype中&#xff0c;…

html 字体设置 (web端字体设置)

windows自带的字体是有版权的&#xff0c;包括微软雅黑&#xff08;方正&#xff09;、宋体&#xff08;中易&#xff09;、黑体&#xff08;中易&#xff09;等 版权算是个大坑&#xff0c;所谓为了避免版权问题&#xff0c;全部使用开源字体即可 我这里选择的是思源宋体&…

nodejs 与 npm 版本对应关系

官方地址&#xff1a;https://nodejs.org/en/about/previous-releases

fastadmin接口输出图片 自动拼接网站URL

先自定义常量 1.文件接口路径 修改核心文件 application\common\controller\Api.php/*** 构造方法* access public* param Request $request Request 对象*/public function __construct(Request $request null){$this->request is_null($request) ? Request::instance…

C++容器之无序多集(std::unordered_multiset)

目录 1 概述2 使用实例3 接口使用3.1 construct3.2 assigns3.3 iterators3.4 capacity3.5 find3.6 count3.7 equal_range3.8 emplace3.9 emplace_hint3.10 insert3.11 erase3.12 clear3.13 swap3.14 bucket_count3.15 max_bucket_count3.16 bucket_size3.17 bucket3.18 load_fa…

C++|设计模式(四)|代理模式

代理模式属于结构型设计模式&#xff0c;并不关注与对象的产生&#xff0c;而是类和对象功能的使用&#xff1b; 该类模设计模式关注类和对象的组合。继承的概念被用来组合接口和定义组合对象获得新功能的方式。 比如说我们想要访问某公司的老板&#xff0c;其实不可能是直接…

全栈式数据统计:SqlAlchemy怎样连接MsSql Server获取视图列表

1.源代码 #-----------获取数据库视图列表----------------------------- # -------密码含特殊字符使用 from urllib.parse import quote_plus as urlquotefrom sqlalchemy import create_engine, MetaData, inspect# 替换为你的数据库连接字符串 DRIVER "ODBC Driver 1…

c++的查漏补缺 1、函数指针

今天写链表的插入排序时遇到了一个问题 void InsertionSortList(ListNode* head, int n){if (!head||!head->next) return nullptr;auto dummy new ListNode(-1);dummy->next head;auto pre head;auto cur head->next;while (cur ! NULL){auto tmp dummy;if (pre…

【新】snapd申请Let‘s Encrypt免费SSL证书、自动化续签证书

简介 之前写过一篇certbot申请SSL证书的文章&#xff1a;SSL证书申请&#xff0c;写得比较详细&#xff0c;但是最近发现使用snapd会更方便。 使用机器&#xff1a;Ubuntu 20.04 简单步骤 1、首先安装必要软件 sudo apt install snapd sudo apt install certbot sudo apt …

可视化在医疗健康领域的巨大价值,该如何设计呢。

可视化设计在医疗健康领域具有以下价值&#xff1a; 数据展示与分析&#xff1a;可视化设计可以将医疗健康领域的大量数据以图表、图形等形式进行展示和分析&#xff0c;帮助医生、研究人员和决策者更直观地理解和解读数据&#xff0c;发现规律和趋势&#xff0c;从而做出科学决…

有效的完全平方数-力扣

在使用二分法完成题目时&#xff0c;使用如下条件判断时 if(mid < num/mid)当输入 num 5&#xff0c;当二分查找到 mid 2时&#xff0c; 出现了mid num/mid的情况&#xff0c;暴露出了这种判断条件的缺陷。 class Solution { public:bool isPerfectSquare(int num) {i…

力扣 10. 正则表达式匹配 python AC

动态规划 class Solution:def isMatch(self, s, p):s sp psize1 len(p)size2 len(s)dp [[False] * size2 for _ in range(size1)]# p到i和s到j为止&#xff0c;是否匹配dp[0][0] Truefor i in range(size1):for j in range(size2):if p[i] .:if p[i - 1] * and …

跨语言摘要CLS近期论文研究总结(二)

1.BART: Denoising Sequence-to-Sequence Pre-training for Natural Language Generation, Translation, and Comprehension 自然语言生成&#xff0c;翻译和理解的去噪序列到序列预训练 BART的训练方法是: (1)以任意的加噪方式对文本进行破坏 (2)学习一个模型来重建原始文本…

【NOI2010】能量采集 题解

推荐在 cnblogs 上阅读。 【NOI2010】能量采集 题解 谨纪念我的第一道手推出来的莫反题。 题目大意&#xff1a;已知 n n n&#xff0c; m m m&#xff0c;求 ∑ i 1 n ∑ j 1 m ( 2 ⋅ gcd ⁡ ( i , j ) − 1 ) \sum\limits_{i1}^n\sum\limits_{j1}^m(2\cdot \gcd(i,j)…

CMU15-445-并发控制,事务实现

事务并发控制 CMU15-445概览 2PL代表两阶段锁协议&#xff08;Two-phase locking&#xff09;。这是一种并发控制机制&#xff0c;用于关系数据库系统中以保障数据完整性。在这种机制中&#xff0c;事务的执行被划分为两个阶段&#xff1a;加锁阶段和释放锁阶段。加锁阶段发生…