JavaScript原型对象和对话框功能

要理解面向对象思想，掌握函数原型对象，运用面向对象封装确认框对话框功能。

编程思想

面向过程介绍

面向过程，就是按照我们分析好了的步骤，按照步骤解决问题

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

举个栗子：蛋炒饭

面向对象介绍

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

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

举个栗子：盖浇饭

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

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

面向对象的特性：封装性、继承性、多态性

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

面相过程编程

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

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

面向对象编程

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

缺点：性能比面向过程低

生活离不开蛋炒饭，也离不开盖浇饭，选择不同而已，只不过前端不同于其他语言，面向过程更多。

构造函数

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

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

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

封装是面向对象思想中比较重要的一部分，js面向对象可以通过构造函数实现的封装。前面我们学过的构造函数方法很好用，但是存在浪费内存的问题。

简单数据类型（栈）可以使用完立即回收，复杂数据类型（堆）就会浪费内存。

// 构造函数 •公共的属性和方法 封装到 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) // false
console.log(ldh) // {uname: '刘德华', age: 55, sing: ƒ}
console.log(zxy) // {uname: '张学友', age: 58, sing: ƒ}
console.log(ldh.sing === zxy.sing) // false 说明两个函数不一样

原型

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

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

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

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

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

function Star(uname, age) {
  this.uname = uname
  this.age = age
  this.sing = function () {
    console.log('唱歌')
  }
}
console.dir(Star.prototype) // Object

// 1. 公共的属性写到 构造函数里面
function Star(uname, age) {
  this.uname = uname
  this.age = age
  // this.sing = function () {
  //   console.log('唱歌')
  // }
}

// 2. 公共的方法写到原型对象身上
// 原型对象不管你实例多少各对象，只调用一次
Star.prototype.sing = function () {
  console.log('唱歌')
}
const ldh = new Star('刘德华', 55)
const zxy = new Star('张学友', 58)
ldh.sing() // 唱歌
zxy.sing() // 唱歌
console.log(ldh.sing === zxy.sing) // true

// 验证属性的 this 指向实例对象
let that
function Star(uname) {
  that = this
  this.uname = uname
}
// 构造函数里面的this 就是实例对象Ldh
// 实例对象ldh
const ldh = new Star('刘德华')
console.log(that === ldh) // true

// 原形对象的 this 还是指向实例对象
let thas
Star.prototype.sing = function () {
  thas = this
  console.log('唱歌')
}
ldh.sing() // 唱歌
console.log(thas === ldh) // true

练习：给数组扩展方法

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

// 1.自己定义数组扩展的方法，任何一个数组实例对象都可以使用
// 2. 自定义的方法写到数组.prototype 身上

const arr = [1, 2, 3]
// 3. 求最大值
Array.prototype.max = function () {
  // 内置对象取最大值（展开运算符）
  return Math.max(...this)
  // 原型函数里面的this 指向是实例对象 >>> arr
}
console.log(arr.max()) // 3
console.log([2, 5, 9].max()) // 9

// 4. 求最小值
Array.prototype.min = function () {
  // 内置对象取最小值（展开运算符）
  return Math.min(...this)
  // 原型函数里面的this 指向是实例对象 >>> arr
}
console.log(arr.min()) // 1
console.log([2, 5, 9].min()) // 2

// 5. 求和方法
Array.prototype.sum = function () {
  return this.reduce((prev, item) => prev + item, 0)

}
console.log(arr.sum()) // 6
console.log([2, 5, 9].sum()) // 16

constructor属性

在哪里？每个原型对象里面都有个constructor属性

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

// constructor 中文是构造器
function Star() {

}
const ldh = new Star()
// console.log(Star.prototype)
console.log(Star.prototype.constructor === Star) // true

使用场景

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

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

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

// constructor 中文是构造器
function Star() {

}

// Star.prototype.sing = function () {
//   console.log('唱歌')
// }
// Star.prototype.dance = function () {
//   console.log('跳舞')
// }
// console.log(Star.prototype)

Star.prototype = {
  // 从新指回创造这个原型对象的 构造函数
  constructor: Star,
  sing: function () {

    console.log('唱歌')
  },
  dance: function () {
    console.log('跳舞')
  },
}
console.log(Star.prototype) 
// { sing: ƒ, dance: ƒ } constructor: ƒ Star()dance: ƒ()sing: ƒ()[[Prototype]]: Object

对象原型

构造函数可以创建实例对象，构造函数还有一个原型对象，一些公共的属性或者方法放到这个原型对象身上，但是为啥实例对象可以访问原型对象里面的属性和方法呢？

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

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

“实例对象的对象原型”指向“构造函数的原型对象”

function Star() { }
const ldh = new Star()

// 1. 对象原型__proto__指向构造函数的原型对象 prototype
console.log(ldh.__proto__ === Star.prototype) // true

// 2. 对象原型里面有constructor 指向 构造函数 'Star
console.log(ldh.__proto__.constructor === Star) // true

原型继承

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

龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。

问题：

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

解决：

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

答案：构造函数，new每次都会创建一个新的对象

// 女人 构造函数
// function Woman() {
//   this.eays = 2
//   this.head = 1
// }

// 男人 构造函数
// function Man() {
//   this.eays = 2
//   this.head = 1
// }
// const a = new Woman()
// const b = new Man()
// console.log(a) // Woman {eays: 2, head: 1}
// console.log(b) // Man {eays: 2, head: 1}

// 1. 把构造函数里面属性再次抽取 公共的部分放到原型上
// const Person1 = {
//   eays: 2,
//   head: 1
// }
// const Person2 = {
//   eays: 2,
//   head: 1
// }
// Woman.prototype = Person1
// Man.prototype = Person2

// 1.1 继续抽取（构造函数） new出来的对象结构一样，但是对象不一样
function Person() {
  this.eays = 2
  this.head = 1
}

// 2. 通过原型来继承 Person 共享属性
Woman.prototype = new Person()
Man.prototype = new Person()

// 3. 指回原来的构造函数
Woman.prototype.constructor = Woman
Man.prototype.constructor = Man

// 4. 给女人添加一个方法 生孩子
Woman.prototype.baby = function () {
  console.log('宝贝')
}

function Woman() { }
function Man() { }

const a = new Woman()
console.log(a) // Woman {eays: 2, head: 1}
console.log(a.eays) // 2

const b = new Man()
console.log(b) // Man {eays: 2, head: 1}
console.log(b.eays) // 2

原型链

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

所有的对象里面都有proto对象原型，指向原型对象
所有的原型对象里面有constructor ，指向创造改原型对象的构造函数

// 1. 最大的内置构造函数
// function Object() { }
// console.log(Object.prototype)

// 2. 自定义的构造函数
function Person() { }
const ldh = new Person()

console.log(ldh.__proto__ === Person.prototype) // true
console.log(Person.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null

原型链-查找规则

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

Array构造函数最终指向还是Object，万物皆对象

// 1. 最大的内置构造函数
// function Object() { }
// console.log(Object.prototype)

// 2. 自定义的构造函数
function Person() { }
const ldh = new Person()

console.log(ldh.__proto__ === Person.prototype) // true
console.log(Person.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null

// 运算符 instanceof ldh 属不属于 Person
console.log(ldh instanceof Person) // true
console.log(ldh instanceof Object) // true
console.log(ldh instanceof Array) // false
console.log([1, 2, 3] instanceof Array) // true
console.log(Array instanceof Object) // true

综合案例：模态框封装

面向对象写模态框插件 Demo

分析需求：

定义模态框Modal构造函数，用来创建对象
- 1.1 需要的公共属性：标题title、提示信息内容message可以设置默认参数
- 1.2 在页面中创建模态框
  - 1.2.1 创建div标签可以命名为modalBox
  - 1.2.2 div标签的类名为modal
  - 1.2.3 标签内部添加基本结构，并填入相关数据
模态框具备打开功能open方法（按钮点击可以打开模态框）
- 2.1 写到构造函数的原型对象身上
- 2.2 把刚才创建的modalBox添加到页面body标签中
- 2.3 open打开的本质就是把创建标签添加到页面中
- 2.4 点击按钮，实例化对象，传入对应的参数，并执行open方法
模态框具备关闭功能close方法
- 3.1 写到构造函数的原型对象身上
- 3.2 把刚才创建的modalBox 从页面 body 标签中删除
- 3.3 需要注意，x 删除按钮绑定事件，要写到open里面添加
- 3.4 因为open是往页面中添加元素，同时顺便绑定事件
bug：多次点击会显示很多的模态框
- 准备open显示的时候，先判断页面中有没有modal盒子，有就移除，没有就添加

// 1. Modal 构造函数封装 - 模态框
function Modal(title = '', message = '') {
  // 1.1 创建 modal模态框盒子 div标签
  this.modalBox = document.createElement('div')
  // 1.2 给div标签添加类名为 modal
  this.modalBox.className = "modal"
  // 1.3 modal盒子内部填充 2个div 标签并且修改文字内容
  this.modalBox.innerHTML = `
    <div class="modal">
      <div class="header">${title}<i>x</i></div>
      <div class="body">${message}</div>
    </div>
  `
  // console.log(this.modalBox)
}
// new Modal('微信提示', '您没有权限删除操作')
// new Modal('友情提示', '您还没有登录呢')

// 2. 给构造函数原型对象挂载 open 方法
Modal.prototype.open = function () {
  // 先来判断页面中是否有modaL盒子，如果有先删除，否则继续添加
  const box = document.querySelector('.modal')
  // 逻辑与中断：如果为假，box.remove 就不再执行了
  // 如果为假，box.remove就不再执行了,从下行执行
  // 如果为假，box.remove就执行了（移除）, 从下行执行
  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()
})

// 测试一下 点击新增按钮
document.querySelector('#add').addEventListener('click', () => {
  // 先调用modal构造函数
  const add = new Modal('强烈提示', '您还没有新增的权限')
  // 实例对象调用 open 方法
  add.open()
})

原创文章，作者：霍欣标，如若转载，请注明出处：https://www.bigengwu.cn/xue/152.html

面向原型对象和对话框功能