JavaScript的面向对象思想及实现

文章目录

深入面向对象
- 编程思想
- - 面向过程编程
  - 面向对象编程
- 构造函数
- 原型
- - - 数组扩展案例
  - constructor属性
  - 使用场景
  - 对象原型
  - 原型继承
  - 原型链
- 面向对象思想代码实现——模态框封装

深入面向对象

编程思想

面向过程编程

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

优点：性能比面向对象高，适合跟硬件联系紧密的东西，例如单片机等。

缺点：没有面向对象灵活。

面向对象编程

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

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

面向对象编程具有灵活、代码可复用、容易维护和开发的优点，更适合多人合作的大型软件项目。

面向对象的特性：

封装性
继承性
多态性

优点：易维护、易复用、易扩展，由于面向对象的特性，可以设计低耦合的系统，使系统更加灵活。

缺点：性能比面向对象低。

构造函数

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

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

function Stu(name, age){
    this.name = name
    this.age = age
    this.swimming = function(){
        console.log('I like swimming')
    }
}
const lily = new Stu('lily', 18)
const Tom = new Stu('Tom', 19)
console.log(lily === Tom) // false

总结：

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

构造函数方法很好用，但是存在浪费内存的问题——当我们用构造函数封装多个对象时，每一个对象都会创建同一个方法，造成内存浪费。

原型

构造函数通过原型分配的函数是所有对象所共享的。
JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象，所以我们也称为原型对象。
这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存。
我们可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。
构造函数和原型对象中的this都指向实例化的对象。

// 公共的属性写在构造函数上，公共的方法写在原型上
function Stu(name, age){
    this.name = name
    this.age = age
}
Stu.prototype.swimming = function(){
    console.log('I like swimming')
}
const lily = new Stu('lily', 18)
const Tom = new Stu('Tom', 19)
console.log(lily.swimming === Tom.swimming) // true

// 构造函数和原型对象中的this都指向实例化的对象。
let that1
let that2
function Stu(name, age){
    that1 = this
    this.name = name
    this.age = age
}
Stu.prototype.swimming = function(){
    console.log('I like swimming')
    that2 = this
}
const lily = new Stu('lily', 18)
console.log(that1 === lily) // true
console.log(that2 === lily) // true

数组扩展案例

给数组定义一个求最小值的方法：

    let arr = [2, 1, 3]
    Array.prototype.min = function () {
      return Math.min(...this)
    }
    console.log(arr.min()) // 1

给数组定义一个求和方法：

    Array.prototype.sum = function () {
      return this.reduce((pre, item) => pre + item, 0)
    }
    console.log(arr.sum()) // 6

constructor属性

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

作用：该属性指向该原型对象的构造函数，让原型对象指向父亲。

function star() {
	// 函数主体 
}
console.log(star.prototype.constructor === star) // true

使用场景

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

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

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

function Star() {
	// 函数主体
}
Star.prototype = {
  constructor: Star,
  sing: function () {
    console.log('sing')
  },
  dance: function () {
    console.log('dance')
  },
}
console.log(Star.prototype.constructor); // Star

对象原型

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

注意：

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

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

流程图

原型继承

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

问题：两个构造函数同时使用了一个对象，根据引用类型的特点，他们指向同一个对象，修改一个会影响另一个。

    const per = {
      eye: 2,
      head: 1,
    }
    function Nv() {

    }
    function Nan() {

    }
    Nv.prototype = per
    Nv.prototype.constructor = Nv
    Nv.prototype.baby = function () {
      console.log('aaa');
    }
    Nan.prototype = per
    Nan.prototype.constructor = Nan
    const red = new Nv()
    console.log(red);
    const blue = new Nan()
    console.log(blue); // 同样有在Nv函数里定义的方法

解决方法：将per对象改成构造函数，需要使用的时候通过new per引用。

    function Per() {
      eye: 2,
      head: 1,
    }
    function Nv() {

    }
    function Nan() {

    }
    Nv.prototype = new Per()
    Nv.prototype.constructor = Nv
    Nv.prototype.baby = function () {
      console.log('aaa');
    }
    Nan.prototype = new Per()
    Nan.prototype.constructor = Nan
    const red = new Nv()
    console.log(red);
    const blue = new Nan()
    console.log(blue); // 这时blue中不再包含构造函数Nv中的方法

原型链

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

流程图

查找规则：

当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。
如果没有就查找它的原型（也就是__proto__指向的prototype原型对象）
如果还没有就查找原型对象的原型（Object的原型对象）
依次类推一直找到Object为止（null）
__proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者是一条路线

可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。

    function Star() { }
    const a = new Star()
    console.log(a instanceof Star); // true
    console.log(a instanceof Object); // true
    console.log(a instanceof Array); // false
    console.log([1, 2, 3] instanceof Array); // true
    console.log(Array instanceof Object); // true
    console.log([1, 2, 3] instanceof Object); // true

面向对象思想代码实现——模态框封装

<!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 {
      border: 1px solid #ccc;
      padding: 10px;
      width: 250px;
      text-align: center;
      margin: 200px auto;
    }

    i {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <button id="delete">删除</button>
  <button id="login">登录</button>
  <script>
    function Modal(title = '', message = '') {
      this.modalBox = document.createElement('div')
      this.modalBox.className = 'modal'
      this.modalBox.innerHTML = `
        <div class="header">${title} <i>x</i></div>
        <div class="body">${message}</div>
      `
    }
    Modal.prototype.open = function () { // 不能使用箭头函数
      const box = document.querySelector('.modal')
      box && box.remove()
      document.body.append(this.modalBox)
      this.modalBox.querySelector('i').addEventListener('click', () => { // 必须使用箭头函数，使this指向实例对象
        this.close()
      })
    }
    Modal.prototype.close = function () {
      this.modalBox.remove()
    }
    document.querySelector('#delete').addEventListener('click', () => {
      const del = new Modal('温馨提示', '您没有权限删除操作')
      del.open()
    })
    document.querySelector('#login').addEventListener('click', () => {
      const del = new Modal('友情提示', '您还没有注册')
      del.open()
    })
  </script>
</body>

</html>