原型链 面向对象 构造函数原型对象实例对象三者之间的关系

星空旅行者曦
120 阅读1分钟

1.面向对象三大特征

** 1.封装:把对象放入对象的方法 2.继承:一个对象(子对象)拥有另一个对象(父对象)所有的成员(重点) 3.多态:一个对象在不同情况下的不同状态 **

原型继承:把父对象作为1子对象构造函数的原型

2.原型链

每一个对象都有自己的原型,而原型也是对象,也会有自己的原型,以此类推形成链式结构:称之为原型链(原型链的终点是null)

访问原型链的规则(就近原则)

** 对象先访问自己的，自己没有就找原型的，原型没有就找原型的原型，一直到原型链终点null.如果还找不到.属性则获取undefined, 方法则会报错 xxx is not function** 构造函数原型函数实例化对象原型链两层关系图 原型链关系图 多条原型链关系图 详解 不同标签访问原型链的规则标签使用时的关系图 在这里插入图片描述 在这里插入图片描述 构造函数关系图在这里插入图片描述 在这里插入图片描述 在这里插入图片描述 在这里插入图片描述

原型链封装(主要讲解继承作用和使用场景)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>面向对象封装消息提示</title>
  <style>
    .modal {
      width: 300px;
      min-height: 100px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      position: fixed;
      z-index: 999;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      background-color: #fff;
    }

    .modal .header {
      line-height: 40px;
      padding: 0 10px;
      position: relative;
      font-size: 20px;
    }

    .modal .header i {
      font-style: normal;
      color: #999;
      position: absolute;
      right: 15px;
      top: -2px;
      cursor: pointer;
    }

    .modal .body {
      text-align: center;
      padding: 10px;
    }

    .modal .footer {
      display: flex;
      justify-content: flex-end;
      padding: 10px;
    }

    .modal .footer a {
      padding: 3px 8px;
      background: #ccc;
      text-decoration: none;
      color: #fff;
      border-radius: 2px;
      margin-right: 10px;
      font-size: 14px;
    }

    .modal .footer a.submit {
      background-color: #369;
    }
  </style>
</head>

<body>
  <button id="btn1">消息提示1</button>
  <button id="btn2">消息提示2</button>
  <button id="btn3">消息提示3</button>
  <button id="btn4">消息提示4</button>

  <!-- <div class="modal">
      <div class="header">提示消息 <i>x</i></div>
      <div class="footer">
        <img src="./111.jpg" alt="" width="80%">
      </div>
    </div> -->


  <script>
    // document.write()  元素.innerHtml=`字符串`    元素.appendChild  添加到页面的   
    //构造函数
    function Modal(title, message) {
      this.title = title
      this.message = message
      this.modalBox = `<div class="modal">
      <div class="header">${title} <i>x</i></div>
      <div class="footr">
        ${message}
      </div>
    </div>`
    }
    //模态框原型
    Modal.prototype.open = function () {
      //创建空标签
      let div = document.createElement('div')
      //this指向   Modal构造函数创建的函数体
      div.innerHTML = this.modalBox
      document.body.appendChild(div)
      //注册点击事件    删除
      div.querySelector('i').onclick = function () {
        document.body.removeChild(div)
      }
    }

    document.querySelector('#btn1').onclick = function () {
      //创建Modal实例
      let m1 = new Modal('友情提示', '登陆成功')
      console.log(m1)
      //展示模态框
      m1.open()

    }
    document.querySelector('#btn2').onclick = function () {
      let m2 = new Modal('提示消息', '您的订单已提交')
      console.log(m2)
      m2.open()
    }
    //图片模态框
    function ModalL(title, img) {
      this.title = title
      this.img = img
      this.modalBox = `<div class="modal">
      <div class="header">${title} <i>x</i></div>
      <div class="footer">
        <img src="${img}" alt="" width="100%">
      </div>
    </div>`
    }
    /* ModalL继承Modal的open方法 
   { 原型继承:把父对象 作为 子对象构造函数原型}}*/
    ModalL.prototype = new Modal()
    //////////      

    /*例如:    如果用Modal.pototype 那么给ModalL加函数方法时就会污染Modal
    ModalL想要添加自己的方法 
     ModalL.prototype.eat = function () {
      console.log('吃东西')
    }*/

    document.querySelector('#btn3').onclick = function () {
      let m2 = new ModalL('提示消息', ' ./111.jpg')
      console.log(m2)
      m2.open()
    }
    document.querySelector('#btn4').onclick = function () {
      let m2 = new ModalL('提示消息', ' ./222.jpg')
      console.log(m2)
      m2.open()
    }
  </script>
</body>

</html>

面向对象编程

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>面向对象封装消息提示</title>
  <style>
    .modal {
      width: 300px;
      min-height: 100px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      position: fixed;
      z-index: 999;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%, -50%, 0);
      background-color: #fff;
    }

    .modal .header {
      line-height: 40px;
      padding: 0 10px;
      position: relative;
      font-size: 20px;
    }

    .modal .header i {
      font-style: normal;
      color: #999;
      position: absolute;
      right: 15px;
      top: -2px;
      cursor: pointer;
    }

    .modal .body {
      text-align: center;
      padding: 10px;
    }

    .modal .footer {
      display: flex;
      justify-content: flex-end;
      padding: 10px;
    }

    .modal .footer a {
      padding: 3px 8px;
      background: #ccc;
      text-decoration: none;
      color: #fff;
      border-radius: 2px;
      margin-right: 10px;
      font-size: 14px;
    }

    .modal .footer a.submit {
      background-color: #369;
    }
  </style>
</head>

<body>
  <button id="btn1">消息提示1</button>
  <button id="btn2">消息提示2</button>
  <button id="btn3">消息提示3</button>
  <button id="btn4">消息提示4</button>

  <!-- <div class="modal">
      <div class="header">提示消息 <i>x</i></div>
      <div class="body">消息内容</div>
      <div class="footer">
        <a href="javascript:;" class="cancel">取消</a>
        <a href="javascript:;" class="submit">确认</a>
      </div>
    </div> -->


  <script>
    //1. 模态框构造函数
    function Modal(title, message) {
      this.title = title
      this.message = message
      this.modalBox = `<div class="modal">
        <div class="header">${this.title} <i>x</i></div>
        <div class="body">${this.message}</div>
        </div>`
    }

    //2. 模态框原型
    Modal.prototype.open = function () {
      //(1)创建空标签
      let div = document.createElement('div')
      //(2)设置标签内容
      div.innerHTML = this.modalBox
      //(3)添加到页面
      document.body.appendChild(div)
      //给删除按钮注册点击事件
      div.querySelector('.header i').onclick = function () {
        document.body.removeChild(div)
      }
    }

    //1.确认框构造函数
    function Confirm(title, message) {
      this.title = title
      this.message = message
      this.modalBox = ` <div class="modal">
        <div class="header">${this.title} <i>x</i></div>
        <div class="body">${this.message}</div>
        <div class="footer">
          <a href="javascript:;" class="cancel">取消</a>
          <a href="javascript:;" class="submit">确认</a>
        </div>
        </div>`
    }

    /* 为什么要继承： confirm确认框和 modal模态框 功能是一样的， 也要显示到页面，也要点击xx移除
    1.继承 :  一个对象 继承 另一个对象 所有的成员
    2.原型继承 :  把父对象 作为 子对象构造函数的原型
    */
    //Modal.prototype 不行因为在Modal加东西
    Confirm.prototype = new Modal()//父对象的原型对象

    //继续给Confirm的原型添加自己的方法
    Confirm.prototype.addEvent = function (confirm) {
      let modal = document.querySelector('.modal')
      modal.querySelector('.submit').onclick = function () {
        //调用函数
        confirm()
        //移除模态框parentNode 属性可返回某节点的父节点。
        // 如果指定的节点没有父节点则返回 null 。
        modal.parentNode.removeChild(modal)
      }
      modal.querySelector('.cancel').onclick = function () {
        //移除模态框
        modal.parentNode.removeChild(modal)
      }
    }

    //弹窗1
    document.querySelector('#btn1').onclick = function () {
      //创建模态框
      let m = new Modal('友情提示', '删除成功')
      m.open()
      console.log(m)
    }
    //弹窗2
    document.querySelector('#btn2').onclick = function () {
      //创建模态框
      let m = new Modal('提示消息', '您没有权限操作')
      m.open()
    }

    //弹窗3
    document.querySelector('#btn3').onclick = function () {
      //创建确认框
      let c = new Confirm('友情提示', '您确定要删除吗?')
      console.log(c)
      c.open()
      //添加确认功能
      c.addEvent(function () { alert('删除成功') })

    }
    //弹窗4
    document.querySelector('#btn4').onclick = function () {
      //创建确认框
      let c = new Confirm('友情提示', '您确定要下单吗?')
      c.open()
      //添加确认功能
      c.addEvent(function () {
        alert('下单成功')
      })
    }

  </script>
</body>

</html>
avatar
文章
阅读
粉丝