• JS进阶-原型

    原型

    原型就是一个对象，也称为原型对象

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

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

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

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

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

    实例对象可直接访问原型对象中函数与分析

    先找实例对象属性或函数，再找原型对象中属性或函数

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

    console.dir()方法可以在控制台显示指定javascript对象的属性。打印出该对象的所有属性和属性值
    1.     function Star(uname, age) {
    2.       this.uname = uname
    3.       this.age = age
    4.     }
    5.     Star.prototype.sing = function () {
    6.       console.log('唱歌')
    7.     }
    8.     const ldh = new Star('刘德华', 55)
    9.     const zxy = new Star('张学友', 58)
    10.     ldh.sing()
    11.     zxy.sing()
    12.     console.log(ldh.sing === zxy.sing)//true

     公共的属性写到构造函数里面，公共的方法写到原型对象身上。

    案例：数组扩展方法

    1.     const arr = [1, 2, 3]
    2.     Array.prototype.sum = function () {
    3.       return this.reduce((prev, item) => prev + item, 0)
    4.     }
    5.     console.log(arr.sum())

    constructor属性

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

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

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

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

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

    1.     function Star() { }
    2.     Star.prototype = {
    3.       constructor: Star,
    4.       sing: function () {
    5.         console.log('唱歌')
    6.       },
    7.       dance: function () {
    8.         console.log('跳舞')
    9.       }
    10.     }

    对象原型__proto__

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

    注意：

    __proto__在实例对象里面

    __proto__是JS非标准属性

    [[prototype]]和__proto__意义相同

    只读的，只能获取不能赋值

    用来表明当前实例对象指向哪个原型对象prototype

    __proto__对象原型里面也有一个constructor属性，指向创建该实例对象的构造函数

    原型继承

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

    1.     const Person = {
    2.       eyes: 2,
    3.       head: 1
    4.     }
    5.     function Man() {
    6.  
    7.     }
    8.     Man.prototype = Person
    9.     Man.prototype.constructor = Man
    10.     const pink = new Man()
    11.     console.log(pink)

    问题：继承方法时会混乱，会覆盖不独立

    1.     function Person() {
    2.       this.eyes = 2
    3.       this.head = 1
    4.     }
    5.     function Woman() {
    6.  
    7.     }
    8.     Woman.prototype = new Person()
    9.     Woman.prototype.constructor = Woman
    10.     Woman.prototype.baby = function () {
    11.       console.log('宝贝')
    12.     }
    13.     const red = new Woman()
    14.     console.log(red)

    原型链

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

    查找规则

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

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

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

    4.依次类推一直找到Object为止（null）

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

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

    Array instanceof Object //true,万物皆为对象

    案例：模态框封装

    1. <!doctype html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6. </head>
    7.  
    8. <body>
    9.   <button id='delete'>删除</button>
    10.   <button id='login'>登录</button>
    11.   <script>
    12.     function Model(title = '', message = '') {
    13.       this.modelBox = document.createElement('div')
    14.       this.modelBox.className = 'model'
    15.       this.modelBox.innerHTML = `<div class="header">${title}<i>x</i></div>
    16.       <div class="body">${message}</div>`
    17.       console.log(this.modelBox)
    18.     }
    19.     //new Model('温馨提示', '您没有删除权限')
    20.     //new Model('友情提示', '您还没登录呢')
    21.     Model.prototype.open = function () {
    22.       const box = document.querySelector('.model')
    23.       box && box.remove()
    24.       document.body.append(this.modelBox)
    25.       this.modelBox.querySelector('i').addEventListener('click', () => {
    26.         this.close()
    27.       })
    28.     }
    29.     document.querySelector('#delete').addEventListener('click', () => {
    30.       const del = new Model('温馨提示', '您没有删除权限')
    31.       del.open()
    32.     })
    33.     document.querySelector('#login').addEventListener('click', () => {
    34.       const login = new Model('友情提示', '您还没登录呢')
    35.       login.open()
    36.     })
    37.     Model.prototype.close = function () {
    38.       this.modelBox.remove()
    39.     }
    40.   </script>
    41. </body>

  • 相关阅读:
    逍遥自在学C语言 | 算数运算符
    微服务框架 SpringCloud微服务架构 7 Feign 7.1 基于Feign 远程调用
    磁盘分析 wiztree[win32] && baobab[linux]
    积分专题笔记-与路径无关条件
    用户登录后首页不显示数据
    ucosii初认识==ucosii
    竞赛 深度学习 opencv python 公式识别(图像识别 机器视觉)
    Spring Security HTTP认证
    【微信小程序模板直接套用】微信小程序制作模板套用平台
    Python操作Kafka基础教程
  • 原文地址：https://blog.csdn.net/weixin_46479909/article/details/133622984