JS原型和原型链的理解

原型链图,图中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 # 巴斯光年

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Godot4.2】颜色完全使用手册

概述 本篇简单汇总Godot中的颜色的构造和使用,内容包括了: RGB、RGBA,HSV以及HTML16进制颜色值、颜色常量等形式构造颜色颜色的运算以及取反、插值用类型化数组、紧缩数组或PNG图片形式存储多个颜色 构造颜色 因为颜色是一种视觉元素&…

Vue中使用Lodash

Vue中使用Lodash 前言安装Lodash引用方法vue中使用1、cloneDeep 深拷贝2、uniq 数组去重3、uniqWith 数组对象去重 isEqual 深度比对4、intersection 提取数组相同元素5、chunk 数组切分6、compact去除假值7、reject:根据条件删除指定的值8、find:查找结果的第一个值9、filter:…

VsCode 配置go开发环境之下载go tools

ctrl shift P 选择 go install/update tools,下载go tools 报错, 提升dial err。 将GOPROXY 和 GOSUMDB 按照如下配置,重启IDE即可成功下载 set GOPROXYhttps://goproxy.cn set GOSUMDBoff

(18)C#采集微信群群成员列表信息-微信UI自动化(.Net)

往期知识回顾 (1)C#开启探索微信自动化之路-微信UI自动化 (2)C#创建微信窗体自动化实例-微信UI自动化 (3)C#针对系统热键管理-微信UI自动化 (4)C#采集微信通讯录和联系人-微信UI自动化 (5)C#实现针对微信窗体鼠标静默点击-微信UI自动化 (6)C#搜索微信通讯录联系人-微信UI…

什么是API安全性以及为什么它很重要?

API指的是应用程序接口(Application Programming Interface),是一组定义和描述不同软件组件如何通信以及相互操作的规范。它允许不同的软件系统之间共享数据和功能,使它们能够相互连接和交互。 API可以是不同软件之间的通信桥梁&…

进入docker容器中安装软件失败解,国外源慢,时间不同步,执行命令权限不够等问题解决办法

进入docker容器中安装软件失败解,时间不同步, 国外源慢,执行命令权限不够 等问题解决办法 首先我进入docker容器中,为了安装一个软件,引出了很多报错问题,报错如下: 1、无法用 ifconfig 或者 ip addr 的方…

HAProxy高性能负载均衡器

一、HAProxy基础知识 (一)HAProxy概述 HAProxy是一款基于事件驱动、单进程模型设计的四层与七层负载均衡器,它能够在TCP/UDP层面以及HTTP(S)等应用层协议上实现高效的流量分发。HAProxy不仅适用于Web服务器负载均衡,还能应用于数据…

vulhub中DNS域传送漏洞复现

DNS协议支持使用axfr类型的记录进行区域传送,用来解决主从同步的问题。如果管理员在配置DNS服务器的时候没有限制允许获取记录的来源,将会导致DNS域传送漏洞。 环境搭建 Vulhub使用Bind9来搭建dns服务器,但不代表只有Bind9支持AXFR记录。运行…

网络通信.

1.物理层:网络通信的基础设施 运快递的公路 2.数据链路层 两个相邻的节点之间如何传输 两个集散点之间的传输 3.网络层 两个点之间的路径规划 物流公司规划快递的路径 4.传输层 两个点之间的通信(不考虑路径规划) 卖家发货 只考虑起点和终点 …

java----网络编程(一)

一.什么是网络编程 用户在浏览器中,打开在线视频网站,如优酷看视频,实质是通过网络,获取到网络上的一个视频资源。 与本地打开视频文件类似,只是视频文件这个资源的来源是网络。所谓网络资源就是网络中获取数据。而所…

SpringTask实现的任务调度与XXL-job实现的分布式任务调度【XXL-Job工作原理】

目录 任务调度 分布式任务调度 分布式任务调度存在的问题以及解决方案 使用SpringTask实现单体服务的任务调度 XXL-job分布式任务调度系统工作原理 XXL-job系统组成 XXL-job工作原理 使用XXL-job实现分布式任务调度 配置调度中心XXL-job 登录调度中心创建执行器和任务 …

安装OpenEBS,镜像总是报错ImagePullBackOff或者ErrImagePull的解决方法

按照 KubeSphere 官方文档安装 OpenEBS,镜像总是报错ImagePullBackOff或者ErrImagePull的解决方法 helm 有很多更换 源 的文章,有一些是写更换阿里云的源,但是阿里云的源根本没更新OpenEBS的镜像。 在网上找到1个可用的源: 可用的…

nodejs pkg打包跨平台执行文件,带.node插件

在nodejs引入的第三方库中,大部分插件都是nodejs原生开发,使用pkg可以快速打包,生成windows、linux(ubuntu、centOS等)、麒麟系统下面执行文件。遇到了第三方插件gdal、sharp、sqlite3,在webstorm中打包生成执行文件,跨平台部署的时候会出现找不到###.node文件,需要获取部…

BUUCTF-----[CISCN 2019 初赛]Love Math

<?php error_reporting(0); //听说你很喜欢数学&#xff0c;不知道你是否爱它胜过爱flag if(!isset($_GET[c])){show_source(__FILE__); }else{//例子 c20-1$content $_GET[c];if (strlen($content) > 80) {die("太长了不会算");}$blacklist [ , \t, \r, \n…

Employing Multi-Estimations for Weakly-Supervised Semantic Segmentation

eighted selective training (WST) 辅助信息 作者未提供代码

《手把手教你》系列技巧篇(三十七)-java+ selenium自动化测试-日历时间控件-上篇(详解教程)

1.简介 我们在实际工作中&#xff0c;有可能遇到有些web产品&#xff0c;网页上有一些时间选择&#xff0c;然后支持按照不同时间段范围去筛选数据。网页上日历控件一般&#xff0c;是一个文本输入框&#xff0c;鼠标点击&#xff0c;就会弹出日历界面&#xff0c;可以选择具体…

x6.js 从流程图组件库中拖拽组件到画布dnd使用

上一篇已经了解到了x6.js常用功能以及使用方法。但我们使用流程图的时候还少不了一个非常重要的功能那就是拖拽组件库里的组件进来。如下图&#xff1a; 首先是布局这块&#xff0c;拖拽组件库的视图中布局无需我们去写&#xff0c;我们只需把界面搭建好。 添加组件库 1.搭建布…

LeetCode 0310.最小高度树:拓扑排序秒了

【LetMeFly】310.最小高度树&#xff1a;拓扑排序秒了 力扣题目链接&#xff1a;https://leetcode.cn/problems/minimum-height-trees/ 树是一个无向图&#xff0c;其中任何两个顶点只通过一条路径连接。 换句话说&#xff0c;一个任何没有简单环路的连通图都是一棵树。 给你…

JavaScript 进阶(一)

一、作用域 作用域&#xff08;scope&#xff09;规定了变量能够被访问的“范围”&#xff0c;离开了这个“范围”变量便不能被访问。 作用域分为&#xff1a; 局部作用域 、全局作用域。 1.1局部作用域 局部作用域分为函数作用域和块作用域。 1. 函数作用域&#xff1a; 在函数…

力扣刷题Days20-151. 反转字符串中的单词(js)

目录 1,题目 2&#xff0c;代码 1&#xff0c;利用js函数 2&#xff0c;双指针 3&#xff0c;双指针加队列 3&#xff0c;学习与总结 1&#xff0c;正则表达式 / \s /&#xff1a; 2&#xff0c;结合使用 split 和正则表达式&#xff1a; 1,题目 给你一个字符串 s &am…