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

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

编程思想

面向过程介绍

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

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

举个栗子:蛋炒饭

面向对象介绍

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

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

举个栗子:盖浇饭

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

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

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

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

面相过程编程

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

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

面向对象编程

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

缺点:性能比面向过程低

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

构造函数

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

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

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

封装是面向对象思想中比较重要的一部分,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 属性指向还是构造函数
// 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__原型的存在。

实例对象和构造函数于原型prototype的关系
  • __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

原型链

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

原型链关系图
// 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

原型链-查找规则

  1. 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
  2. 如果没有就查找它的原型(也就是__proto__指向的prototype原型对象)
  3. 如果还没有就查找原型对象的原型(Object的原型对象)
  4. 依此类推一直找到Object为止null
  5. __proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线
  6. 可以用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上
// 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

分析需求:

  1. 定义模态框Modal构造函数,用来创建对象
    • 1.1 需要的公共属性: 标题title、提示信息内容message可以设置默认参数
    • 1.2 在页面中创建模态框
      • 1.2.1 创建div标签可以命名为modalBox
      • 1.2.2 div标签的类名为modal
      • 1.2.3 标签内部添加 基本结构,并填入相关数据
  2. 模态框具备 打开功能open方法(按钮点击可以打开模态框)
    • 2.1 写到构造函数的原型对象身上
    • 2.2 把刚才创建的modalBox添加到 页面body标签中
    • 2.3 open打开的本质就是 把创建标签添加到页面中
    • 2.4 点击按钮, 实例化对象,传入对应的参数,并执行open方法
  3. 模态框 具备关闭功能close方法
    • 3.1 写到构造函数的原型对象身上
    • 3.2 把刚才创建的modalBox 从页面 body 标签中 删除
    • 3.3 需要注意,x 删除按钮绑定事件,要写到open里面添加
    • 3.4 因为open是往页面中添加元素,同时顺便绑定事件
  4. 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

霍欣标的头像霍欣标
上一篇 2024-09-10
下一篇 2024-09-20

相关推荐

博主人懒,应管局要求暂不开启站内私信和评论功能,如需帮助请发邮件。

邮箱账号:1969600480@qq.com