JavaScript进阶知识点及案例(续)

编程思想

面向过程介绍

面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步的实现,使用的时候再一个一个的依次调用就可以了

面向对象介绍

  • 面向对象是把事务分解成为一个个对象,然后由对象之间分工与合作
  • 面向对象是以对象功能来划分问题,而不是步骤

面向对象编程 (OOP)

  • 在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工
  • 面向对象编程具有灵活、代码可复用,容易维护和开发的优点,更适合多人合作的大型软件项目
  • 面向对象的特性:
  • 封装性
  • 继承性
  • 多态性

面向过程和面向对象编程区别

面向过程编程

  • 优点:性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。
  • 缺点:没有面向对象易维护、易复用、易扩展

面向对象编程

  • 优点:易维护、易复用、易扩展,由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统,使系统更加灵活,更加易于维护
  • 缺点:性能比面向过程低 

构造函数

  • 封装是面向对象思想中比较重要的一部分,js面向对象可以通过构造函数实现封装
  • 同样的将变量和函数组合到了一起并能通过this实现数据的共享,所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的

总结:

  • 构造函数体现了面向对象的封装特性
  • 构造函数实例创建的对象彼此独立,互不影响

构造函数方法很好用,但是存在浪费内存的问题

我们希望所有的对象使用同一个函数,这样就比较节省内存,如何实现呢,在说明如何实现之前,要先了解原型的概念。

原型

原型

  • 构造函数通过原型分配的函数是所有对象所共享的
  • JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象,所以我们也称为原型对象
  • 这个对象可以挂载函数,对象实例化不会多次创建原型上的函数,节约内存
  • 我们可以把那些不变的方法,直接定义在pr ototype对象上,这样所有对象的实例就可以共享这些方法
  • 构造函数和原型对象中的this都指向实例化的对象
    // 构造函数
    // 公共属性写到构造函数里面
    function Star(uname,age){
      this.uname=uname
      this.age=age
      // this.sing=function(){
      //   console.log('唱歌')
      // }
    }
    const ldh=new Star('刘德华',55)
    const zxy=new Star('刘德华',58)
    // Star.prototype返回的是对象
    // 公共的方法写到原型对象身上
    Star.prototype.sing=function(){
      console.log('唱歌·')
    }
    console.log(ldh.sing===zxy.sing)//true 调用同一个函数

构造函数和原型对象中的this都指向实例化的对象 

    let that
    function Star(uname){
      // that=this
      this.uname=uname
    }
    // 原型对象里面的函数this指向的还是实例对象
    Star.prototype.sing=function(){
      that=this
      console.log('唱歌')
    }
    // 实例对象 ldh
    // 构造函数里面的this 就是 实例对象 ldh
    const ldh=new Star('刘德华')
    ldh.sing()
    console.log(that===ldh)//true this指向的是当前的调用对象

 给数组扩展方法

需求:

1.给数组扩展求最大值方法和求和方法

比如:以前学过

const arr=[1,2,3]

arr.reverse()  结果是[3,2,1]

扩展完毕之后:arr.sum()  返回的结果是6

    // 自己定义数组的扩展方法
    // 我们定义的这个方法 任何一个数组实力对象都可以使用
    // 自定义的方法写到数组.prototype身上
    // 1.最大值
    Array.prototype.max=function(arr){
      // 展开运算符
      return Math.max(...this)
      // 原型函数里的this指向实例对象
    }
    Array.prototype.min=function(arr){
      // 展开运算符
      return Math.min(...this)
      // 原型函数里的this指向实例对象
    }
    const arr=new Array(1,2,4)
    console.log(arr.max())
    console.log(arr.min())
    // 3.求和方法
    Array.prototype.sum=function(){
      return this.reduce((prev,item)=>prev+item,0)//记得return
    }
    console.log([11,21,31,41].sum())

construor属性

每个原型对象里面都有个constructor属性(constructor构造函数)

作用:该属性指向该原型对象的构造函数

    // constructor
    function Star(){
    }
    const ldh=new Star()
    console.log(Star.prototype.constructor===Star)//true

 使用场景:如果有多个对象的方法,我们可以给原型对象采取对象形式赋值但是这样就会覆盖构造函数对象原来的内容,这样修改后的原型对象 constructor 就不再指向当前构造函数了,此时,我们可以在修改后的原型对象中,添加一个constructor指向原来的构造函数。

    // constructor
    function Star(){
    }
    // const ldh=new Star()
    // console.log(Star.prototype.constructor===Star)//true
    Star.prototype.p=function(){

    }
    console.log(Star.prototype)
     Star.prototype={
      // 需要重新指回到这个原型对象的构造函数
      constructor:Star,
      sing:function(){
        console.log('唱歌')
      },
      dance:function(){
        console.log('跳舞')
      },
     } 
     console.log(Star.prototype)

对象原型

对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有_proto_原型的存在

注意:

  • __proto__是JS非标准属性
  • [[prototype]]和__proto__意义相同
  • 用来表明当前实例对象指向的哪个原型对象prototype
  • __proto__对象里面也有一个constructor属性,指向创建该实例对象的构造函数
    function Star(){}
    const ldh=new Star()
    // console.log(ldh)
    // 对象原型__proto__ 指向 改构造函数的原型对象 对象原型指向原型对象
    console.log(ldh.__proto__===Star.prototype)//true
    // 对象原型里面有constructor 指向构造函数 Star
    console.log(ldh.__proto__.constructor===Star)//true

 

原型继承

继承是面向对象的另一个特征,通过继承进一步提升代码封装的程度,JavaScript中大多是借助原型对象实现继承的特性

    //继续抽取 公共的部分放到原型(prototype)上
    const Person={
      ears:2,
      head:1
    }
    // 女人 构造函数 继承 Person
    // 给女人添加一个方法 
    
    function Woman(){
      
    }
   
    //woman通过原型来继承Person
    Woman.prototype=Person
    // 指回原来的构造函数
    Woman.prototype.constructor=Woman
    Woman.prototype.baby=function(){
      console.log('baby')
    }
    const red=new Woman()
    console.log(red)
    // console.log(red.ears)
    function Man(){
      
    }
    Man.prototype=Person
    Man.prototype.constructor=Man
    const pink=new Man()
    console.log(pink)

由结果可知,当给woman添加自己独特的方法时,man中也会有woman独特的方法

 man和woman都同时使用了同一个对象,根据引用类型的特点,他们指向同一个对象,修改一个就会都影响

    // 构造函数new出来的对象 结构一样 但是对象不一样
    function Person (){
      this.eyes=2
      this.head=1
    }
    // 女人 构造函数 继承 Person
    // 给女人添加一个方法 
    
    function Woman(){
      
    }
   
    //woman通过原型来继承Person
    // 子类的原型=new 父类()
    Woman.prototype=new Person()
    // 指回原来的构造函数
    Woman.prototype.constructor=Woman
    Woman.prototype.baby=function(){
      console.log('baby')
    }
    const red=new Woman()
    console.log(red)
    // console.log(red.ears)
    function Man(){
      
    }
    Man.prototype=new Person()
    Man.prototype.constructor=Man
    const pink=new Man()
    console.log(pink)

构造函数new出来的对象,结构一样,但是对象不一样,指向栈中的地址不一样,故不会出现修改一个,两个都改的情况了

原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象对象的结构关系称为原型链

  • 只要是对象就都有__proto__,指向构造函数的原型对象(构造函数中公共的方法等)
  • 只要是原型对象,就有constructor,指向构造函数、

原型链查找规则

  1. 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性
  2. 如果没有就查找它的原型(也就是__proto__指向的prototype原型对象)
  3. 如果还没有就查找原型对象的原型(Object的原型对象)
  4. 以此类推一直找到Object为止(null)
  5. __proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线
  6. 可以使用instanceof运算符检测构造函数的prototype属性是否出现在某个实例对象的原型链上

综合案例

模态框封装

通过面向对象写插件

需求:点击删除提示您没有权限删除,点击登录提示您还未登录

分析需求:

1.多个模态框一样的,而且每次点击都会出来一个

构造函数,把模态框封装一个构造函数Modal,每次new都会产出一个模态框,所以点击不同的按钮就是在做new模态框,实例化。

2.模态框的功能,打开功能显示,关闭功能,而且每个模态框都包含两个功能

  • open功能
  • close功能

open和close方法写到构造函数Modat的原型对象上,共享方法

需要的公共属性:标题,提示信息内容,可以设置默认参数 

业务1:Modal构造函数制作

  • 在页面中创建模态框
  1. 创建div标签可以命名为:modalBox
  2. div标签的类名为modal
  3. 标签内部添加基本结构,并填入相关数据

业务2:open方法

  • 写到构造函数的原型对象身上
  • 把刚才创建的modalBox添加到页面body标签中
  • open打开的本质就是把创建标签添加到页面中
  • 点击按钮,实例化对象,传入对应的参数,并执行open方法

业务3:close方法

  • 写到构造函数的原型对象身上
  • 把刚才创建的modalBox从页面body标签中删除
  • 需要注意,x关闭按钮是在模态框里面,所以应该是在页面显示这个模态框就要绑定事件
  • 页面显示框是在open里面,所以绑定关闭事件也写到open方法里面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</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>
  <!-- <div class="modal">
    <div class="header">温馨提示<i>X</i></div>
    <div class="body">您没有权限操作</div>
  </div> -->
  <script>
    // 1.Modal 构造函数封装-模态框
    function Modal(title='',message=''){
      // 创建modal模态框盒子
      // 1.1创建div标签
      this.modalBox=document.createElement('div')
      // 1.2给div标签添加类名为modal
      this.modalBox.className='modal'
      // 1.3modal盒子内部填充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('友情提示','你还没有登录呢')
    // 2.给构造函数原型对象挂载open方法
    Modal.prototype.open=function(){
      //注意这个方法不要用箭头函数
      // 把刚才创建的modalBox 显示到页面中
      document.body.append(this.modalBox)
      // 要等着盒子显示出来 就可以绑定关闭事件
      this.modalBox.querySelector('i').addEventListener('click',()=>{
        // 这个地方需要用到箭头函数
        // 这个this指向实例对象,箭头函数里面没有this,就会指向上一级this,达到效果
        this.close()
      })
    }
    // 3.给构造函数原型对象挂载close方法
    Modal.prototype.close=function(){
      this.modalBox.remove()
    }
    // 测试以下点击删除按钮
    document.querySelector('#delete').addEventListener('click',()=>{
      const del=new Modal('温馨的提示','您没有权限删除操作')
      // 实例对象调用open方法
      del.open()
    })
    document.querySelector('#login').addEventListener('click',()=>{
      const del=new Modal('友情的提示','您没有注册呢')
      // 实例对象调用open方法
      del.open()
    })
  </script>
</body>
</html>

BUG:多次点击会显示很多的模态框

解决:准备open显示的时候,先判断页面中有没有modal盒子,有就移除,没有就添加

在open中判断页面中是否有盒子

    Modal.prototype.open=function(){
      //注意这个方法不要用箭头函数
      // 先判断页面中是否有modal盒子 如果有就删除 否则就继续添加
      const box=document.querySelector('.modal')
      box&&box.remove()//逻辑中断 box不存在就不执行后面的代码 如果box存在就执行后面的代码移除盒子
      // 把刚才创建的modalBox 显示到页面中
      document.body.append(this.modalBox)
      // 要等着盒子显示出来 就可以绑定关闭事件
      this.modalBox.querySelector('i').addEventListener('click',()=>{
        // 这个地方需要用到箭头函数
        // 这个this指向实例对象,箭头函数里面没有this,就会指向上一级this,达到效果
        this.close()
      })
    }

以上笔记全为看哔站pink老师视频所得!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

word导出或另存为pdf图片不清晰问题解决方案

问题描述&#xff1a; 使用word 2019导出pdf时图片不清晰&#xff0c;即使我已经在“选项 → \to →高级 → \to →图片大小和质量 → \to →不压缩文件中的图像 ”选项卡中关闭掉了图片压缩依然无效。 解决方案&#xff1a; 利用word foxit pdf 软件打印的方案转pdf。 &…

Linux加强篇-存储结构与管理硬盘(三)

目录 ⛳️推荐 磁盘容量配额 VDO虚拟数据优化 软硬方式链接 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 磁盘容量配额 使用磁盘容量配额服务来限制某位用户或某个用户组针…

Java 笔记 07:包机制,JavaDoc 文档的生成方式,Math 工具类,以及字符串连接符相关内容

一、前言 记录时间 [2024-04-25] 系列文章简摘&#xff1a; Java 笔记 01&#xff1a;Java 概述&#xff0c;MarkDown 常用语法整理 Java 笔记 04&#xff1a;Java 数据类型基础&#xff0c;数据类型转换&#xff0c;及其相关场景拓展 Java 笔记 05&#xff1a;变量和常量相关知…

第55篇:创建Nios II工程之Hello_World<一>

Q&#xff1a;本期我们开始介绍创建Platform Designer系统&#xff0c;并设计基于Nios II Processor的Hello_world工程。 A&#xff1a;设计流程和实验原理&#xff1a;需要用到的IP组件有Clock Source、Nios II Processor、On-Chip Memory、JTAG UART和System ID外设。Nios I…

Golang | Leetcode Golang题解之第48题旋转图像

题目&#xff1a; 题解&#xff1a; func rotate(matrix [][]int) {n : len(matrix)// 水平翻转for i : 0; i < n/2; i {matrix[i], matrix[n-1-i] matrix[n-1-i], matrix[i]}// 主对角线翻转for i : 0; i < n; i {for j : 0; j < i; j {matrix[i][j], matrix[j][i]…

2024采用JSP的酒店客房管理系统源代码+毕业设计论文+开题报告+答辩PPT

点击下载源码 摘 要 计算机技术发展至今已走过了半个多世纪之久&#xff0c;现在各个阶层、各个领域都使用着计算机&#xff0c;在这个快节奏的时代中它已经成为了社会生活的必需品。它的出现是现代社会进步&#xff0c;科技发展的标志。同时现代化的酒店组织庞大&#xff0c;…

C++: IO流

目录 1、C语言输入输出 流的概念&#xff1a; 2、CIO流 3、C文件IO流 1、C语言输入输出 C语言中我们用到的最频繁的输入输出方式就是scanf () 与 printf() 。 scanf(): 从标准输入设备 ( 键 盘 ) 读取数据&#xff0c;并将值存放在变量中 。 printf(): 将指定的文…

新能源汽车小米su7

小米su7汽车 function init() {const container document.querySelector( #container );camera new THREE.PerspectiveCamera( 20, window.innerWidth / window.innerHeight, 1, 50000 );camera.position.set( 0, 700, 7000 );scene new THREE.Scene();scene.background ne…

深入浅出 Spring Boot 3.x:从原理到实战,全面解锁 Java 后端开发新潮流

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

一分钟教会你使用51cto网课视频下载工具下载51cto视频

想要学习技术知识&#xff0c;提升自己的职业能力&#xff0c;51cto是一个绝佳的选择。然而&#xff0c;有时候我们可能无法随时在线观看这些精彩的视频课程。别担心&#xff01;我将在一分钟内教您如何使用51cto视频下载工具&#xff0c;将这些宝贵的学习资源下载到您的设备上…

物联网鸿蒙实训解决方案

一、建设背景 在数字化浪潮汹涌的时代&#xff0c;华为鸿蒙系统以其前瞻的技术视野和创新的开发理念&#xff0c;成为了引领行业发展的风向标。 据华为开发者大会2023&#xff08;HDC. Together&#xff09;公布的数据&#xff0c;鸿蒙生态系统展现出了强劲的发展动力&#x…

钡铼IOy系列模块在无人值守智能仓库中的成功运用,提升仓储物流效率

随着科技的不断发展&#xff0c;无人值守智能仓库正成为现代物流行业的一个重要趋势。在这个快节奏的时代&#xff0c;提升仓储物流效率是企业追求的目标之一。钡铼IOy系列模块为无人值守智能仓库的成功运作提供了关键支持。本文将探讨钡铼IOy系列模块在无人值守智能仓库中的应…

子域名如何启用HTTPS,有免费泛域名SSL证书吗

如今HTTPS已经成为了网站标配&#xff0c;然而&#xff0c;对于一些刚刚起步的网站或是个人博客而言&#xff0c;如何自动跳转到HTTPS&#xff0c;以及免费SSL证书的获取&#xff0c;可能还是一个需要解决的问题。下面就来详细解答这两个问题。 我们需要明确HTTPS与SSL之间的关…

OpenAI 和 Moderna 合作,推进 mRNA 医学

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 一、关于 Moderna Moderna 是 mRNA 医学领域的佼佼者&#xff0c;其通过不断推动 mRNA 技术的发展&#xff0c;正在重塑药物的制造方式&#xff0c;并深刻地改变我们治疗和预防疾病的方法。凭借在科学、…

包装类简单认识泛型

文章目录 包装类基本数据类型和对应的包装类装箱和拆箱自动装箱和自动拆箱 什么是泛型引出泛型语法 泛型类的使用 包装类 在Java中&#xff0c;由于基本类型不是继承自Object&#xff0c;为了在泛型代码中可以支持基本类型&#xff0c;Java给每个基本类型都对应了一个包装类型…

骑砍2霸主MOD开发(6)-使用C#-Harmony修改本体游戏逻辑

一.C#-Harmony反射及动态注入 利用C#运行时环境的反射原理,实现对已加载DLL,未加载DLL中代码替换和前置后置插桩. C#依赖库下载地址:霸王•吕布 / CSharpHarmonyLib GitCodehttps://gitcode.net/qq_35829452/csharpharmonylib 根据实际运行.Net环境选择对应版本的0Harmony.dll…

为什么没有办法画圆角?

在AutoCAD里面画圆角不是单纯的在两条线之间点一下就好了&#xff0c; 主要要输入这个半径。

“浙大学报英文版”订阅号这篇文章,丢名校脸面

今天翻到“浙大学报英文版”订阅号分享的一篇文章&#xff0c;介绍了一篇奇文&#xff0c;该论文的摘要&#xff08;Abstract&#xff09;非常任性&#xff0c;仅有一个单词— “Yes”。 原文链接&#xff1a;https://mp.weixin.qq.com/s/riw_YU3caBf7E6rdCbLE-Q 该论文是由J. …

如何为Postgres数据库设置安全的访问控制和权限管理

文章目录 解决方案1. 使用角色和权限管理2. 配置认证方法3. 使用网络访问控制4. 定期审查和更新权限 示例代码1. 创建角色并分配权限2. 配置密码认证3. 配置网络访问控制 总结 PostgreSQL是一个功能强大的开源关系型数据库系统&#xff0c;提供了丰富的权限和访问控制机制&…

bit、进制、位、时钟(窗口)、OSI七层网络模型、协议、各种码

1.bit与进制 &#xff08;个人理解&#xff0c;具体电路是非常复杂的&#xff09; 物理层数据流&#xff0c;bit表示物理层数据传输单位&#xff0c; 一个电路当中&#xff0c;通过通断来表示数字1和0 两个电路要通讯&#xff0c;至少要两根线&#xff0c;一根作为电势参照…