• JS进阶——深入面向对象

    1、编程思想

    1.1 面向过程编程

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

    1.2 面向对象编程（oop）

            面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作

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

    1.3 面向过程和面向对象的对比 

    面向过程编程

    优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程

    缺点：没有面向对象易维护、易复用、易扩展

    面向对象编程

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

    缺点：性能比面向过程低

    2、构造函数

    封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装

    同样的将变量和函数组合到了一起并能通过this实现数据的共享，所不同的是借助构造函数创建出来的实例对象之间是彼此不影响的

    总结：

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

    封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装

    前面学过的构造函数方法很好用，但是存在浪费内存的问题。 

    3、原型

    3.1 什么是原型

    构造函数通过原型分配的函数是所有对象所共享的。

    JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象，所以也称为原型对象

    这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存

    可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。

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

    3.1.1 原型-this指向

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

    3.1.2 给数组扩展方法

    需求：

    ①：给数组扩展求最大值方法和求和方法

    比如：以前学过

    const arr = [1,2,3]

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

    扩展完毕之后：

    arr.sum()  返回的结果是6

    1. DOCTYPE html>
    4.     
    5.     
    6.     Document
    9.

    3.2 constructor属性

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

            作用：该属性指向该原型对象的构造函数，简单理解，就是指向我的爸爸，我是有爸爸的孩子

    使用场景：

    如果有多个对象的方法，可以给原型对象采取对象形式赋值

    但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor就不再指向当前构造函数了

    此时，可以在修改后的原型对象中，添加一个constructor指向原来的构造函数

    3.3 对象原型

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

    1.

    注意：

    • __proto__是JS非标准属性
    • [[prototype]]和__proto__意义相同
    • 用来表明当前实例对象指向哪个原型对象prototype
    • __proto__对象原型里面也有一个constructor属性，指向创建该实例对象的构造函数 

    总结：

    1.prototype是原型（原型对象），构造函数都自动有原型

    2.constructor属性在prototype原型和对象原型__proto__里面都有，都指向创建实例对象/原型的构造函数

    3.__proto__属性指向原型prototype，在实例对象里面

    3.3.1 练习 根据下面代码，请画图

     需求：

    ①：利用画图工具，画出 构造函数 原型 实例对象 三者的关系

    ②：要求里面有__proto__和constructor的指向

    ③：并在代码打印验证指向正确

     

    3.4 原型继承

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

    3.4.1 封装-抽取公共部分

    把男人和女人公共的部分抽取出来放到人类里面

    3.4.2  继承-让男人和女人都能继承人类的一些属性和方法

    • 把男人女人公共的属性和方法抽取出来People
    • 然后赋值给Man的原型对象，可以共享这些属性和方法
    • 注意让constructor指回Man这个构造函数

    3.4.3 问题：

    如果我们给男人添加了一个吸烟的方法，发现女人自动也添加这个方法

    3.4.4 问题：--原因

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

    3.4.5 解决

    需求：男人和女人不要是使用同一个对象，但是不同对象里面包含相同的属性和方法

    答案：构造函数

    new每次都会创建一个新的对象

    1. DOCTYPE html>
    4.     
    5.     
    6.     Document
    9.

    3.5 原型链

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

    3.5.1 原型链-查找规则

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

    4、综合案例

    面向对象写插件（模态框）

    分析需求：

    1.多个模态框一样的，而且每次点击都会出来一个，怎么做呢？

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

    2.模态框有什么功能？打开功能（显示），关闭功能，而且每个模态框都包含着2个功能

    open功能

    close功能

    这两个功能写到构造函数Modal的原型对象上，共享方法

    分析需求：

    1.定义模态框Modal构造函数，用来创建对象

    2.模态框具备打开功能open方法（按钮点击可以打开模态框）

    3.模态框具备关闭功能close方法

    步骤：

    ①：Modal构造函数 制作

            需要的公共属性：标题（title）、提示信息内容（message） 可以设置默认参数

            在页面中创建模态框

            （1）创建div标签可以命名为：modalBox

            （2）div标签的类名为modal

            （3）标签内部添加 基本结构，并填入相关数据

    ②：open方法

            写到构造函数的原型对象身上

            把刚才创建的modalBox添加到页面body标签中

            open打开的本质就是把创建标签添加到页面中

            点击按钮，实例化对象，传入对应的参数，并执行open方法

    ③：close方法

            写到构造函数的原型对象上

            把刚才创建的modalBox 从页面body标签中删除

            需要注意，x删除按钮绑定事件，要写到open里面添加

            因为open是往页面中添加元素，同时顺便绑定事件

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

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

    1. DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>面向对象封装消息提示title>
    9.   <style>
    10.     .modal {
    11.       width: 300px;
    12.       min-height: 100px;
    13.       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    14.       border-radius: 4px;
    15.       position: fixed;
    16.       z-index: 999;
    17.       left: 50%;
    18.       top: 50%;
    19.       transform: translate3d(-50%, -50%, 0);
    20.       background-color: #fff;
    21.     }
    22.  
    23.     .modal .header {
    24.       line-height: 40px;
    25.       padding: 0 10px;
    26.       position: relative;
    27.       font-size: 20px;
    28.     }
    29.  
    30.     .modal .header i {
    31.       font-style: normal;
    32.       color: #999;
    33.       position: absolute;
    34.       right: 15px;
    35.       top: -2px;
    36.       cursor: pointer;
    37.     }
    38.  
    39.     .modal .body {
    40.       text-align: center;
    41.       padding: 10px;
    42.     }
    43.  
    44.     .modal .footer {
    45.       display: flex;
    46.       justify-content: flex-end;
    47.       padding: 10px;
    48.     }
    49.  
    50.     .modal .footer a {
    51.       padding: 3px 8px;
    52.       background: #ccc;
    53.       text-decoration: none;
    54.       color: #fff;
    55.       border-radius: 2px;
    56.       margin-right: 10px;
    57.       font-size: 14px;
    58.     }
    59.  
    60.     .modal .footer a.submit {
    61.       background-color: #369;
    62.     }
    63.   style>
    64. head>
    65.  
    66. <body>
    67.   <button id="delete">删除button>
    68.   <button id="login">登录button>
    69.  
    70.   
    71.  
    72.  
    73.   <script>
    74.     // 1.Modal 构造函数封装-模态框
    75.     function Modal(title = ``,message = ``) {
    76.       // console.log(title,message)
    77.       // 创建modal 模态框盒子     
    78.       // 1.1 创建div标签
    79.       this.ModalBox = document.createElement('div')
    80.       // 1.2 给div标签添加类名为modal
    81.       this.ModalBox.className = 'modal'
    82.       // 1.3 modal盒子内部填充2个div标签并且修改文字内容
    83.       this.ModalBox.innerHTML = `
    84.         
      ${title} x
    85.         
      ${message}
    86.       `
    87.       console.log(this.ModalBox)
    88.     }
    89.     new Modal('温馨提示','您没有权限删除操作')
    90.     new Modal('友情提示','您还没有注册')
    91.  
    92.     // 2.给构造函数原型对象挂载open方法
    93.     Modal.prototype.open = function(){
    94.       // 先判断页面中是否有modal盒子，如果有就删除，否则就继续添加
    95.       const box = document.querySelector('.modal')
    96.       box && box.remove()
    97.       // 注意这个方法不要用箭头函数
    98.       // 把刚才创建的modalBox 显示到页面body中
    99.       document.body.append(this.ModalBox)
    100.  
    101.       // 要等着盒子显示出来，就可以绑定点击事件了
    102.       this.ModalBox.querySelector('i').addEventListener('click',() => {
    103.         // 这个地方需要用到箭头函数
    104.         // 这个this指向 实例对象
    105.         this.close()
    106.       })
    107.     }
    108.  
    109.     // 3.给构造函数原型对象挂载close方法
    110.     Modal.prototype.close = function(){
    111.       this.ModalBox.remove()
    112.     }
    113.  
    114.     // 测试，点击删除按钮
    115.     document.querySelector('#delete').addEventListener('click',()=>{
    116.       // 先调用Modal构造函数
    117.       const del = new Modal('温馨提示','您没有权限删除操作')
    118.       // 实例对象调用open方法
    119.       del.open()
    120.     })
    121.  
    122.     // 测试，点击登录按钮
    123.     document.querySelector('#login').addEventListener('click',()=>{
    124.       // 先调用Modal构造函数
    125.       const login = new Modal('友情提示','您还没有注册')
    126.       // 实例对象调用open方法
    127.       login.open()
    128.     })
    129.  
    130.  
    131.   script>
    132. body>
    133.  
    134. html>

     

  • 相关阅读:
    web —— css(1)
    C++中位运算符使用
    【深入浅出Spring6】第一期——入门
    Android setTheme设置透明主题无效
    基础 | 并发编程 - [多线程进度控制]
    QT默认自带mscv2017 2019 ，配置vs2022
    互联网架构演进方向
    Redis未授权漏洞利用
    YOLO系列 --- YOLOV7算法（四）：YOLO V7算法网络结构解析
    分布式事务-TCC案例分析流程图
  • 原文地址：https://blog.csdn.net/weixin_48719464/article/details/134469237