JS高级知识点--原型及原型链

• 函数的prototype属性

  • 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即: 原型对象)

  • 原型对象中有一个属性constructor, 它指向函数对象

  • image-20211020102327076.png

• 给原型对象添加属性

  • 一般是方法 ==> 实例对象可以访问
  • 函数的所有实例对象自动拥有原型中的属性(方法)

  function Fun(){ //alt + shift + r(重命名rename)
      
  }
  console.log(Fun.prototype) // {}
  console.log(Fun.prototype.constructor===Fun) // true
  //给原型添加方法
  Fun.prototype.test = function () {
    console.log('test');
  }
  var fun = new Fun()
  // 通过实例调佣原型的方法
  fun.test() // test
  

• 显式原型

  • 每个函数function都有一个prototype, 即显示原型(属性), 它默认指向一个Object空对象(即: 原型对象)

• 隐式原型

  • 每个实例对象都有一个_proto_, 可称为隐式原型(属性)
  • 实例对象的隐式原型的值为其对应构造函数的显式原型的值
    • a是b的实例对象, 则a的隐式原型等于b的显式原型
    • a._proto_===b.prototype

  function Fn(){
      //内部语句 this.prototype = {} //this是函数对象
  }
  // 每个函数function都有一个prototype, 即显示原型(属性)
  console.log(Fn.prototype) //{}
  // 每个实例对象都有一个\__prototype__, 可称为隐式原型(属性) 
  var fn = new Fn() //内部语句 this.__proto__ = Fn.prototype // this是实例对象
  console.log(fn.__proto__) //{}
  // 对象的隐式原型的值为其对应构造函数的显示原型的值
  console.log(Fn.prototype===fn.__proto__) //true
  

原型链

• 用于查找实例对象的属性值及调用方法, 实质上是实例对象的隐式原型组成的链

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

  function Fn(){
    this.test1 = function(){
          console.log('test1')
      }
  }
  Fn.prototype.test2 = function(){
      console.log('test2')
  }
  var fn = new Fn()
  fn.test1()
  fn.test2()
  console.log(fn.toString())
  fn.test3()
  

image-20211020154926815.png

• 函数的显式原型指向的对象默认是空Object实例对象(但Object不满足)

  function Fn(){
      // 相当于 var Fn = new Function() 
  }
  var fn = new Fn()
  console.log(Fn.prototype instanceof Object) // true
  console.log(Object.prototype instanceof Object) // false
  console.log(Function.prototype instanceof Object) // true
  

• 所有函数都是Function的实例, 包括它本身

  // a是b的实例对象, 则a的隐式原型等于b的显式原型
  // a.__proto__===b.prototype
  function Fn(){
      // 相当于 var Fn = new Function() 
  }
  var fn = new Fn()
  console.log(Fn.__proto__ === Function.prototype) // true
  console.log(Function.__proto__ === Function.prototype) // true
  

• Object的原型对象是原型链尽头

  console.log(Object.prototype.__proto__) // null
  

• 原型继承

  • 构造函数的实例对象自动拥有构造函数原型对象的属性(方法)
  • 利用 的原型链

• 属性问题

  • 读取对象的属性值时: 会自动到原型链中查找

  • 设置对象的属性值时, 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值

  • 方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上

    function Fn(){
        
    }
    Fn.prototype.a = 'xxx'
    var fn1 = new Fn()
    console.log(fn1.a, fn1) // xxx
    var fn2 = new Fn()
    fn2.a = 'yyy'
    console.log(fn1.a, fn2.a, fn2) // xxx yyy
    

image-20211020171849217.png