[JS]面向对象(ES5)

王震是也

已于 2024-07-16 09:18:28 修改

阅读量1.2k

点赞数 35

分类专栏： JavaScript 文章标签： javascript 前端

于 2024-05-23 08:59:46 首次发布

本文链接：https://blog.csdn.net/CSDN20221005/article/details/139134854

版权

JavaScript 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

本节目标

理解面向对象思想, 掌握函数原型对象

运用面向对象封装确认对话框功能

编程思想
构造函数
原型
综合案例

编程思想

面向过程编程(POP)

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

举例: 蛋炒饭

优点:

性能比面向对象高, 适合跟硬件紧密的东西, 例如单片机就采用面向过程编程

缺点:

没有面向对象易维护, 易复用, 易扩展

面向对象编程(oop)

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

特点:

在面向对象程序开发思想中, 每个对象都是功能中心, 具有明确分工

面向对象是以对象功能来划分问题, 而不是步骤

特征: 封装性/继承性/多态性

优点:

易维护, 易复用, 易扩展, 由于面向对象具有封装, 继承,多态等特性, 可以设计出低耦合的系统, 使系统更加灵活, 更适合多人合作的大型软件项目

缺点:

性能比面向过程低

构造函数

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

<script>
    // 构造函数, 公共的属性和方法 封装到 Strt 构造函数中
    function Start(uname, age) {
      this.uname = uname
      this.age = age
      this.sing = function () {
        console.log('唱歌')
      }
    }

    const ldh = new Start('刘德华', 55)
    const zxy = new Start('张学友', 58)
    // 两个实例对象的函数不一样, 存在内存浪费的问题
    console.log(ldt.sing === zxy.sing) // false
  </script>

总结

同样的将变量和函数组合到了一起并能通过this实现数据的共享, 所不同的是借助构造函数创建出来的实例对象之间是互相独立的
构造方法很好用, 但是存在浪费内存的问题

原型

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

<script>
    // 构造函数
    // 公共的属性写到 构造函数里面
    function Start(uname) {
      this.name = uname
    }


    // 原型对象
    // 公共的方法写到原型对象身上
    Start.prototype.sing = function () {
      console.log('唱歌');
    }

    // 实例对象
    const ldh = new Start('刘德华')
    const zxy = new Start('张学友')
    ldh.sing()
    zxy.sing()

</script>

小结

构造函数通过原型分配的函数是所有对象所共享的
这个对象可以挂载函数, 对象实例化不会多次创建原型上的函数, 节约内存
我们可以把那些不变的方法, 直接定义在prototype对象上, 这样所有对象的实例就可以共享这些方法

执行流程

this指向

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

<script>
    // 构造函数
    // 构造函数的this指向实例对象
    function Start(uname) {
      this.name = uname
    }

    let that
    // 原型对象
    // 原型对象里面的函数的this指向实例对象
    Start.prototype.sing = function () {
      that = this
      console.log('唱歌');
    }

    // 实例对象
    const ldh = new Start('刘德华')
    ldh.sing()
    console.log(that)
</script>

案例: 自定义扩招数组的方法

<script>
    // 自定义,扩招数组方法
    const arr = [1, 2, 3, 4, 5]
    // 求最大值
    Array.prototype.max = function () {
      return Math.max(...this)
    }
    // 最小值
    Array.prototype.min = function () {
      return Math.min(...this)
    }
    // 求和
    Array.prototype.sum = function () {
      return this.reduce((prev, curr) => prev + curr, 0)
    }
    console.log(arr.max())
    console.log(arr.min())
    console.log(arr.sum())
</script>

constructor属性

每个原型对象里面都有个constructor属性 (constructor构造函数), 它的作用就是指回原型对象的构造函数

解释

构造函数指向原型对象, 原型对象也要指回构造函数, 我要认识我的爸爸, 我的爸爸也要认识我

应用: 手动指回该原型对象的构造函数

<script>
    // 如果有多个对象的方法, 可以用对象的形式, 给原型对象赋值, 避免一个一个添加
    // 这样可以减少重复代码, 但是新的对象会覆盖原先的原型对象, 导致原型对象constructor属性丢失
    // 所以我们需要手动恢复constructor属性
    function Start() { }
    Start.prototype = {
      // 手动恢复constructor属性
      constructor: Start,

      // 一次添加多个方法
      sing() {
        console.log('唱歌')
      },
      dance() {
        console.log('跳舞')
      }
    }
    console.log(Start.prototype.constructor);
  </script>

原型对象

实例对象都会有一个__proto__属性, 称为对象原型, 指向构造函数的原型对象(prototype)

实例对象可以使用原型对象的属性和方法, 就是因为对象原型__proto__的存在

三角关系

简述

每个构造函数都有prototype属性, 称为原型对象
每个原型对象都有constructoe属性, 指回构造函数
通过构造函数可以创建实例对象
每个实例对象都有__proto__属性, 称为对象原型
对象原型(__proto__)指向原型对象(constructor)
原型对象的constructor属性, 指回构造函数

注意

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

原型继承

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

<script>
    // 1 创建父类
    // 人 构造函数
    function Person() {
      this.easy = 2
      this.head = 1
    }

    // 2 子类原型 = new 父类 
    // 实现原型继承
    Woman.prototype = new Person()
    // 3 恢复constructor属性
    Woman.prototype.constructor = Woman
    // 女人 构造函数
    function Woman() {

    }
    const red = new Woman()
    // 已经继承了父类的属性
    console.log(red.easy)
  </script>

步骤:

创建父类构造函数
子类原型指向父类实例对象
修复子类的constructor属性

原型链

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

小结

所有的对象都有__protro__属性指向原型对象
所有的原型对象都有constructor属性指回自身的构造函数

查找规则

当访问一个对象的属性时, 首先查找这个对象自身有没有该属性
如果没有就查找它的原型对象 (也就是 __proto__指向的 prototype 原型对象)
如果还没有就查找原型对象的原型(Object的原型对象)
以此类推直到Object为止(null)
__peoto__对象原型的意义就在于为对象成员查找机制提供一个方向, 或者一条线路

instanceof 运算符

用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

<script>
    function Person() { }
    const ldh = new Person()
    console.log(ldh instanceof Person) // true
    console.log(ldh instanceof Object) // true
    console.log(ldh instanceof Array) // false
    console.log(ldh instanceof Function) // false
    console.log([1, 2, 3] instanceof Array) // true
    console.log([1, 2, 3] instanceof Object) // true
</script>

综合案例

封装模态框, 练习面向对象思想

<!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="del">删除</button>
  <button id="login">登录</button>

  <script>
    // 1,封装模态框构造函数
    function Modal(title = '', text = '') {
      // 创建结构
      this.modalBox = document.createElement('div')
      // 设置类名
      this.modalBox.className = 'modal'
      // 设置内容
      this.modalBox.innerHTML =
        `<div class="modal">
             <div class="header">${title} <i>x</i></div>
             <div class="body">${text}</div>
         </div>`
    }

    // 2,打开方法
    Modal.prototype.open = function () {
      // 判断
      const box = document.querySelector('.modal')
      box && box.remove()

      // 把模态框添加到页面
      document.body.append(this.modalBox)

      // 模态框展示后, 才能注册关闭事件
      // 这里要使用箭头函数, 因为需要让this指向当前实例
      this.modalBox.querySelector('i').addEventListener('click', () => {
        // 调用当前实例的关闭方法
        this.close()
      })
    }

    // 3,关闭方法
    Modal.prototype.close = function () {
      //把模态框从页面移除
      this.modalBox.remove()
    }

    // 删除事件
    document.querySelector('#del').addEventListener('click', () => {
      const o = new Modal('友情提示', '没有删除权限')
      o.open()
    })

    // 登录事件
    document.querySelector('#login').addEventListener('click', () => {
      const o = new Modal('温馨提示', '您还没有登录')
      o.open()
    })
  </script>
</body>

</html>