【学习笔记60】JavaScript原型链的理解

news2025/2/26 9:33:56

一、万物皆对象

  • 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__);

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/44955.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

天宇优配|酒企没借壳!标准股份股价上演A杀,两跌停

11月28日晚间,接连三日大跌的规范股份(600302.SZ)发布股价异动公告,再次否定了借壳和重组风闻。当日龙虎榜该股获净卖出774.89万元,闻名游资“赵老哥”常用席位中国银河绍兴现身卖一席位。另外,也有多家本地…

五笔会消亡吗

今天第一次看到“五笔会消亡”的说法。一看好像也没有什么消不消亡的说法,但是深入想一想好像的确是有一个现象90 后 00后使用五笔的应该会少很多,可能用的非常少。 从五笔与拼音在百度的搜索比例也可以看出,的确在2015~2016年间有了转折&am…

【Hack The Box】linux练习-- Paper

HTB 学习笔记 【Hack The Box】linux练习-- Paper 🔥系列专栏:Hack The Box 🎉欢迎关注🔎点赞👍收藏⭐️留言📝 📆首发时间:🌴2022年11月27日🌴 &#x1f36…

第一期 微信云开发小程序介绍-生活智打卡

目录 1.项目介绍 1.1 开发背景 1.2 项目简介 1.2.1 雏形 1.2.2 现状 1.2.3 展望 1.3 市场分析 1.3.1 目标用户 1.3.2 市场需求分析 1.4 系统需求 1.5 竞品分析 2.产品设计 2.1产品功能 2.1.1 智打卡 2.1.2 发现 2.1.2 我的 2.2交互设计 2.2.1 智打卡流程 2.2…

BP神经网络的梯度公式推导(三层结构)

本站原创文章,转载请说明来自《老饼讲解-BP神经网络》bp.bbbdata.com目录 一. 推导目标 1.1 梯度公式目标 1.2 本文梯度公式目标 二. 网络表达式梳理 2.1 梳理三层BP神经网络的网络表达式 三. 三层BP神经网络梯度推导过程 3.1 简化推导目标 3.2 输出层权重…

模拟电路(详细版)--放大电路的频率效应(RC电路)

一、高通电路 1.1传输特性 AuA_uAu​ RR1jωC\frac{R}{R \frac {1} { j \omega C}}RjωC1​R​   (补充知识:j是复数域中的一个旋转因子) 详细求解思路:   求解AuA_uAu​就是要求输入与输出的关系。 所以AuA_uAu​ U˙oU˙…

门店数字化转型| 美容院管理系统

随着互联网信息的高速发展,行业数字化进程加快,传统美容院面临几个难题。 1、竞争激烈、拓客困难。 美业巨头迅速扩张积压中小型门店生存空间。大多数中小美容院仍旧停留在发传单、口口相传的传统渠道,辐射范围非常有限。 2、投资周期长、资…

Linux网络配置管理

目录 一、实验目的 二、实验软硬件要求 三、实验预习 1、利用ifconfig 命令实现ip地址、MAC地址的配置,并测试网络连通性 1-1查看网卡 1-2临时改写eth0网卡地址 1-3测试连通性 2、通过修改interfaces配置文件,分别实现ip地址的动态配置和静态配置…

【信号处理】时序数据中的稀疏辅助信号去噪和模式识别(Matlab代码实现)

目录 一、概述 二、算例及仿真 📢算例一: 📢算例二: 📢算例三: 📢算例四: 📢算例五: 📢算例六: 三、Matlab代码实现 一、概述…

【笔试强训】Day 4

🌈欢迎来到笔试强训专栏 (꒪ꇴ꒪(꒪ꇴ꒪ )🐣,我是Scort目前状态:大三非科班啃C中🌍博客主页:张小姐的猫~江湖背景快上车🚘,握好方向盘跟我有一起打天下嘞!送给自己的一句鸡汤&#x…

初识数据结构

目录 1. 集合的框架 集合框架的重要性 数据结构的介绍 算法的介绍 容器背后对应的数据结构 2. 时间复杂度和空间复杂度 算法效率 时间复杂度 时间复杂度的概念 大O的渐进表示法 常见的时间复杂度的计算 空间复杂度 空间复杂度的概念 从本章开始又要开始新的篇章&a…

流媒体传输 - RTMP 协议报文分析

握手之后,连接开始对一个或多个 chunk stream 进行合并。创建的每个块都有一个唯一 id 对其进行关联,这个 id 叫做 chunk stream id。这些块通过网络进行传输。传递时,每个块必须被完全发送才可以发送下一块。在接收端,这些块被根…

【毕业设计】深度学习车辆颜色识别检测系统 - python opencv YOLOv5

文章目录1 前言2 实现效果3 CNN卷积神经网络4 Yolov55 数据集处理及模型训练6 最后1 前言 🔥 Hi,大家好,这里是丹成学长的毕设系列文章! 🔥 对毕设有任何疑问都可以问学长哦! 这两年开始,各个学校对毕设…

pytorch初学笔记(十三):神经网络基本结构之Sequential层的使用以及搭建完整的小型神经网络实战

目录 一、Container下Sequential层的介绍 1.1 作用 1.2 Example 二、实战神经网络搭建以及sequential的使用 2.1 前期准备 2.1.1 神经网络模型 2.1.2 求卷积过程中的padding参数 2.2 网络搭建 2.3 sequential的使用 2.4 检验网络正确性 三、完整代码 3.1 控制台输出 …

【Rust日报】2022-11-28 使用 Rust 编写解释型语言

使用 Rust 编写解释型语言这是一本关于使用 Rust 来编写解释型语言的指导书.从理论基础, 内存分配, 真实实践, GC 等方面循序渐进的指导如何使用 Rust 来编写解释型语言.原文链接: https://rust-hosted-langs.github.io/book/introduction.htmlRust的所有权和生命周期这是一篇从…

Java数据审计工具:Envers and JaVers比较

在Java世界中,有两种数据审计工具:Envers和JaVers。 Envers已经存在了很长时间,它被认为是主流。 JaVers提供全新的方法和技术独立性。 如果您考虑哪种工具更适合您的项目,本文是一个很好的起点。 本文分为三个部分。首先&#x…

[附源码]计算机毕业设计springboot电影院网上售票系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

SQL注入漏洞 | bool型

文章目录前言MySQL bool型前言 SQL注入漏洞 | iwebsecSQL注入漏洞 | 数字型参考文章文章所涉及的脚本代码,可以自己动手敲一次,增进理解,形成自己的SQl注入脚本,以后可以不断复用。 MySQL bool型 随便试试看回显 bool注入原理…

毕业设计 单片机LSRB算法的走迷宫小车 - 嵌入式 stm32

文章目录0 前言1 简介2 主要器件3 实现效果4 硬件设计马达驱动器(L298N)Mpu 605060 RPM 直流电机红外传感器Arduino Pro mini5 软件说明“LSRB”算法6 最后0 前言 🔥 这两年开始毕业设计和毕业答辩的要求和难度不断提升,传统的毕设题目缺少创新和亮点&a…

小米三季报:手机不振,汽车加码

配图来自Canva可画 ​如果将2022年第一季度的滑落视作气温转冷的话,那么小米的冬天已经持续了三个季度了。 小米不久前发布的2022年第三季度财报显示,小米在第三季度营收、毛利、调整后利润或多或少地都在下降,经营利润更是“扭盈为亏”&am…