JS——原型、constructor属性、对象原型、原型继承、原型链

最新推荐文章于 2024-08-08 23:04:40 发布

Axuangogo

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量384

点赞数 7

文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/Axuangogo/article/details/137941391

版权

一、知识点

面向过程：性能好；不灵活、复用性
面向对象：灵活、复用好；性能不好

1、原型

    const arr= new Array(1,2,5,3)
    // 定义数组的扩展方法，任何一个数组实例对象都可以使用
    // 求最大值
    Array.prototype.max = function(){
      // 展开运算符
      return Math.max(...this)
    }
    // 返回5
    console.log(arr.max());

    // 求和
    Array.prototype.sum = function(){
      return this.reduce( ( prev,item ) => prev + item , 0)
    }
    // 返回11
    console.log(arr.sum());

2、constructor属性

3、对象原型

4、原型继承

5、原型链

二、综合案例

封装模态框，打开，关闭

<body>
  <button id="delete">删除</button>
  <button id="login">登录</button>
  <script>
    function Modal(title = '',message = '') {
      // 创建模态框盒子
      this.modalBox = document.createElement('div')
      this.modalBox.className = 'modal'
      this.modalBox.innerHTML = `
      <div class="header">${title} <i>x</i></div>
      <div class="body">${message}</div>
      `
    }
    
    // 关闭
    Modal.prototype.close = function(){
      this.modalBox.remove()
    }

    // 打开
    Modal.prototype.open = function(){
      // 判断页面中是否有modal盒子，有则删除，没有则添加
      const box =document.querySelector('.modal')
      box && box.remove()
      // 把刚才创建的modalBox显示到页面body中
      document.body.append(this.modalBox)
      // 等盒子显示出来，绑定点击事件
      this.modalBox.querySelector('i').addEventListener('click', () => {
        this.close()
      })
    }
    
    // 创建实例化对象
    document.querySelector('#delete').addEventListener('click',() => {
      // 先调用Modal构造函数
      const del = new Modal('温馨提示','您没有权限删除操作')
      del.open()
    })
    document.querySelector('#login').addEventListener('click',() => {
      const log = new Modal('友情提示','您没有权限注册账号')
      log.open()
    })
    </script>
</body>