JS原型和原型链的理解

news2024/11/16 19:50:12

原型链图,图中Parent是构造函数,p1是通过Parent实例化出来的一个对象

在这里插入图片描述

前置知识

  1. js中对象和函数的关系,函数其实是对象的一种

  2. 函数、构造函数的区别,任何函数都可以作为构造函数,但是并不能将任意函数叫做构造函数,只有当一个函数通过new关键字调用的时候才可以成为构造函数

    var Parent = function(){
    
    }
    var p1 = new Parent();
    
  3. 三个属性__proto__、prototype、 constructor

    • proto、 constructor属性是对象所独有的
    • prototype属性是函数独有的
    • js中函数也是对象的一种,那么函数同样也有属性__proto__、 constructor

prototype属性

在这里插入图片描述

  • prototype 它是函数独有的属性,从图中可以看到它从一个函数指向另一个对象,代表这个对象是这个函数的原型对象,这个对象也是当前函数所创建的实例的原型对象。

  • prototype设计之初就是为了实现继承,让由特定函数创建的所有实例共享属性和方法,也可以说是让某一个构造函数实例化的所有对象可以找到公共的方法和属性。有了prototype我们不需要为每一个实例创建重复的属性方法,而是将属性方法创建在构造函数的原型对象上(prototype)。那些不需要共享的才创建在构造函数中。

  • 当我们想为通过Parent实例化的所有实例添加一个共享的属性时,
    Parent.prototype.name = "我是原型属性,所有实例都可以读取到我";

  • 这就是原型属性,当然你也可以添加原型方法。那问题来了,p1怎么知道他的原型对象上有这个方法呢,往下看

proto属性

在这里插入图片描述

  • __proto__属性是对象(包括函数)独有的。从图中可以看到__proto__属性是从一个对象指向另一个对象,即从一个对象指向该对象的原型对象(也可以理解为父对象)。显然它的含义就是告诉我们一个对象的原型对象是谁。

  • 上面说到,Parent.prototype上添加的属性和方法叫做原型属性和原型方法,该构造函数的实例都可以访问调用。那这个构造函数的原型对象上的属性和方法,怎么能和构造函数的实例联系在一起呢,就是通过__proto__属性。每个对象都有__proto__属性,该属性指向的就是该对象的原型对象
    p1.__proto__ === Parent.prototype; // true

  • __proto__通常称为隐式原型,prototype通常称为显式原型,那我们可以说一个对象的隐式原型指向了该对象的构造函数的显式原型。那么我们在显式原型上定义的属性方法,通过隐式原型传递给了构造函数的实例。这样一来实例就能很容易的访问到构造函数原型上的方法和属性了。
    我们之前也说过__proto__属性是对象(包括函数)独有的,那么Parent.prototype也是对象,那它有隐式原型么?又指向谁?
    Parent.prototype.__proto__ === Object.prototype; //true

  • 可以看到,构造函数的原型对象上的隐式原型对象指向了Object的原型对象。那么Parent的原型对象就继承了Object的原型对象。由此我们可以验证一个结论,万物继承自Object.prototype。这也就是为什么我们可以实例化一个对象,并且可以调用该对象上没有的属性和方法了。如:
    //我们并没有在Parent中定义任何方法属性,但是我们可以调用 p1.toString();//hasOwnProperty 等等的一些方法

  • 我们可以调用很多我们没有定义的方法,这些方法是哪来的呢?现在引出原型链的概念,当我们调用p1.toString()的时候,先在p1对象本身寻找,没有找到则通过p1.__proto__找到了原型对象Parent.prototype,也没有找到,又通过Parent.prototype.__proto__找到了上一层原型对象Object.prototype。在这一层找到了toString方法。返回该方法供p1使用

  • 当然如果找到Object.prototype上也没找到,就在Object.prototype.__proto__中寻找,但是Object.prototype.proto === null所以就返回undefined。这就是为什么当访问对象中一个不存在的属性时,返回undefined了

constructor属性

在这里插入图片描述

  • constructor是对象才有的属性,从图中看到它是从一个对象指向一个函数的。指向的函数就是该对象的构造函数。每个对象都有构造函数,好比我们上面的代码p1就是一个对象,那p1的构造函数是谁呢?我们打印一下。
    console.log(p1.constructor); // ƒ Parent(){}
  • 通过输出结果看到,很显然是Parent函数。我们有说过函数也是对象,那Parent函数是不是也有构造函数呢?显然是有的。再次打印下
    console.log(Parent.constructor); // ƒ Function() { [native code] }
  • 通过输出看到Parent函数的构造函数是Function(),这点也不奇怪,因为我们每次定义函数其实都是调用了new Function(),下面两种效果是一样的
    var fn1 = new Function('msg','alert(msg)');
    function fn1(msg){
        alert(msg);
    }
    
  • 那么我们再回来看下,再次打印Function.constructor
    console.log(Function.constructor); // ƒ Function() { [native code] }
  • 可以看到Function函数的构造函数就是本身了,那我们也就可以说Function是所有函数的根构造函数。
  • 到这里我们已经对constructor属性有了一个初步的认识,它的作用是从一个对象指向一个函数,这个函数就是该对象的构造函数。通过栗子我们可以看到,p1的constructor属性指向了Parent,那么Parent就是p1的构造函数。同样Parent的constructor属性指向了Function,那么Function就是Parent的构造函数,然后又验证了Function就是根构造函数

参考:https://segmentfault.com/a/1190000021232132 # 巴斯光年

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

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

相关文章

mybatis-plus 的saveBatch性能分析

Mybatis-Plus 的批量保存saveBatch 性能分析 目录 Mybatis-Plus 的批量保存saveBatch 性能分析背景批量保存的使用方案循环插入使用PreparedStatement 预编译优点:缺点: Mybatis-Plus 的saveBatchMybatis-Plus实现真正的批量插入自定义sql注入器定义通用…

从历年315曝光案例,看APP隐私合规安全

更多网络安全干货内容:点此获取 ——————— 随着移动互联网新兴技术的发展与普及,移动APP的应用渗透到人们的衣食住行方方面面,衍生出各类消费场景的同时,也带来了无数的个人隐私数据泄露、网络诈骗事件。 历年来&#xff…

29.网络游戏逆向分析与漏洞攻防-网络通信数据包分析工具-数据推测功能的算法实现

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 如果看不懂、不知道现在做的什么,那就跟着做完看效果 内容参考于:易道云信息技术研究院VIP课 上一个内容:28.数据推测结果…

修改/etc/resolve.conf重启NetworkManager之后自动还原

我ping 百度报错: [rootk8snode1 ~]# ping baidu.com ping: baidu.com: Name or service not known很明显,这是DNS解析问题。 于是我修改 /etc/resolv.conf 文件后,执行完sudo systemctl restart NetworkManager,/etc/resolv.con…

Linux-多线程2 ——线程等待、线程异常、线程退出、线程取消和线程分离

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 一、线程间的全局变量共享__thread 修饰全局变量 二、线程等待pthread_self和tid 三、线程异常四、线程退出五、线程取消六、线程分离 一、线程间的全局变量共享 上…

ttkbootstrap界面美化系列之主窗口(二)

一:创建主窗口 在利用ttkbootstrap构建应用程序时,可以用tkinter传统的tk方法来创建主界面,也可以用ttkbootstrap中的window类来创建,下面我们来看看两者的区别 1,传统方法创建主界面 import tkinter as tk import …

力扣思路题:最长特殊序列1

int findLUSlength(char * a, char * b){int alenstrlen(a),blenstrlen(b);if (strcmp(a,b)0)return -1;return alen>blen?alen:blen; }

[CVPR-24] Text-to-3D using Gaussian Splatting

3DGS对初始化敏感;引入基于Point-E的3D SDS可以缓解多脸问题;外观细化阶段可以有效抑制异常点,并提高可视化效果;不需要对SDS的改进,用gudiance scale100可以取得很不错的结果。 [pdf | proj | code] 方法 Geometry O…

Linux——动静态库的制作及使用与动态库原理

目录 一、静态库 1.静态库的制作 2.静态库的使用 加载静态库方法一:安装头文件与库文件 加载静态库方法二:指定文件目录 二、动态库 1.动态库的制作 2.动态库的使用 方法一:安装到系统中 方法二:软链接 方法三&…

c语言文件操作(中)

目录 1. 文件的顺序读写1.1 顺序读写函数1.2 顺序读写函数的原型和介绍 结语 1. 文件的顺序读写 1.1 顺序读写函数 函数名功能适用于fgetc字符输入函数所有输出流fputc字符输出函数所有输出流fgets文本行输入函数所有输出流fputs文本行输出函数所有输出流fscanf格式化输入函数…

刷题DAY24 | LeetCode 77-组合

1 回溯法理论基础 回溯法也可以叫做回溯搜索法,它是一种搜索的方式。回溯是递归的副产品,只要有递归就会有回溯。 所以以下讲解中,回溯函数也就是递归函数,指的都是一个函数。 1.1 回溯法的效率 回溯法的性能如何呢&#xff0…

完整指南:如何使用 Stable Diffusion API

Stable Diffusion 是一个先进的深度学习模型,用于创造和修改图像。这个模型能够基于文本描述来生成图像,让机器理解和实现用户的创意。使用这项技术的关键在于掌握其 API,通过编程来操控图像生成的过程。 在探索 Stable Diffusion API 的世界…

HarmonyOS NEXT应用开发之Web获取相机拍照图片案例

介绍 本示例介绍如何在HTML页面中拉起原生相机进行拍照,并获取返回的图片。 效果预览图 使用说明 点击HTML页面中的选择文件按钮,拉起原生相机进行拍照。完成拍照后,将图片在HTML的img标签中显示。 实现思路 添加Web组件,设置…

Vue.js+SpringBoot开发食品生产管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 加工厂管理模块2.2 客户管理模块2.3 食品管理模块2.4 生产销售订单管理模块2.5 系统管理模块2.6 其他管理模块 三、系统展示四、核心代码4.1 查询食品4.2 查询加工厂4.3 新增生产订单4.4 新增销售订单4.5 查询客户 五、…

生成式人工智能服务安全基本要求实务解析

本文尝试明晰《基本要求》的出台背景与实践定位,梳理《基本要求》所涉的各类安全要求,以便为相关企业遵循执行《基本要求》提供抓手。 引言 自2022年初以来,我国陆续发布算法推荐、深度合成与生成式人工智能服务相关的规范文件,…

阿里云服务器ECS经济型e实例性能如何?

阿里云服务器ECS推出经济型e系列,经济型e实例是阿里云面向个人开发者、学生、小微企业,在中小型网站建设、开发测试、轻量级应用等场景推出的全新入门级云服务器,CPU采用Intel Xeon Platinum架构处理器,支持1:1、1:2、1:4多种处理…

JS第一阶段1

文章目录 1. js组成2. JS三种书写位置JS输出语句 3. 变量4. 数据类型Number字符串型 String布尔型booleanUnddefined和Null 5. 获取变量的数据类型获取检测变量的数据类型 6. 数据转换类型转换为字符串转换为数字型(重点)转换为布尔型 7.运算符算数运算符…

找不到msvcp110.dll怎么办,msvcp110.dll丢失的5种修复方法

在计算机使用过程中,我们经常会遇到一些错误提示,其中之一就是“msvcp110.dll丢失”。由于msvcp110.dll是Microsoft Visual C Redistributable Package的重要组成部分,它的缺失会导致依赖于该组件的软件无法正常启动或运行,比如某…

从初学者到专家:Java反射的完整指南

一.反射的概念及定义 Java 的反射( reflection )机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意方法和属性,既然能拿到那么&#x…

Jenkins + Docker + ASP.NET Core自动化部署

本来没想着要写这篇博客,但是在实操过程中,一个是被网络问题搞炸了心态(真心感觉网络能把人搞疯,别人下个包、下个镜像几秒钟搞定,我看着我的几KB小水管真是有苦说不出),另一个就是这里面坑还是…