• JS进阶——深入对象

    构造函数

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

    原型 

    目标：能够利用原型对象实现方法共享
    • 构造函数通过原型分配的函数是所有对象所 共享的。
    • JavaScript 规定，每一个构造函数都有一个 prototype 属性，指向另一个对象，所以我们也称为原型对象
    • 这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存
    • 我们可以把那些不变的方法，直接定义在 prototype 对象上，这样所有对象的实例就可以共享这些方法。
    • 构造函数和原型对象中的this 都指向 实例化的对象
    1. function Star(uname,age) {
    2.   this.uname = uname
    3.   this.age = age
    4. }
    5. console.log(Star.prototype)//返回一个对象称为原型对象
    6. Star.prototype.sing = function () {
    7.   console.log('我会唱歌')
    8. }
    9. const ldh = new Star('刘德华',19)
    10. const zxy = new Star('张学友',20)
    11. console.log(ldh.sing === zxy.sing) //结果是true

    示例:

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

    constructor 属性

    每个原型对象里面都有个constructor 属性（constructor 构造函数）,该属性指向该原型对象的构造函数

    使用场景：
    如果有多个对象的方法，我们可以给原型对象采取对象形式赋值.
    但是这样就会覆盖构造函数原型对象原来的内容，这样修改后的原型对象 constructor 就不再指向当前构造函数了
    此时，我们可以在修改后的原型对象中，添加一个 constructor 指向原来的构造函数。

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

    对象原型

    对象都会有一个属性 __proto__ 指向构造函数的 prototype 原型对象，之所以我们对象可以使用构造函数 prototype
    原型对象的属性和方法，就是因为对象有 __proto__ 原型的存在。
    注意：
    • __proto__ 是JS非标准属性
    • [[prototype]]和__proto__意义相同
    • 用来表明当前实例对象指向哪个原型对象prototype
    • __proto__对象原型里面也有一个 constructor属性，指向创建该实例对象的构造函数

    原型继承

    继承是面向对象编程的另一个特征，通过继承进一步提升代码封装的程度，JavaScript 中大多是借助原型对象实现继承的特性。
    1. 封装- 抽取公共部分
    把男人和女人公共的部分抽取出来放到人类里面 
    1. const People = {
    2.   head:1,
    3.   eyes:2
    4. }
    5.  
    6. function Man() {}
    7. function Woman() {}
    2. 继承- 让男人和女人都能继承人类的一些属性和方法
    • 把男人女人公共的属性和方法抽取出来 People
    • 然后赋值给Man的原型对象，可以共享这些属性和方法
    • 注意让constructor指回Man这个构造函数
    1. Man.prototype = People
    2. Man.prototype.constructor = Man
    3. const pink = new Man()
    4. console.log(pink)
    3. 问题：
    如果我们给女人添加了一个生孩子的方法，发现男人自动也添加这个方法 
    1. Woman.prototype = People  // {eyes: 2, head: 1} 
    2. Woman.prototype.constructor = Woman
    3.  
    4. // 给女人添加一个方法  生孩子
    5. Woman.prototype.baby = function () {
    6.   console.log('宝贝')
    7. }
    8. const red = new Woman()
    9. console.log(red)
    原因:
    男人和女人都同时使用了同一个对象，根据引用类型的特点，他们指向同一个对象，修改一个就会都影响

    4.解决：

    需求：男人和女人不要使用同一个对象，但是不同对象里面包含相同的属性和方法 
    1.     function Person() {
    2.       this.eyes = 2
    3.       this.head = 1
    4.     }
    5.     function Woman() {}
    6.     Woman.prototype = new Person()   // {eyes: 2, head: 1} 
    7.     Woman.prototype.constructor = Woman
    8.  
    9.     // 给女人添加一个方法  生孩子
    10.     Woman.prototype.baby = function () {
    11.       console.log('宝贝')
    12.     }
    13.     const red = new Woman()
    14.     console.log(red)
    15.     // console.log(Woman.prototype)
    16.     function Man() {}
    17.     // 通过 原型继承 Person
    18.     Man.prototype = new Person()
    19.     Man.prototype.constructor = Man
    20.     const pink = new Man()
    21.     console.log(pink)

    综合案例

    1. DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8" />
    6.   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    7.   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    8.   <title>面向对象封装消息提示title>
    9.   <style>
    10.     .modal {
    11.       width: 300px;
    12.       min-height: 100px;
    13.       box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    14.       border-radius: 4px;
    15.       position: fixed;
    16.       z-index: 999;
    17.       left: 50%;
    18.       top: 50%;
    19.       transform: translate3d(-50%, -50%, 0);
    20.       background-color: #fff;
    21.     }
    22.  
    23.     .modal .header {
    24.       line-height: 40px;
    25.       padding: 0 10px;
    26.       position: relative;
    27.       font-size: 20px;
    28.     }
    29.  
    30.     .modal .header i {
    31.       font-style: normal;
    32.       color: #999;
    33.       position: absolute;
    34.       right: 15px;
    35.       top: -2px;
    36.       cursor: pointer;
    37.     }
    38.  
    39.     .modal .body {
    40.       text-align: center;
    41.       padding: 10px;
    42.     }
    43.  
    44.     .modal .footer {
    45.       display: flex;
    46.       justify-content: flex-end;
    47.       padding: 10px;
    48.     }
    49.  
    50.     .modal .footer a {
    51.       padding: 3px 8px;
    52.       background: #ccc;
    53.       text-decoration: none;
    54.       color: #fff;
    55.       border-radius: 2px;
    56.       margin-right: 10px;
    57.       font-size: 14px;
    58.     }
    59.  
    60.     .modal .footer a.submit {
    61.       background-color: #369;
    62.     }
    63.   style>
    64. head>
    65.  
    66. <body>
    67.   <button id="delete">删除button>
    68.   <button id="login">登录button>
    69.  
    70.   
    71.  
    72.  
    73.   <script>
    74.     // 1.  模态框的构造函数
    75.     function Modal(title = '', message = '') {
    76.       // 公共的属性部分
    77.       this.title = title
    78.       this.message = message
    79.       // 因为盒子是公共的
    80.       // 1. 创建 一定不要忘了加 this 
    81.       this.modalBox = document.createElement('div')
    82.       // 2. 添加类名
    83.       this.modalBox.className = 'modal'
    84.       // 3. 填充内容 更换数据
    85.       this.modalBox.innerHTML = `
    86.         
      ${this.title} x
    87.         
      ${this.message}
    88.       `
    89.       // console.log(this.modalBox)
    90.     }
    91.     // 2. 打开方法 挂载 到 模态框的构造函数原型身上
    92.     Modal.prototype.open = function () {
    93.       if (!document.querySelector('.modal')) {
    94.         // 把刚才创建的盒子 modalBox  渲染到 页面中  父元素.appendChild(子元素)
    95.         document.body.appendChild(this.modalBox)
    96.         // 获取 x  调用关闭方法
    97.         this.modalBox.querySelector('i').addEventListener('click', () => {
    98.           // 箭头函数没有this 上一级作用域的this
    99.           // 这个this 指向 m 
    100.           this.close()
    101.         })
    102.       }
    103.     }
    104.     // 3. 关闭方法 挂载 到 模态框的构造函数原型身上
    105.     Modal.prototype.close = function () {
    106.       document.body.removeChild(this.modalBox)
    107.     }
    108.  
    109.     // 4. 按钮点击
    110.     document.querySelector('#delete').addEventListener('click', () => {
    111.       const m = new Modal('温馨提示', '您没有权限删除')
    112.       // 调用 打开方法
    113.       m.open()
    114.     })
    115.  
    116.     // 5. 按钮点击
    117.     document.querySelector('#login').addEventListener('click', () => {
    118.       const m = new Modal('友情提示', '您还么有注册账号')
    119.       // 调用 打开方法
    120.       m.open()
    121.     })
    122.  
    123.   script>
    124. body>
    125.  
    126. html>
  • 相关阅读:
    c语言：打印成绩单
    打开英雄联盟缺少d3dcompiler_43.dll有哪些处理方法
    [Python] 面向对象(二)
    轻松拿捏C语言——【文件操作】
    Linux每日智囊
    SCM供应链管理的背景及意义
    Flutter实践一：package组织
    ＜＜Java＞＞ Hash(哈希表) 你会使用吗？知道底层原理吗？：三分钟一篇学会
    辅助知识-第6 章 信息系统安全管理
    人工智能核心基础 - 规划和概要
  • 原文地址：https://blog.csdn.net/2301_78796401/article/details/136356916