js面向对象，封装构造函数

面向对象and面向过程

面向对象，只关注对象

面向对象更适合软件，他不关注步骤，只关注结果

面向过程，只关注过程

面向过程更适合硬件，它有每一个步骤，而且它更关注每一步的过程

构造函数

构造函数就是用来封装对象的，构造函数重的this指向，指向的就是实例化对象

    function Star(uname,age) {
        this.uanme = uname
        this.uanme = uname
        this.sing = function () {
            console.log(`冰雨`)
        }
    }

    const ldh = new Star(`黄宁`,18)
    console.log(ldh)
    ldh.sing()
    const zxy = new Star(`张学友`,17)
    console.log(zxy)
    zxy.sing()
    console.log(ldh === zxy) //false
    console.log(ldh.sing === zxy.sing)  //false

原型对象

构造函数重都会有原型对象，所有构造函数都可以访问原型对象

每一个构造函数都有一个prototype属性，指向另外一个对象（原型对象）。

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

这个对象，可以挂载函数，对象实例化不会多次创建原型上的函数，可以节约内存，但是会引起（内存泄漏）

我们可以把那些不变的方法，直接定义到原型对象上边，这样所有的实例化对象都开业i共享这些方法

构造函数和原型对象中的this指向都是指向实例化函数，谁new了一个对象，this就指向谁

  // 测试构造函数和原型对象中的this指向
  let that = ''
  // 构造函数  公共属性
  function Star(uname,age) {
    //this赋值给that
    that = this
    this.uname = uname
    this.age = age
  }
  // console.log(that)//空值,我们还没有new一个对象,也就是还没有实例化对象
  console.log(Star.prototype) //构造函数的妈妈们,也就是原型对象
  // 公共方法放在原型上 prototype
  Star.prototype.sing = function () {
    console.log(`一个动作`)
  }
  //这里是实例化对象
  const ldh = new Star(`刘德华`,18)  //这里假设我们只创建了ldh的实例对象,并没有创建张学友的
  console.log(ldh)
  console.log(ldh)
  ldh.sing()  //返回一个动作
  console.log(ldh === that)  //返回为true,这里我们确定this指向,我们新创建的实例化对象
  console.log(ldh === that)  //我们使用对象原型,返回为true,对象原型的this指向也是我们新创建的实例化对象
  const zxy = new Star(`张学友`,18)
  console.log(zxy)
  zxy.sing() //返回一个动作
  // 重点
  console.log(zxy.sing() === ldh.sing())  //true

数组创建自己的方法

  // 自己定义,数组扩展方法 求和 和 最大值
  console.log(Array);//数组的构造函数,也是有原型的
  console.dir(Array)
  Array.prototype.pi = 3.14 //Array是构造函数 //prototype是原型对象,我们新建一个方法挂载在原型对象上
  console.log(Array.prototype)
  Array.prototype.sum = function () {
    // console.log(this)//指向新创建的实例
    return Math.max(...this)
  }
  let arr = [1,4,5,7,9,10]
  arr.sum()
  console.log(arr.sum())
  let arr1 = [1,5,7,9,1,0]
  console.log(arr1.sum())

  //求和
  Array.prototype.he = function () {
      // console.log(...this)
      let a = this.reduce(function (p,i) {
         return p + i
      },0)
      return a
  }
  let arr2 = [1,3,5,7,9,111]
  let b = arr2.he()//调用函数
  console.log(b)

  // 最小值
  Array.prototype.min = function () {
      let ms = this[0]
       for (let i = 0; i < this.length; i++) {
           if (this[i] < ms){
              ms = this[i]
          }
      }
      console.log(ms)
      return ms
  }
  let arr3 = [1,3,5,7,9,2,4,0,0]
  let v = arr3.min()
  console.log(v)
  console.log(arr3.min())

constructor属性

每个原型对象上边都有一个constructor属性，指向它的构造函数，这样我们在创建多个构造函数和实例化对象的时候，我们就可以确定哪些实例化对象是那个构造函数所创建的

  // constuctor 单词 构造函数
  function Fun(t,o) {
      this.t = t
      this.o = o
  }
  Fun.prototype.sing = function () {
      console.log(`唱歌`)
  }
  function Fun1(u,a) {
      this.u = u
      this.a = a
  }
  Fun1.prototype.sing = function () {
      console.log(`哼哼`)
  }
  let lw = new Fun(`两只手`,`一个头`)
  lw.sing()
  // 找儿子
  console.log(Fun.prototype)
  console.log(Fun.prototype.constructor === Fun) //返回true
  let pq = new Fun1(`佩奇`,`15`)
  pq.sing()
  console.log(Fun1.prototype.constructor === Fun1) //返回true

构造函数and原型对象and实例化对象三者的关系

我们要知道一个概念，所有的原型对象上都有__proto__，默认会指向原型对象

function Star() {
  }
  let a =new Star()
  // 原型对象
  console.log(Star.prototype)
  // _proto_ 指向对象原型
  console.log(a.__proto__ === Star.prototype)
  // 因为有对象原型，所以原型对象才回去找实例化对象

 原型继承

先new父级的实例化对象，给到子级，但是我们把实例化构造函数给到实例化对象的时候，实例化对象就没有原型了。所以我们重新把子级的constructor给到子级

   function Father(money,house) {
     this.money  = money
     this.house = house
   }
   Father.prototype.like = function () {
     console.log(`吹牛`)
   }
   let f = new Father(10000,1) // 实例化对象
   console.log(f)
   f.like()
   function Son(money,house) {
     this.money  = money
     this.house = house
   }
   // 原型继承
   // Son.prototype = Father.prototype //这样会层叠掉父级原型
   Son.prototype = new Father()
   console.log(Son.prototype)
   // 把构造函数重新指向自己
   Son.prototype.constructor = Son
   console.log(Son.prototype)
   console.log(new Son(1,0))
   new Son().like()
   // 判断原型
   // instanceof
   function F1() {
   }
   const ldh = new F1()
   console.log(Object.prototype)
   console.log(Object.prototype.__proto__)
   console.log(ldh instanceof F1) //true
   console.log(ldh instanceof Object) //true
   console.log(Array instanceof Object) //true
   console.log(ldh instanceof Array) //false
   console.log([1,3,5,7,9] instanceof Array) //true
   console.log([1,3,5,7,9] instanceof Object) //true
   // Object.prototype.toString.call(需要检测的函数)

案例

  <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="delete">删除</button>
<button id="login">登录</button>

<!-- <div class="modal">
  <div class="header">温馨提示 <i>x</i></div>
  <div class="body">您没有删除权限操作</div>
</div> -->


<script>
  // 1.  模态框的构造函数,创建页面中间的盒子
  function Modal(title,content) {
    this.title = title
    this.content = content
    this.modalBox = document.createElement(`div`) //创建一个新的div盒子
    this.modalBox.className = `modal`  //给盒子添加一个类名
    //盒子里面的内容
    this.modalBox.innerHTML = `
      <div class="header">${this.title} <i>x</i></div>
  <div class="body">${this.content}</div>
    `
    // 输入台测试是否可以打印出来modalBox这个属性
    console.log(this.modalBox)
  }
  // 2. 打开方法 挂载 到 模态框的构造函数原型身上
  Modal.prototype.open = function () {
    // 追加整个div结构modalBox
    if (!document.querySelector(`.modal`)) {
      document.querySelector(`body`).appendChild(this.modalBox)

      // 获取i删除标签
      document.querySelector(`.header i`).addEventListener(`click`,() => {
        // 到这里有问题的
        this.close() //this指向i标签，转换为箭头函数，箭头函数没有this指向，this会指向箭头函数所在作用域
      })
    }
  }
  // 3. 关闭方法 挂载 到 模态框的构造函数原型身上
  Modal.prototype.close = function () {
    // 删除元素
    document.querySelector(`body`).removeChild(this.modalBox)
  }
  // 4. 按钮点击
  // 获取元素
  const login = document.querySelector(`#login`)
  console.log(login)
  login.addEventListener(`click`,function () {
    const m = new Modal(`友情提示`,`您还没有创建账号`)
    m.open()
  })

  // 5. 按钮点击
  const Delete = document.querySelector(`#delete`)
  console.log(Delete)
  Delete.addEventListener(`click`,function () {
    const d = new Modal(`友情提示`,`您没有删除权限`)
    d.open()
  })
</script>