【学习笔记60】JavaScript原型链的理解
创始人
2024-02-27 17:09:22
0

一、万物皆对象

  • JS中, 万物都可以都可以称为对象

1、对象概念

  • 含义1: 一种数据格式 {key: value, key2: value2}
  • 含义2: 某一类事务的实例(某一类内容中的真实个体)

2、说明

  • arr1就是Array这一类内容中的某一个真实个体
  • 数组也可以算作一个对象(Array 这一类事务中的一个个体)
        const arr = [1, 2, 3];const arr1 = [1, 2, 3, 4];const arr2 = [1, 2];
  • 函数也是一个对象(属于Function这一类事务中的一个个体)
        const fn = () => { console.log(1) }const fn2 = () => { console.log(2) }const fn3 = () => { console.log(3) }
    如果一个数据[]那么他就是Array,这个对象中的某一个个体如果一个数据{}那么他就是Object,这个对象中的某一个个体如果一个数据function(){},那么他就是 Function 这个对象中的某一个个体

二、原型链

  • 对象之间的继承关系通过构造函数prototype指向父类对象,直到指向Object对象为止形成的指向链条。
  • 通俗讲: 原型链是原型对象创建过程的历史记录
  • 注:在javascript中,所有的对象都拥有一个__proto__属性指向该对象的原型(prototype)

三、原型链查找对象的某一个属性

  1. 先在对象内部开始查找, 找到直接使用, 然后停止查找
  2. 如果没有找到, 会找对象的obj.__proto__, 如果找到直接使用, 然后停止查找
  3. 如果这里没找到, 会继续去对象的obj.__proto__查找, 找到直接使用, 然后停止查找
  4. 如果还是没找到, 会继续向上查找
  5. 直到找到顶层作用对象:Object.prototype, 找到就是用, 找不到undefined
        function Person (name) {this.name = name;}Person.prototype.sayHi = function () {console.log(100);}const p = new Person('QF001');console.log(p);

问题1: p的__proto__指向谁?

  1. p是Person的实例化对象
  2. __proto__指向自身构造函数的原型
  3. p.__proto === Person.prototype
        function Person(name) {this.name = name;}Person.prototype.sayHi = function () {console.log(100);}const p = new Person('QF001');console.log(p.__proto__);       // {sayHi: ƒ, constructor: ƒ}console.log(Person.prototype);  // {sayHi: ƒ, constructor: ƒ}console.log(p.__proto__ === Person.prototype);

在这里插入图片描述

问题2: Person 的__proto__指向谁?

  1. Person是构造函数, 本质上函数
  2. 只要是一个函数, 他就是Function的实例
  3. Person.__proto__指向了他的构造函数的原型, 构造函数是Function, 那么构造函数的原型Function.prototype
  4. Person.__proto__ === Function.prototype
        function Person (name) {this.name = name;}Person.prototype.sayHi = function () {console.log(100);}-const p = new Person('QF001');console.log(Person.__proto__ );       // ƒ () { [native code] }console.log( Function.prototype);     // ƒ () { [native code] }console.log(Person.__proto__ === Function.prototype);

在这里插入图片描述

问题3: Person.prototype 的 proto 指向谁?

  1. Person.prototype其实就是构造函数Person的原型对象, 本质上就是对象
  2. 只要是一个对象, 他就是Object的实例
  3. Person.prototype.__proto__指向了 他的构造函数的原型, 构造函数Object, 那么构造函数的原型Object.prototype
  4. `Person.prototype.proto === Object.prototyp=====000000000
        function Person (name) {this.name = name;}Person.prototype.sayHi = function () {console.log(100);}const p = new Person('QF001');// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}console.log(Person.prototype.__proto__);console.log(Object.prototype);console.log(Person.prototype.__proto__ === Object.prototype);

在这里插入图片描述

问题4: Function的__proto__指向谁?

  1. Function是构造函数, 本质上就是一个函数
  2. 只要是一个函数, 他就是Function的实例
  3. Function.__proto__指向了他的构造函数的原型, 构造函数Function, 那么构造函数的原型 Function.prototype
  4. Function.__proto__ === Function.prototype
        function Person (name) {this.name = name;}Person.prototype.sayHi = function () {console.log(100);}const p = new Person('QF001');console.log(Function.__proto__);  // ƒ () { [native code] }console.log(Function.prototype);  // ƒ () { [native code] }console.log(Function.__proto__ === Function.prototype);

在这里插入图片描述

问题5: Function.prototype 的 proto 指向了谁?

  1. Function.prototype其实就是 构造函数 Function 的原型对象, 本质上是对象
  2. 只要是一个对象, 他就是Object的实例
  3. Function.prototype.__proto__指向了他的构造函数的原型, 构造函数Object, 那么构造函数的原型Object.prototype
  4. Function.prototype.__proto__ === Object.prototype
        function Person (name) {this.name = name;}Person.prototype.sayHi = function () {console.log(100);}const p = new Person('QF001');// {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}console.log(Function.prototype.__proto__);  console.log(Object.prototype);  console.log(Function.prototype.__proto__ === Object.prototype);

在这里插入图片描述

问题6: Object的__proto__指向了谁?

  1. Object是一个构造函数, 本质上还是一个函数
  2. 只要是一个函数, 那么他的构造函数就是 Function
  3. Object.__proto__指向了他的构造函数的原型, 他的构造函数是 Function, 那么构造函数的原型 Function.prototype
  4. Object.__proto__ === Function.prototype
        function Person (name) {this.name = name;}Person.prototype.sayHi = function () {console.log(100);}const p = new Person('QF001');console.log(Object.__proto__);  console.log(Function.prototype);  console.log(Object.__proto__ === Function.prototype);

在这里插入图片描述

问题7: Object.prototype 的 __proto__指向了谁?

  1. Object.prototype是构造函数 Object 的原型对象, 本质上就是一个对象
  2. 但是重点: Object.prototype是JS顶层的对象
  3. Object.prototype.__proto__ === null
        function Person (name) {this.name = name;}Person.prototype.sayHi = function () {console.log(100);}const p = new Person('QF001');console.log(Object.prototype.__proto__);

在这里插入图片描述

相关内容

热门资讯

喜欢穿一身黑的男生性格(喜欢穿... 今天百科达人给各位分享喜欢穿一身黑的男生性格的知识,其中也会对喜欢穿一身黑衣服的男人人好相处吗进行解...
发春是什么意思(思春和发春是什... 本篇文章极速百科给大家谈谈发春是什么意思,以及思春和发春是什么意思对应的知识点,希望对各位有所帮助,...
网络用语zl是什么意思(zl是... 今天给各位分享网络用语zl是什么意思的知识,其中也会对zl是啥意思是什么网络用语进行解释,如果能碰巧...
为什么酷狗音乐自己唱的歌不能下... 本篇文章极速百科小编给大家谈谈为什么酷狗音乐自己唱的歌不能下载到本地?,以及为什么酷狗下载的歌曲不是...
家里可以做假山养金鱼吗(假山能... 今天百科达人给各位分享家里可以做假山养金鱼吗的知识,其中也会对假山能放鱼缸里吗进行解释,如果能碰巧解...
华为下载未安装的文件去哪找(华... 今天百科达人给各位分享华为下载未安装的文件去哪找的知识,其中也会对华为下载未安装的文件去哪找到进行解...
四分五裂是什么生肖什么动物(四... 本篇文章极速百科小编给大家谈谈四分五裂是什么生肖什么动物,以及四分五裂打一生肖是什么对应的知识点,希...
怎么往应用助手里添加应用(应用... 今天百科达人给各位分享怎么往应用助手里添加应用的知识,其中也会对应用助手怎么添加微信进行解释,如果能...
苏州离哪个飞机场近(苏州离哪个... 本篇文章极速百科小编给大家谈谈苏州离哪个飞机场近,以及苏州离哪个飞机场近点对应的知识点,希望对各位有...
客厅放八骏马摆件可以吗(家里摆... 今天给各位分享客厅放八骏马摆件可以吗的知识,其中也会对家里摆八骏马摆件好吗进行解释,如果能碰巧解决你...