JS进阶——深入面向对象

1、编程思想

1.1 面向过程编程

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

1.2 面向对象编程（oop）

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

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

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

面向过程编程

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

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

面向对象编程

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

缺点：性能比面向过程低

2、构造函数

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

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

总结：

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

    <script>
        // 构造函数 公共的属性和方法  封装到Star 构造函数里面了
        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)
        console.log(ldh === zxy)
    </script>

封装是面向对象思想中比较重要的一部分，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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 自己定义 数组扩展方法 求和 和最大值
        // 1. 我们定义的这个方法，任何一个数组实例对象都可以使用
        // 2. 自定义的方法写到 数组.prototype 身上
        // 1.最大值
        const arr = [1,2,3]
        Array.prototype.max = function(){
            // 展开运算符
            return Math.max(...this)
            // 原型函数里面的this， 指向实例对象arr
        }
        Array.prototype.min = function(){
            // 展开运算符
            return Math.min(...this)
            // 原型函数里面的this， 指向实例对象arr
        }
        console.log(arr.max())
        console.log([2,5,9].max())
        console.log(arr.min())
        
        // const arr = new Array(1,2)
        // console.log(arr)


        // 3. 求和 方法
        Array.prototype.sum = function(){
            this.reduce((prev,item) => prev+item, 0)
        }
        console.log([1,2,3].sum())
        console.log([11,21,31].sum())
    </script>
</body>
</html>

3.2 constructor属性

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

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

使用场景：

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

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

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

3.3 对象原型

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

    <script>
        function Star(){}
        const ldh = new Star()
        // 对象原型__proto__ 指向该构造函数的原型对象
        console.log(ldh.__proto__)
        // console.log(ldh.__proto__ === Star.prototype)  // true
        // 对象原型里面有constructor指向 构造函数 Star
        console.log(ldh.__proto__.constructor  === Star)  // true
    </script>

注意：

__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每次都会创建一个新的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 继续抽取  公共的部分放到原型上
        // const Perosn1 = {
        //     eyes:2,
        //     head:1
        // }
        // const Perosn2 = {
        //     eyes:2,
        //     head:1
        // }
        // 构造函数 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(Woman.prototype)

        // 男人 构造函数  继承 想要 继承Person
        function Man(){
            
        }
        // 通过原型继承 Person
        Man.prototype = new Person()
        Man.prototype.constructor = Man
        const green = new Man()
        console.log(green)
    </script>
</body>
</html>

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盒子，有就移除，没有就添加

<!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>

  <!-- <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.ModalBox = document.createElement('div')
      // 1.2 给div标签添加类名为modal
      this.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('友情提示','您还没有注册')

    // 2.给构造函数原型对象挂载open方法
    Modal.prototype.open = function(){
      // 先判断页面中是否有modal盒子，如果有就删除，否则就继续添加
      const box = document.querySelector('.modal')
      box && box.remove()
      // 注意这个方法不要用箭头函数
      // 把刚才创建的modalBox 显示到页面body中
      document.body.append(this.ModalBox)

      // 要等着盒子显示出来，就可以绑定点击事件了
      this.ModalBox.querySelector('i').addEventListener('click',() => {
        // 这个地方需要用到箭头函数
        // 这个this指向 实例对象
        this.close()
      })
    }

    // 3.给构造函数原型对象挂载close方法
    Modal.prototype.close = function(){
      this.ModalBox.remove()
    }

    // 测试，点击删除按钮
    document.querySelector('#delete').addEventListener('click',()=>{
      // 先调用Modal构造函数
      const del = new Modal('温馨提示','您没有权限删除操作')
      // 实例对象调用open方法
      del.open()
    })

    // 测试，点击登录按钮
    document.querySelector('#login').addEventListener('click',()=>{
      // 先调用Modal构造函数
      const login = new Modal('友情提示','您还没有注册')
      // 实例对象调用open方法
      login.open()
    })


  </script>
</body>

</html>