原型-原型链-ES5方法

130 阅读3分钟

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

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

原型链和成员的查找机制

任何对象都有原型对象,也就是protype属性,任何原型对象也是一个对象,该对象就有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)

继承

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

 // 子构造函数继承父构造函数中的属性
      // 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)

ES5新增的方法

for each

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 查找满足条件的元素是否存在 返回的是一个布尔值  如果查找到第一个满足条件的元素就终止循环
      */