JavaScript 进阶 - day3

Jasmine_j
148 阅读7分钟

JavaScript 进阶 - 深入面向对象

了解构造函数原型对象的语法特征，掌握 JavaScript 中面向对象编程的实现方式，基于面向对象编程思想实现 DOM 操作的封装。

  • 了解面向对象编程的一般特征
  • 掌握基于构造函数原型对象的逻辑封装
  • 掌握基于原型对象实现的继承
  • 理解什么原型链及其作用
  • 能够处理程序异常提升程序执行的健壮性

编程思想

学习 JavaScript 中基于原型的面向对象编程序的语法实现，理解面向对象编程的特征。

面向过程

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

举个栗子：蛋炒饭 1676792906898.png

面向对象

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

1676792930329.png

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

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

面向对象的特性：

  • 封装性 ：无需知道如何运作，需要时调用即可
  • 继承性 ： 龙生龙、凤生凤、老鼠的儿子会打洞
  • 多态性 ：可以充当很多用处

面向对象和面向过程的优缺点

3.png

构造函数

对比以下通过面向对象的构造函数实现的封装：

<script>
  function Person(uname,age) {
    this.name = uname
    // 设置名字
    this.sing = function(){
      console.log('唱歌')
    }
  }
  // 实例对像，获得了构造函数中封装的所有逻辑
  const ming = new Person('小明')
  Person.sing()  //调用
</script>

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

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

总结：

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

前面我们学过的构造函数方法很好用，但是 存在浪费内存的问题

4.png

原型对象

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

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

5.png

<script>
  function Person() {
    
  }
  // 每个函数都有 prototype 属性
  console.log(Person.prototype)  //[[Prototype]]: Object
</script>

了解了 JavaScript 中构造函数与原型对象的关系后，再来看原型对象具体的作用，如下代码所示：

<script>
    // 【1】公共属性写到 构造函数 里面
     function Star(uname,age){
         this.uname = uname
         this.age = age
      }
   // 【2】公共方法写到原型对象身上（节约内存）
     Star.prototype.sing = function(){
        console.log('我喜欢唱歌')
     }
     const ldh = new Star('刘德华',66)
     const zxy = new Star('张学友',55)
     ldh.sing() //调用  我喜欢唱歌
     zxy.sing()  //调用  我喜欢唱歌
     console.log(ldh.sing === zxy.sing)  //true
</script>

JavaScript 中对象的工作机制：当访问对象的属性或方法时，先在当前实例对象是查找，然后再去原型对象查找，并且原型对象被所有实例共享。

总结：结合构造函数原型的特征，实际开发中往往会将封装的功能函数添加到原型对象中。

this指向

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

<script>
    let that
    function Star (uname) {
       this.uname = uname
       // that = this this指向实例对象 ldh
    }
    Star.prototype.sing = function(){
       console.log('我喜欢唱歌')
       // that = this  this指向实例对象 ldh
    }
    const ldh = new Star('刘德华')
    ldh.sing() //调用
    console.log(that)  //Star {uname: '刘德华'}
</script>

constructor 属性

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

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

6.png

使用场景：

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

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

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

<script>
     function Star(){
     }
     
     Star.prototype.sing = function(){
        console.log('唱歌')
     }
     Star.prototype.dance = function(){
        console.log('跳舞')
     }
     console.log(Star.prototype)  //{sing: ƒ, dance: ƒ, constructor: ƒ}

    // 多次给方法有些麻烦，可以简写
     Star.prototype = {
        // 从新只会创造这个原型对象的函数的 构造函数
        constructor : Star,
        
        sing : function(){
        console.log('唱歌')
        },
         dance : function(){
         console.log('跳舞')
        },
      }
      // console.log(Star.prototype) //{sing: ƒ, dance: ƒ} 没有指向构造函数了
      
      // 加了constructor之后
      console.log(Star.prototype)  //{constructor: ƒ, sing: ƒ, dance: ƒ}

      console.log(Star.prototype.constructor)  //ƒ Star(){}
      console.log(Star.prototype.constructor === Star)  //true
</script>

案例-数组扩展方法

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

<script>
       // 【最大值】
        Array.prototype.max = function(){
            // 展开运算符
            return Math.max(...this)
        }
        // 【最小值】
        Array.prototype.min = function(){
            return Math.min(...this)
        }
        // 【求和】
        Array.prototype.sum = function(){
            return this.reduce((prev,item) => prev+item ,0)
        }

        const arr = [1,2,3,4,5,6,9]
        console.log(arr.max())  //9
        console.log(arr.min())  //1
        console.log(arr.sum())  //30

        console.log([1,3,8,42].max())  ///42
        console.log([15,62,31].sum())  //108
</script>

对象原型

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

7.png

注意：

  • __proto__ 是JS非标准属性
  • [[prototype]] 和 __proto__ 意义相同
  • 用来表明当前实例对象指向哪个原型对象prototype
  • __proto__ 对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数
<script>
        function Star(){
        }
        const ldh = new Star()
        // 对象原型__proto__指向 构造函数的原型对象
        console.log(ldh.__proto__)  //[[Prototype]]:Object
        console.log(ldh.__proto__ === Star.prototype)  //true
        // 对象原型 里面有constructor 指向 构造函数
        console.log(ldh.__proto__.constructor === Star)  //true
</script>

原型继承

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

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

<script>
        const Person = {
            eyes: 2,
            head: 1
        }
        function Woman() {}
        Woman.prototype = Person   
        Woman.prototype.constructor = Woman
        Woman.prototype.baby = function () {
            console.log('宝贝')
        }
        const red = new Woman()
        console.log(red)

        function Man() {}
        Man.prototype = Person
        Man.prototype.constructor = Man
        const pink = new Man()
        console.log(pink)
</script>
1.png

原型继承的问题

如果我们给女人添加了一个生育的方法，发现男人自动也添加这个方法

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

1.1.png

解决办法 ：使用构造函数，男人和女人不要使用同一个对象，但是不同对象里面包含相同的属性和方法，new 每次都会创建一个新的对象

  <script>
    // 构造函数 new出来的对象 【结构】一样，但是对象不一样
       function Person(){
        this.eyes = 2
        this.head = 1
       } 
    // 女人 
       function Woman(){
       }
        //女人通过原型来继承Person
        Woman.prototype = new Person()
        // 指回原来的构造函数
        Woman.prototype.constructor = Woman

        // 给女人添加一个方法 生育
        Woman.prototype.baby = function(){
            console.log('宝贝')
        }
        const red = new Woman()
        console.log(red)

    // 男人
       function Man(){
       }
       // 父构造函数（父类） 子构造函数（子类）
       // 子类的原型 = new父类
       Man.prototype = new Person()
       Man.prototype.constructor = Man
       const blue = new Man()
       console.log(blue)
  </script>

真正做这个案例，我们的思路应该是先考虑大的，后考虑小的

  1. 人类共有的属性和方法有那些，然后做个构造函数，进行封装，一般公共属性写到构造函数内部，公共方法，挂载 到构造函数原型身上。
  2. 男人继承人类的属性和方法，之后创建自己独有的属性和方法
  3. 女人同理

原型链 - 查找规则

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

  <script>
        // function Object(){}
        console.log(Object.prototype) //对象的原型对象
        console.log(Object.prototype.__proto__)  //null

        function Person(){}
        const ldh = new Person()
        console.log(ldh.__proto__ === Person.prototype)  //true
        console.log(Person.prototype.__proto__ === Object.prototype)  //true
        console.log(ldh instanceof Person) //true
        console.log(ldh instanceof Object)  //true
        console.log(ldh instanceof Array)  //flase
        console.log([1,2,3] instanceof Array)  //true
        console.log(Array instanceof Object)  //true
  </script>

① 当访问一个对象的属性（包括方法）时，首先查找这个对象自身有没有该属性。

② 如果没有就查找它的原型（也就是 __proto__指向的prototype原型对象）

③ 如果还没有就查找原型对象的原型（Object的原型对象）

④ 依此类推一直找到 Object 为止（null）

⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向，或者说一条路线

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

案例 - 消息提示对象封装

目的： 练习面向对象写插件（模态框）

2.png

分析需求：

  1. 定义模态框 Modal 构造函数，用来创建对象

需要的公共属性： 标题（title）、提示信息内容（message） 可以设置默认参数

  • 在页面中创建模态框
  1. 创建div标签可以命名为：modalBox
  2. div标签的类名为 modal
  3. 标签内部添加 基本结构，并填入相关数据
  1. 模态框具备 打开功能 open 方法 （按钮点击可以打开模态框）
  • 写到构造函数的原型对象身上
  • 把刚才创建的modalBox 添加到 页面 body 标签中
  • open 打开的本质就是 把创建标签添加到页面中
  • 点击按钮， 实例化对象，传入对应的参数，并执行 open 方法
  1. 模态框 具备关闭功能 close 方法
  • 写到构造函数的原型对象身上
  • 把刚才创建的modalBox 从页面 body 标签中 删除
  • 需要注意，x 删除按钮绑定事件，要写到open里面添加,因为open是往页面中添加元素，同时顺便绑定事件

avatar
文章
阅读
粉丝