(JavaScript笔记摘要)一次性搞定原型和原型链

一、前言

学完JavaScript ES5基础语法(核心语法)后,发现根本不够用,于是选择继续精进JavaScript功底

在这里插入图片描述

学到原型和原型链时,发现有点卡壳儿,于是投入了一定精力,进行了汇总整理和吸收,最后感觉效果不错,于是整理为笔记分享一番

二、导学

在JavaScript中,实现面向对象编程主要在于实现其三个基本特性:封装、继承和多态

封装是基于闭包实现的,而继承则基于原型链实现的,至于多态则有赖于继承

要搞清楚原型链,就需要先弄清楚原型

三、原型

__proto__ 是一个非标准的 访问对象 原型的属性。它是每个对象都具有的属性,用于指向它的原型对象

[[prototype]] 是对象的内部属性(也称为隐藏属性),指向其原型对象。不能直接访问 [[prototype]]

__proto__ 和 [[prototype]]是相互关联的,通过__proto__访问或设置对象的原型,实际上就是操作 [[prototype]]属性

下面通过代码来理解这块儿的知识点

let shs = new Object({})
console.dir(shs)
console.dir(shs.__proto__)

image-20230815231106126
🔥prototype 属性只存在于函数对象上,这是一个特殊属性,称之为原型,因为其值是一个对象,也称为原型对象

实例化对象.__proto__ === 构造函数.prototype

下面通过代码来理解这块儿的知识点

let shs = new Object({})
console.dir(shs)
console.dir(Object)
let str = new String("shs")
console.log(str.__proto__ === String.prototype)
console.log(shs.__proto__ === Object.prototype)

image-20230816153711732
【图解】
请添加图片描述
由此可以看出原型的作用:存放一些属性和方法 和 在JavaScript中实现了继承

💭思考:是不是所有的对象都有原型呢?

let shs = {name: "松花鼠"}
console.log(shs)
console.log(shs.hasOwnProperty("name"))
// 创建没有原型的对象
let zj = Object.create(null, {name: {value: "真经"}
})
console.log(zj)

在这里插入图片描述

四、原型链

当访问一个对象的属性或方法时,如果该对象本身没有这个属性或方法,JavaScript会沿着原型链向上查找,直到找到相应的属性或方法或者到达原型链的顶端为止

下面通过代码来理解原型链

let str = new String("sg")
console.dir(str)
console.dir(str.__proto__)
console.dir(String.prototype)
let obj = new Object({})
console.dir(Object.prototype)
console.dir(String.prototype.__proto__)
console.dir(String.prototype.__proto__.__proto__)

image-20230816173728134
【图解】
请添加图片描述
由此观之,原型链是通过对象之间的关联来实现的即通过__proto__属性实现的。通过这个属性指向它的原型对象,而原型对象也是对象,也有__proto__属性,指向原型对象的原型对象,这样一层层查找形成的链式结构称为原型链

💭思考:最顶层的原型是Object原型吗?

在JavaScript中,Object原型是所有对象的最顶层原型,为对象提供了一些通用属性和方法,并通过原型链机制实现了对象之间的继承

通过代码加深理解

let str = new String("sg")
console.dir(str)
let num = new Number(666)
console.dir(num)
let obj = new Object({})
console.dir(obj)

image-20230816175738356
【图解】
请添加图片描述

五、小结

以上是自己结合视频对原型和原型链有所理解后进行的梳理与汇总,希望可以帮到你^-^

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云服务器部署Drupal网站教程基于CentOS系统

阿里云百科分享如何在CentOS 7操作系统的ECS实例上搭建Drupal电子商务网站。Drupal是使用PHP语言编写的开源内容管理框架(CMF),它由内容管理系统(CMS)和PHP开发框架(Framework)共同构成。它用于…

gitee上传一个本地项目到一个空仓库

gitee上传一个本地项目到一个空仓库 引入 比如,你现在本地下载了一个半成品的框架,现在想要把这个本地项目放到gitee的仓库上,这时就需要我们来做到把这个本地项目上传到gitee上了。 具体步骤 1. 登录码云 地址:https://gite…

【vue】简洁优雅的火花线、趋势线

来由 在github发现个好看易用的vue趋势线组件,特此记录。 效果 趋势图生成后效果如上,线条为渐变色,可设置是否平滑。具体线条走势,根据数据动态生成。 使用 安装 npm i vuetrend -S 引入 import Vue from "vue"…

【Linux命令详解 | chmod命令】 chmod命令用于修改文件或目录的权限,保护文件安全性。

文章目录 简介一,参数列表二,使用介绍1. 修改用户权限2. 修改用户组权限3. 修改其他用户权限4. 同时修改多个权限5. 使用数字模式设置权限6. 递归修改目录权限 总结 简介 在Ubuntu系统中,chmod命令是一个强大的工具,用于修改文件…

Maven安装Nexus私服

私服 视频教程: Maven保姆级教程 1 下载安装Nexus 官网https://www.sonatype.com/thanks/repo-oss 官网在国外,比较难打开,可以网上搜一下网盘分享。 nexus3.x是免安装的,解压到没有中文的路径下,解压后又两个文件夹…

Memory Analyzer(MAT)分析内存

关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、人工智能等,希望大家多多支持。 目录 一、导读二、概览三、 使用3.1 hprof 文件准备3.1.1 Android sutdi…

【Docker】Docker network之bridge、host、none、container以及自定义网络的详细讲解

🚀欢迎来到本文🚀 🍉个人简介:陈童学哦,目前学习C/C、算法、Python、Java等方向,一个正在慢慢前行的普通人。 🏀系列专栏:陈童学的日记 💡其他专栏:CSTL&…

【ChatGLM】ChatGLM-6B模型Win+4GB显卡本地部署笔记

ChatGLM-6B是清华大学知识工程和数据挖掘小组发布的一个类似ChatGPT的开源对话机器人,由于该模型是经过约1T标识符的中英文训练,且大部分都是中文,因此十分适合国内使用。 预期环境 本机电脑备注: Win10专业版 32G内存256固态系统…

包管理工具 nvm npm nrm yarn cnpm npx pnpm详解

包管理工具 nvm npm yarn cnpm npx pnpm npm、cnpm、yarn、pnpm、npx、nvm的区别:https://blog.csdn.net/weixin_53791978/article/details/122533843 npm、cnpm、yarn、pnpm、npx、nvm的区别:https://blog.csdn.net/weixin_53791978/article/details/1…

在VMware平台安装centos8.4详细图文步骤

CentOS-8 的首个发行版本。CentOS Linux 发行版本是一个稳定、高预测性、高管理性、高重复性的平台,它源于 Red Hat 企业级 Linux(RHEL)的源代码。你可以检阅此发行版本的官方发布。 官方中文的发行说明:https://wiki.centos.org/action/show/zh/Manuals…

docker中的jenkins之流水线构建

docker中的jenkins之流水线构建项目 1、用node这种方式(因为我用pipeline方式一直不执行,不知道为什么) 2、创建项目 创建两个参数,一个是宿主端口号,一个是docker中的端口号 3、使用git项目中的Jenkinsfile 4、编写…

ISO 21202:2020 智能交通系统 - 部分自动变道系统 (PALS) - 功能/操作要求和测试规程

​ 介绍 一般来说,车辆配备的驾驶辅助系统和自动驾驶系统可减轻驾驶员的负担,有助于安全驾驶。就变道操作而言,有许多驾驶员并不擅长变道,为了辅助这类驾驶员,部分自动变道系统(PALS)可根据驾驶员的要求,在驾驶员的监督下,在禁止非机动车和行人通行、有明显车道标记的…