关于原型和原型链的整理学习

news2024/11/15 21:47:54

        关于原型和原型链是很多人学习或面试时遇到的问题,可能部分不懂,部分懂但不会说,下面关于原型和原型链进行简单的整理总结,希望可以帮助到大家。

一、JS中的原型和原型链

1、原型说明

        所有的引用类型(数组、函数、对象)可以自由扩展属性(除null以外)。

        所有的引用类型都有一个’_ _ proto_ _'属性(也叫隐式原型,它是一个普通的对象)。

        所有的函数都有一个’prototype’属性(这也叫显式原型,它也是一个普通的对象)。

        所有引用类型,它的’_ _ proto_ _'属性指向它的构造函数的’prototype’属性。

        当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它的’_ _ proto_ _'属性(也就是它的构造函数的’prototype’属性)中去寻找。

2、什么是构造函数

        对于上面的信息,唯一有疑问的问题可能就是什么是构造函数?

        构造函数:在JavaScript中,用new关键字来调用的函数,称为构造函数,构造函数一般首字母大写。

        构造函数的作用:对重复代码进行处理,通过构造函数创建对象。提高代码复用率。

        构造函数的执行过程:

                1.当以 new 关键字调用时,会创建一个新的内存空间,标记为 Animal 的实例。

                2.函数体内部的 this 指向该内存,可以通过this.xxx=函数接收的参数,进行赋值

                3.执行函数体内的代码,给this添加属性等于给实例添加属性

                4.默认返回this,由于函数体内部的this指向新创建的内存空间,默认返回this相当于默认返回了该内存空间

        构造函数的返回值:如果返回基本类型,最终还是返回this。如果返回复杂数据类型,则最终返回该对象。

3、原型举例说明

//创建一个Blogger函数
function Blogger(name,age){
    this.name=name,
    this.age=age
}
//函数有一个prototype属性是一个普通对象
Blogger.prototype.speak=function(){
    console.log('大家好!');
}
//通过构造函数创建一个实例对象
const xc = new Blogger('勇敢小陈','25')
console.log(xc);//{ name: '勇敢小陈', age: '25' }
console.log(xc.name);//勇敢小陈
//引用类型的__proto__属性指向他的构造函数的prototype属性
console.log(xc.__proto__===Blogger.prototype);//true
//当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去他的__proto__属性上去找也就是构造函数的prototype属性中寻找
xc.speak()//大家好!
//找不到的时候报错undefined
console.log(xc.speak1());//xc.speak1 is not a function

        应该可以理解哈,如果有问题欢迎留言。

        关于为什么要使用原型呢?很简单,为了提交代码的复用率,如果我们要创建多个博主的信息,不能每次都去创建一个对象,然后定义其name、age、speak,所以通过构造函数和原型可以共用构造函数的方法,通过构造函数创建多个对象。

4、原型链

        原型链其实也不难理解,但首先要理解什么是原型,如果对上面还不太懂得话,可以先去看下上面。

示例代码:

//创建一个Blogger函数
function Blogger(name,age){
    this.name=name,
    this.age=age
}
//函数有一个prototype属性是一个普通对象
Blogger.prototype.speak=function(){
    console.log('大家好!');
}
//通过构造函数创建一个实例对象
const xc = new Blogger('勇敢小陈','25')
console.log(xc);//{ name: '勇敢小陈', age: '25' }
console.log(xc.name);//勇敢小陈
//引用类型的__proto__属性指向他的构造函数的prototype属性
console.log(xc.__proto__===Blogger.prototype);//true
//当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去他的__proto__属性上去找也就是构造函数的prototype属性中寻找
xc.speak()//大家好!
//找不到的时候报错undefined
// console.log(xc.speak1());//xc.speak1 is not a function
//当试图得到一个对象的属性时,如果这个对象本身不存在这个属性,那么就会去它构造函数的’prototype’属性中去寻找。那又因为’prototype’属性是一个对象,所以它也有一个’_ _ proto_ _'属性。
console.log(Blogger.prototype.__proto__===Object.prototype);//true
console.log(Object.prototype);//{}
console.log(Object.prototype.__proto__===null);//true

 这里写图片描述

这是找的网上的图,我自己画的图太丑了,哈哈哈。然后图中的Foo就是我们代码中的Blogger。

然后一起梳理一下一个图(图好像有问题,配合下面文字进行理解,以文字为准):

        首先我们通过new Blogger创建了xc,然后xc的__proto__指向Blogger.prototype,而Blogger.prototype又是一个对象,对象通过构造函数Object创建,也就是Blogger.prototype.__proto__执行Object.prototype,然后Object又是一个对象,他也有__proto__指向其构造函数的prototype,但Object是原始对象,没有构造函数,也就是null,也就是Object.__proto__===null。总而言之,当你获取对象是属性时,当他找不到时,会通过他的__proto__找他的构造函数有没有,他的构造函数也是对象,如果没有又会继续按照__proto__进行寻找知道找到Object,如果没有则报错XXX是undefined。

这样的链式调用成为原型链。

5、总结

        有问题欢迎留言,然后我们会进行补充,或者文章改错。

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

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

相关文章

【Tools】Git和VS Code配置

文章目录0 前期教程1 前言2 基本使用2.1 配置2.2 获取帮助3 GitHub仓库和git3.1 新建一个GitHub仓库3.2 删除一个仓库(repository)3.3 上传项目代码4 git常用指令4.1 创建分支4.2 合并分支4.3 在git提交记录上移动4.4 撤销变更4.5 整理提交记录5 在VS Co…

蓝桥杯 stm32 DAC

文章代码使用 HAL 库。 文章目录前言一、根据手册了解 DAC 重要特性 :二、CubeMX 创建工程:三、DAC 代码:1. 设置DAC输出值函数。2. 开启DAC输出函数。3. DAC 输出电压。总结前言 DAC 就是 数字模拟信号转换器 ,也就是把 数字信号转变成模拟…

实施MES系统前,先想清楚首先用来解决什么问题

MES系统首先用来解决什么问题? 很多人会自然而然地认为,MES系统是用来解决管理问题的,是为了明确管理流程的,是为了建立管控标准的…… 甲方会有很多很多想解决的问题,甚至在系统导入过程中,各个部门也会…

vue中安装与引用echarts示例

第002个点击查看专栏目录Echarts发展到现在,已经陆续经过了很多版本,越来越完善,现在主要研究5.0以上的功能。这里是介绍在vue项目中,如果全局或者局部引用echarts,对项目初装echarts会起到非常大的帮助。 NPM 安装 E…

电脑文件如何自动备份?

电脑文件如何自动备份?计算机的出现是人类科技发展的重要标志,电脑已经成为我们工作、生活以及学习中必不可少的工具,尤其是在工作中的应用,它改变了以前传统的工作方式。电脑的使用给我们带来极大方便的同时,也带来了…

mPEG-SS-NH2 ;mPEG-SS-Amine;甲氧基聚乙二醇-双硫键-氨基-科研用试剂简介

mPEG-SS-NH2 甲氧基聚乙二醇-双硫键-氨基 英文名称:mPEG-SS-NH2 英文别名:mPEG-SS-Amine 存储条件:-20C,避光,避湿 用 途:仅供科研实验使用,不用于诊治 外观: 固体或粘性液体,取…

3D渲染优化入【Three.js】

Three.js 应用程序以每秒 60 帧 (FPS) 的速度执行 3D 渲染是流畅和愉快体验的保证。 然而,这是一个有时难以实现的目标!本文整理了优化 Three.js 应用程序和达到 60 FPS 的最佳提示和技巧! 推荐:使用 NSDT场景编辑器 快速搭建 3D…

Day13【元宇宙的实践构想02】—— 元宇宙与沉浸式交互技术介绍、支撑开发与应用

💃🏼 本人简介:男 👶🏼 年龄:18 ✍今日内容:《元宇宙的实践构想》02——元宇宙与沉浸式交互技术 🚩 今日留言:亮亮被迫去练科目二啦,定时发布的文章&#xff…

鉴源论坛 · 观通丨联锁系统原理浅析

作者 |刘艳青 上海控安安全测评中心安全测评部测试经理 版块 | 鉴源论坛 观通 01 联锁系统的硬件结构 根据联锁系统的层级关系,联锁系统的硬件层级可以分为4层:人机会话层、联锁层、接口层、室外设备层。 图1 联锁系统的硬件结构 02 联锁系统的软件结…

误删照片音视频文件不要担心 几种方法解救慌乱的你

误删照片音视频文件不要担心 几种方法解救慌乱的你 推荐的几款软件涵盖了大量的恢复方式,手机如果刷机或者损坏找回的几率会越低 免费软件获取方式关注公众号回复8585 更多软件获取方式点我 方法1:从手机相册中恢复手机删除的照片 这里以vivo手机为例,其他手机也是差…

C/C++ Linux Socket网络编程

之前已经学习了QT的socket编程 和 C/C在window环境的socket编程,现在再来学习一波C/C在Linux环境下的socket编程,为以后学习C Linux 服务器开发做准备。 目录 一、Socket简介 二、Socket编程基础 1. 网络字节序 2. sockaddr数据结构 3. IP地址转换函数…

新C++(5):异常

"山,请你慢些走向我呀~"一、异常初始每当我们使用传统C写一些诸如malloc\realloc,或者不允许传入的参数为空(nullptr)时,我们时长会加一个断言(assert),一旦条件为false立即终止程序,不仅如此,当申请的空间够大&#xf…

二叉树:二叉树的最近公共祖先

二叉树的最近公共祖先 文章目录一、题目描述二、解题思路三、代码解析一、题目描述 给定一个二叉树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为:“对于有根树 T 的两个节点 p、q,最近公共祖先表示为一个节点 x&#xff0c…

Vue实现下载文件而非浏览器直接打开

问题背景 对于一个txt文本、图片、视频、音频等浏览器可以直接使用浏览器进行预览的文件, 使用传统的a标签加download属性进行下载是行不通的,会在浏览器直接打开,因此需要搞一个新的方式进行下载。 实现流程 实现思路 这里使用Vue自定义…

ElasticSearch从入门到出门【中】

文章目录DSL查询文档DSL查询分类全文检索查询使用场景基本语法示例精准查询term查询range查询地理坐标查询矩形范围查询附近查询复合查询相关性算分算分函数查询布尔查询搜索结果处理排序普通字段排序地理坐标排序分页基本的分页深度分页问题高亮高亮原理实现高亮RestClient查询…

档案数据智能采集工厂模型设计与实现

档案信息化从业人员肯定对异构系统数据采集过程中碰到的各种问题深有体会,有源系统供应商不配合的;数据接口不开放的;归档数据不符合规范的;数据敏感不提供的;等等;不一而足。但不幸的是档案信息系统处于政…

C 语言零基础入门教程(二十二)

C 错误处理 C 语言不提供对错误处理的直接支持,但是作为一种系统编程语言,它以返回值的形式允许您访问底层数据。在发生错误时,大多数的 C 或 UNIX 函数调用返回 1 或 NULL,同时会设置一个错误代码 errno,该错误代码是…

VS2017编译c dll的方法-编译bsio

VS2017编译c dll 有三种方法 (1).h和.c文件函数增加 __declspec(dllexport) (2)仅在.h函数添加__declspec(dllexport) (3)使用.def文件,不用在.h和.c文件的函数前增加__declspec(dllexport) …

【数据结构初阶】顺序表的实现(文末附原码)

⭐博客主页:️CS semi主页 ⭐欢迎关注:点赞收藏留言 ⭐系列专栏:数据结构初阶 ⭐代码仓库:Data Structure 家人们更新不易,你们的点赞和关注对我而言十分重要,友友们麻烦多多点赞+关注&#xff…

基于C讲解协程设计原理

协程设计原理 背景 以epoll处理fd为例: func () {while (1) {epoll_wait();for(;;) {recv();send();}} }在IO操作较为密集的情况下(网络IO和磁盘IO操作多,CPU计算少),由于检测到IO事件后,需要进行同步的…