JavaScript进阶(day03:深入面向对象)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学,可以点心心支持一下哈

一、编程思想

1.面向过程介绍

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

2.面向对象介绍(oop)

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

特性:封装性、继承性、多态性

JavaScript进阶(day03:深入面向对象)_第1张图片

对比

JavaScript进阶(day03:深入面向对象)_第2张图片

二、构造函数

1. 构造函数体现了面向对象的封装特性

2. 构造函数实例创建的对象彼此独立、互不影响

存在浪费内存的问题

JavaScript进阶(day03:深入面向对象)_第3张图片

总结

JavaScript进阶(day03:深入面向对象)_第4张图片

三、原型

1.什么是原型

公共的属性写到构造函数里面

公共的方法写到原型对象身上

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

JavaScript进阶(day03:深入面向对象)_第5张图片

总结

JavaScript进阶(day03:深入面向对象)_第6张图片

案例(给数组扩展方法)

JavaScript进阶(day03:深入面向对象)_第7张图片

 const arr = [1, 2, 3]
      // 给数组扩展最大值方法
      Array.prototype.max = function () {
        return Math.max(...this)
      }
      // 给数组扩展求和方法
      Array.prototype.sum = function () {
        return this.reduce((pre, current) => pre + current, 0)
      }
      console.log(arr.max())
      console.log(arr.sum())

2.constructor属性

该属性指向该原型对象的构造函数

JavaScript进阶(day03:深入面向对象)_第8张图片

使用场景

JavaScript进阶(day03:深入面向对象)_第9张图片

总结

JavaScript进阶(day03:深入面向对象)_第10张图片

3.对象原型

对象都会有一个属性_proto_指向构造函数的prototype原型对象

JavaScript进阶(day03:深入面向对象)_第11张图片

注意

JavaScript进阶(day03:深入面向对象)_第12张图片

总结

JavaScript进阶(day03:深入面向对象)_第13张图片

案例(根据下面代码,请画图)

JavaScript进阶(day03:深入面向对象)_第14张图片

JavaScript进阶(day03:深入面向对象)_第15张图片

      function Person() {
        this.name = name
      }
      const peppa = new Person('佩奇')
      // 1.验证原型对象的constructor指向构造函数
      console.log(Person.prototype.constructor === Person) //true
      // 2.验证对象原型的__proto__.constructor指向构造函数
      console.log(peppa.__proto__.constructor === Person) //true
      // 3.验证对象原型的__proto__指向原型对象
      console.log(peppa.__proto__ === Person.prototype) //true

4.原型继承

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

JavaScript进阶(day03:深入面向对象)_第16张图片

案例(练习通过原型对象实现原型继承)

JavaScript进阶(day03:深入面向对象)_第17张图片

 // 父类
      function People() {
        this.head = 1
        this.eyes = 2
      }
      // 子类
      function Women() {}
      function Man() {}
      // 子类继承父类
      Women.prototype = new People()
      Man.prototype = new People()
      // 子类重新指向自己的构造函数
      Women.prototype.constructor = Women
      Man.prototype.constructor = Man
      Women.prototype.baby = function () {
        console.log('宝宝')
      }
      const red = new Women()
      console.log(red)
      const pink = new Man()
      console.log(pink)

5.原型链

原型链是JavaScript中实现继承的一种机制,是一种查找规则,意义就在于为对象成员查找机制提供一个方向,或者说一条路线。工作原理:当访问一个对象的属性或方法时,如果在该对象本身中找不到,就会沿着原型链向上查找,直到找到为止。

两句话:

所有的对象里面都有__proto__对象原型 指向原型对象

所有的原型对象里面有constructor,指向创造该原型对象的构造函数

JavaScript进阶(day03:深入面向对象)_第18张图片

原型链-查找规则

JavaScript进阶(day03:深入面向对象)_第19张图片

instanceof运算符

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

四、综合案例

案例(模拟框封装)

JavaScript进阶(day03:深入面向对象)_第20张图片

  // 定义构造函数
      function Modal(title = '', msg = '') {
        this.modal = document.createElement('div')
        this.modal.classList.add('modal')
        this.modal.innerHTML = `
        

${title}x

${msg}

` } new Modal('adwa', 'xx') // // 关闭方法 Modal.prototype.close = function () { document.body.removeChild(this.modal) } // // 添加方法 Modal.prototype.open = function () { // 判断页面有没有modal盒子 const box = document.querySelector('.modal') // 如果有先删除之前的模拟框,没有则进行添加 box && box.remove() document.body.appendChild(this.modal) // 模拟框要先渲染到页面上,再进行删除事件的绑定 this.modal.querySelector('.close').addEventListener('click', () => { // 使用箭头函数,this指向当前的实例对象 this.close() }) } document.querySelector('.del').addEventListener('click', function () { const del = new Modal('温馨提示', '你没有删除的权限') del.open() }) document.querySelector('.login').addEventListener('click', function () { const login = new Modal('友情提示', '请先登录') login.open() })

你可能感兴趣的:(JavaScript进阶,javascript,开发语言,ecmascript)