构造函数和原型

构造函数和原型

对象的三种创建方式

字面量

var obj = {}

new 关键字

var obj=new Object()

构造函数

function Person(){
    this.name="zs"
    this.age =12
}
var p = new Person()

构造函数存在问题

 <script>
      function Student(name, age, score) {
        this.name = name
        this.age = age
        this.score = score
        this.study = function () {
          console.log('好好学习')
        }
      }
      var s1 = new Student('zs', 12, 100)
      var s2 = new Student('ls', 34, 89)
      // 每创建一个对象，就会生成一个新的函数 存在浪费内存问题

      // 所有的对象使用同一个函数，这样就节省了内存，怎么做呢？
    </script>

构造函数原型 prototype

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

JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象，这个prototype属性就是一个对象，这个对象的所有属性和方法，都会被构造函数所拥有

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

每一个实例对象都可以访问它构造函数的原型对象中的成员

 /* 
      实例成员 就是构造函数内部 通过this添加的成员uname  age sing
    */

      function Star(uname, age) {
        this.uname = uname
        this.age = age
        // this.sing = function () {
        //   console.log('我会唱歌')
        // }
      }

      // console.log(Star.prototype)

      // 动态的方式给原型对象添加成员

      Star.prototype.sing = function () {
        console.log('我会唱歌')
      }

      // 实例化对象   new创建的对象就是一个实例对象
      var ldh = new Star('刘德华', 18) // 实例成员只能通过实例化的对象来访问
      console.log(ldh.uname)
      console.log(ldh.age)
      ldh.sing()
      var zxy = new Star('张学友', 28)
      zxy.sing()
      // 一般情况下 我们把公共的属性定义到构造函数里面 公共的方法放到原型对象上

对象原型

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

__proto__ 对象原型 和原型对象prototype 是等价的
__proto__ 对象原型的意义 在于为对象的查找机制提供了一个方向，或者说是一条路线，__proto__是一个非标准属性

在开发过程中，不可以使用这个属性__proto__,它只是内部指向原型对象prototype

constructor构造函数

对象原型(__proto__)和构造函数(prototype)原型对象里面都有一个属性，constructor属性我们称为构造函数
因为它指回构造函数本身

constructor 主要用于记录该对象引用于那个构造函数，它可以让原型对象重新指向原来的构造函数
一般情况下，对象的方法都在构造函数的原型对象中设置，如果有多个对象的方法，我们可以给原型对象采取对象形式赋值，但是这样会覆盖构造函数原型对象原来的内容，这样修改后的原型对象constructor 就不再指向当前构造函数了，
此时，我们可以再修改后的原型对象中，添加一个constructor指向原来的构造函数

原型链

每一个实例对象有一个 __proto__属性，指向构造函数的原型对象，
构造函数的原型对象，也是一个对象  这样一层一层往上找 就形成了原型链

构造函数实例和原型对象关系

构造函数的prototype指向了构造函数的原型对象
实例对象是由构造函数创建的，实例对象的__proto__属性指向了构造函数的原型对象
构造函数的原型对象的constructor属性指向构造函数，实例对象的原型的constructor也指向了构造函数

原型链和成员的查找机制

任何对象都有原型对象，也就是prototype属性，任何原型对象也是一个对象，该对象就有proto属性，这样一层一层向上找，就形成了一条原型链

访问一个对象的属性或者方法时，首先查找这个对象自身有没有这个属性
如果没有就查找它的原型(也就是__proto__指向的prototype的原型对象)
如果还没有就查找原型对象的原型(Object的原型对象)
以此类推 一直找到Object为止  null
__proto__对象原型的意义就在于 为对象成员查找机制提供一个方向，或者说是一条路线

原型对象中this的指向

构造函数中的this和原型对象的this ，都指向我们new出来的实例对象

 function Star(uname, age) {
        this.uname = uname
        this.age = age
      }

      var that
      Star.prototype.sing = function () {
        console.log('我会唱歌')
        that = this
      }

      var ldh = new Star('刘德华', 23)
      // 1 在构造函数中，里面的this指向的是对象实例 ldh

      ldh.sing()
      console.log(that === ldh) //true

      // 原型对象函数里面的this  指向的是实例对象 ldh

扩展内置对象

 var arr = new Array()
      arr = [3, 5, 6, 43, 22]

      // arr.sum(1)

      // console.log(arr)
      // 扩展内置方法
      Array.prototype.sum = function () {
        var sum = 0
        for (var i = 0; i < this.length; i++) {
          sum += this[i]
        }
        return sum
      }
      // console.log(arr)
      console.log(arr.sum())

this指向

this指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁

• 全局作用域或者普通函数中this指向全局对象window，
• 定时器里面的this也是指向window
• 方法调用中谁调用this this指向谁
• 构造函数中this指向构造函数实例

  var a = 10
      function fn() {
        console.log(123)
        console.log(this)
      }

      window.fn() //this指向window

      window.setTimeout(function () {
        console.log(this, 'settimeout') //window
      }, 1000)

      btn.onclick = fn // 函数的调用者  <button id="btn">按钮</button>

      function Fun() {
        this.name = 'zs'
        console.log(this) //this指向 Fun的实例对象
      }
      var f = new Fun()

      var o = {
        sayHi: function () {
          console.log(this, 'o') //o这个对象
        },
      }
      o.sayHi()

      // console.log(window)

call

call可以调用函数

call可以修改this的指向，使用call的时候，参数一是修改后的this指向，参数2，参数3… 使用逗号隔开链接

  // call方法
      function fn(x, y) {
        console.log('我想喝牛奶')
        console.log(this)
        console.log(x + y)
      }
      var o = {
        name: 'lucy',
      }

      // fn()  //window
      // call() 可以调用函数
      // fn.call()
      // call 可以改变这个函数的this指向，此时这个函数的this  就指向了o这个对象
      fn.call(o, 2, 4)

apply

apply方法调用一个函数，可以简单理解成调用函数的方式，可以改变函数内的this指向

场景：跟数组有关系

   /* 
   apply  应用的意思
    */
      var o = {
        name: 'lucy',
      }
      function fn(arr, arr1, arr2) {
        console.log(this)
        console.log(arr, arr1, arr2) //1,2,3
      }
      fn.apply(o, [1, 2, 3])

      /* 
      可以调用函数  还可以改变this指向
      它的参数必须是数组(伪数组)
      apply的主要应用，可以使用apply借助于数学内置对象求数组最大值
      Math.max()
      */
      var arr = [1, 33, 55, 34, 23, 12]
      var arr1 = ['red', 'pink']
      var max = Math.max.apply(Math, arr) //Math.max(1, 33, 55, 34, 23, 12)
      // var max = Math.max(34, 23, 45, 23)
      console.log(max)
      var min = Math.min.apply(Math, arr)
      console.log(min)

bind

bind方法不会调用函数，但是能改变函数内this指向，返回的是原函数改变this之后产生的新函数

如果只是想改变this指向，并且不想调用这个函数 可以使用bind

场景：不调用函数可以改变this指向

  <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
      /* 
  bind 绑定 捆绑意思
    */
      var o = {
        name: 'lucy',
      }
      function fn(a, b) {
        console.log(this)
        console.log(a + b)
      }

      var f = fn.bind(o, 34, 3)
      // console.log(f)
      f()

      /* 
          不会调用原来的函数，但是可以改变函数内部this指向
          返回的是原函数改变this之后产生的新函数
      
      */

      // 有一个按钮，我们点击了按钮，禁用了按钮，3秒后要开启按钮

      var btnArr = document.querySelectorAll('button')
      for (var i = 0; i < btnArr.length; i++) {
        btnArr[i].onclick = function () {
          this.disabled = true
          setTimeout(
            function () {
              this.disabled = false
            }.bind(this),
            3000
          )
        }
      }

trim方法去除字符串两边的空格

 // trim去除两端的空格
      var str = '   hello     '
      console.log(str.trim())
      var str1 = '    h   e ll  o  '
      console.log(str1.trim())

继承

子构造函数继承父构造函数中的属性

• 先定义子构造函数
• 再定义父构造函数
• 子构造函数继承父构造函数的属性(call方法)

 // 子构造函数继承父构造函数中的属性
      // 1 父构造函数
      function Father(uname, age) {
        // this指向父构造函数中的实例对象
        this.uname = uname
        this.age = age
      }

      // 2 子构造函数
      function Son(uname, age, score) {
        // this指向子构造函数实例对象
        Father.call(this, uname, age)
        this.score = score
      }

      var s = new Son('刘德华', 12, 100)
      console.log(s)

借用原型对象继承方法

 // 1 父构造函数
      function Father(uname, age) {
        // this指向父构造函数中的实例对象
        this.uname = uname
        this.age = age
      }

      Father.prototype.money = function () {
        console.log(10000)
      }

      // 2 子构造函数
      function Son(uname, age, score) {
        // this指向子构造函数实例对象
        Father.call(this, uname, age)
        this.score = score
      }

      // 直接赋值对象会有问题，constructor改变了
      Son.prototype = new Father()
      // 利用对象的形式 修改了原型对象，要把constructor指回原来的构造函数
      Son.prototype.contructor = Son

      Son.prototype.exam = function () {
        console.log('考试了')
      }

      var s = new Son('liu', 18, 100)
      console.log(s)

// this指向子构造函数实例对象
Father.call(this, uname, age)
this.score = score
}

  // 直接赋值对象会有问题，constructor改变了
  Son.prototype = new Father()
  // 利用对象的形式 修改了原型对象，要把constructor指回原来的构造函数
  Son.prototype.contructor = Son

  Son.prototype.exam = function () {
    console.log('考试了')
  }

  var s = new Son('liu', 18, 100)
  console.log(s)