821笔记（this,继承）

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

构造函数的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)

继承

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

• 先定义子构造函数
• 再定义父构造函数
• 子构造函数继承父构造函数的属性(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)

ES5新增的方法

forEach遍历数组

var arr = [1, 2, 3]
      var sum = 0
      // for (var i = 0; i < arr.length; i++) {
      //   sum += arr[i]
      // }
      arr.forEach(function (value, index, array) {
        console.log('每个数组元素' + value)
        console.log('每个数组元素索引号' + index)
        console.log('数组本身', array)
        sum += value
      })

filter过滤数组

var arr = [12, 34, 4, 88, 2, 3, 4, 56, 16]
      // 过滤数组中值大于20的值
      // var newArr = []
      // for (var i = 0; i < arr.length; i++) {
      //   if (arr[i] > 20) {
      //     newArr.push(arr[i])
      //   }
      // }
      // console.log(newArr)
      //  返回一个数组  数组中存放的是满足条件的元素
      var newArr = arr.filter(function (value, index) {
        return value > 20
      })
      console.log(newArr)

some

查找数组中是否有满足添加的元素

  var arr = [12, 34, 4, 88, 2, 3, 4, 56, 16]
      // var flag = false //假如 没有满足条件的元素
      // for (var i = 0; i < arr.length; i++) {
      //   if (arr[i] <= 20) {
      //     flag = true
      //     break
      //   }
      // }
      // console.log(flag) //值为false 没有小于20的元素  为true  有小于20的元素

      var flag = arr.some(function (value) {
        console.log(value)
        return value <= 20
      })
      console.log(flag)

      /* 
      
      filter 查找满足条件的元素 返回的是一个数组 是把所有满足条件的元素返回回来
      some 查找满足条件的元素是否存在 返回的是一个布尔值  如果查找到第一个满足条件的元素就终止循环
      */