原型和原型链的理解

本文深入探讨JavaScript中的原型和原型链概念。讲解了__proto__和prototype属性的关系,以及如何通过原型链进行属性查找。重点阐述了实例对象、构造函数和原型之间的构造关系,并通过代码示例展示了原型链的层次结构,包括从实例到Object.prototype最终到null的查找路径。此外,还提到了顶级对象与顶级构造函数的相互关系。
摘要由CSDN通过智能技术生成

一、原型

  • 所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象
  • 所有函数都有一个prototype(原型)属性,属性值是一个普通的对象
  • 所有引用类型的__proto__属性指向它构造函数的prototype

二、原型链

访问一个对象的某个属性时,

  1. 先在这个对象本身属性上查找
  2. 如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype
  3. 如果还没有找到就会再在构造函数的prototype 的 __proto__中查找

这样一层一层向上查找就会形成一个链式结构,我们称为原型链。

不懂没关系,直接看代码!!! (红色字往死里记

      class Person {}
      let ming = new Person()
      console.log(ming.__proto__ == Person.prototype) //true
      console.log(Person.__proto__ == Function.prototype) //true
      console.log(Function.__proto__ == Function.prototype) //true
      console.log(ming.constructor == Person) //true
      console.log(Person.constructor == Function) //true
      console.log(Function.constructor == Function) //true

对象的原型永远指向其构造函数的原型对象!!!

      console.log(ming.constructor == Person) //true
      console.log(ming.__proto__.constructor == Person) //true
      console.log(Person.prototype.constructor == Person) //true

实例对象本身没有constructor属性,是通过实例对象的原型查找的!所以实例对象实例对象的原型以及构造函数的原型对象constructor都指向构造函数!!!

      console.log(ming.__proto__ == Person.prototype) //true
      console.log(Person.prototype.__proto__ == Object.prototype) //true
      console.log(Object.prototype.__proto__ == null) //true
      console.log(ming.__proto__.constructor == Person) //true
      console.log(Person.prototype.__proto__.constructor == Object) //true

原型链的查找方式:ming => ming.__proto__ => ming.__proto__.__proto__(Person.prototype.__proto__) => ming.__proto__.__proto__.__proto__(Object.prototype.__proto__) = null

因为函数的原型对象是个对象,是顶级对象(Object)构建出来的,所以原型对象的原型指向顶级对象(Object)的原型对象

      console.log(Object.__proto__ == Function.prototype) //true
      console.log(Object.prototype.__proto__ == null) //true
      console.log(Function.prototype.__proto__.constructor == Object) //true
      console.log(Function.prototype.__proto__ == Object.prototype) //true

顶级对象与顶级构造函数的关系:顶级对象顶级构造函数构造,顶级构造函数的原型对象的原型指向顶级对象的原型对象(哈哈哈哈哈绕死完事!)

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值