• 前端JavaScript入门到精通，javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶（三）

    思维导图

    1.编程思想

    1.1 面向过程编程

    1.2 面向对象编程 (oop)

    2. 构造函数

    3. 原型

    3.1 原型

    1. 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>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // 自己定义 数组扩展方法  求和 和 最大值 
    14.     // 1. 我们定义的这个方法，任何一个数组实例对象都可以使用
    15.     // 2. 自定义的方法写到  数组.prototype 身上
    16.     // 1. 最大值
    17.     const arr = [1, 2, 3]
    18.     Array.prototype.max = function () {
    19.       // 展开运算符
    20.       return Math.max(...this)
    21.       // 原型函数里面的this 指向谁？ 实例对象 arr
    22.     }
    23.     // 2. 最小值
    24.     Array.prototype.min = function () {
    25.       // 展开运算符
    26.       return Math.min(...this)
    27.       // 原型函数里面的this 指向谁？ 实例对象 arr
    28.     }
    29.     console.log(arr.max())
    30.     console.log([2, 5, 9].max())
    31.     console.log(arr.min())
    32.     // const arr = new Array(1, 2)
    33.     // console.log(arr)
    34.     // 3. 求和 方法 
    35.     Array.prototype.sum = function () {
    36.       return this.reduce((prev, item) => prev + item, 0)
    37.     }
    38.     console.log([1, 2, 3].sum())
    39.     console.log([11, 21, 31].sum())
    40.   script>
    41. body>
    42.  
    43. html>

    3.2 constructor 属性

    1. 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>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     // constructor  单词 构造函数
    14.  
    15.     // Star.prototype.sing = function () {
    16.     //   console.log('唱歌')
    17.     // }
    18.     // Star.prototype.dance = function () {
    19.     //   console.log('跳舞')
    20.     // }
    21.     function Star() {
    22.     }
    23.     // console.log(Star.prototype)
    24.     Star.prototype = {
    25.       // 从新指回创造这个原型对象的 构造函数
    26.       constructor: Star,
    27.       sing: function () {
    28.         console.log('唱歌')
    29.       },
    30.       dance: function () {
    31.         console.log('跳舞')
    32.       },
    33.     }
    34.     console.log(Star.prototype)
    35.     // console.log(Star.prototype.constructor)
    36.  
    37.     // const ldh = new Star()
    38.     // console.log(Star.prototype.constructor === Star)
    39.   script>
    40. body>
    41.  
    42. html>

    3.3 对象原型

    注意区别：对象原型 与 原型（对象）

    1. 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>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.   <script>
    13.     function Star() {
    14.  
    15.     }
    16.     const ldh = new Star()
    17.     // 对象原型__proto__ 指向 改构造函数的原型对象
    18.     console.log(ldh.__proto__)
    19.     // console.log(ldh.__proto__ === Star.prototype)
    20.     // 对象原型里面有constructor 指向 构造函数 Star
    21.     console.log(ldh.__proto__.constructor === Star)
    22.  
    23.   script>
    24. body>
    25.  
    26. html>

    3.4 原型继承

    3.5 原型链

    实例对象 instanceof 构造函数

    4.综合案例

    1. 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.  模态框的构造函数
    75.     function Modal(title = '', message = '') {
    76.       // 公共的属性部分
    77.       this.title = title
    78.       this.message = message
    79.       // 因为盒子是公共的
    80.       // 1. 创建 一定不要忘了加 this 
    81.       this.modalBox = document.createElement('div')
    82.       // 2. 添加类名
    83.       this.modalBox.className = 'modal'
    84.       // 3. 填充内容 更换数据
    85.       this.modalBox.innerHTML = `
    86.         
      ${this.title} x
    87.         
      ${this.message}
    88.       `
    89.       // console.log(this.modalBox)
    90.     }
    91.     // 2. 打开方法 挂载 到 模态框的构造函数原型身上
    92.     Modal.prototype.open = function () {
    93.       if (!document.querySelector('.modal')) {
    94.         // 把刚才创建的盒子 modalBox  渲染到 页面中  父元素.appendChild(子元素)
    95.         document.body.appendChild(this.modalBox)
    96.         // 获取 x  调用关闭方法
    97.         this.modalBox.querySelector('i').addEventListener('click', () => {
    98.           // 箭头函数没有this 上一级作用域的this
    99.           // 这个this 指向 m 
    100.           this.close()
    101.         })
    102.       }
    103.     }
    104.     // 3. 关闭方法 挂载 到 模态框的构造函数原型身上
    105.     Modal.prototype.close = function () {
    106.       document.body.removeChild(this.modalBox)
    107.     }
    108.  
    109.     // 4. 按钮点击
    110.     document.querySelector('#delete').addEventListener('click', () => {
    111.       const m = new Modal('温馨提示', '您没有权限删除')
    112.       // 调用 打开方法
    113.       m.open()
    114.     })
    115.  
    116.     // 5. 按钮点击
    117.     document.querySelector('#login').addEventListener('click', () => {
    118.       const m = new Modal('友情提示', '您还么有注册账号')
    119.       // 调用 打开方法
    120.       m.open()
    121.     })
    122.  
    123.   script>
    124. body>
    125.  
    126. html>

    多次点击生成多个盒子bug解决方法②：

  • 相关阅读:
    Day22
    MySQL 保姆级教程（六）：用通配符进行过滤
    Mac中隐私安全性设置-打开任何来源
    常用的C语法：指针和数组名的区别
    Spring复习——day16_SpringMVC_异常处理器
    MD5 加密安全吗？
    受众分析与卸载分析全面升级，HMS Core分析服务6.6.0版本上新
    23种设计模式之代理模式（动态代理）
    SpringBoot＋ MDC实现全链路调用日志跟踪
    UNIX网络编程卷一 学习笔记 第二章 传输层:TCP、UDP和SCTP
  • 原文地址：https://blog.csdn.net/upgrade_bro/article/details/133772424