(day 15)JavaScript学习笔记(对象3)

news2024/9/20 1:07:11

概述

        这是我的学习笔记,记录了JavaScript的学习过程。在写博客的时候我会尽量详尽的记录每个知识点。如果你完全没接触过JavaScript,那么这一系列的学习笔记可能会对你有所帮助。

        今天继续学习对象,主要是Object.create()、原型链、修改原型指向等。

1.Object.create()

        Object.create()可以让一个对象继承自另一个对象,新的对象拥有它继承对象的所有属性,并且还能保留自己的特有属性,如下代码示例:        

// 创建构造函数
function Student(name, id) {
  this.name = name;
  this.id = id;
  this.eat = function () {
    console.log(this.name + "吃饭");
  };
}

//创建实例对象stu1
var stu1 = new Student("小慈", 20240001);
console.log(stu1);

//遍历对象stu1的属性
for (key in stu1) {
  console.log(key);
}

//创建一个对象,继承自stu1
var monitor = Object.create(stu1);
console.log(monitor); //Student {}

        如上代码,我们创建了一个monitor对象,继承自stu1。上面代码stu1的属性遍历结果是如下:

name
id
eat

        我们再遍历一下monitor的属性,如下代码:

//遍历对象monitor的属性
for (key in monitor) {
  console.log(key);
}

       monitor属性遍历的结果如下:

name
id
eat

         从上我们可以看出,monitor属性与stu1一致,它的属性完全继承自stu1.

        用Object.getOwnPropertyNames可以获取对象自己的属性,我们分别获取一下stu1和monitor的自己的属性,如下代码:

console.log(Object.getOwnPropertyNames(stu1)); //(3) ['name', 'id', 'eat']
console.log(Object.getOwnPropertyNames(monitor)); //[]

        我们可以看到stu1是有三个自己的属性,monitor没有自己的属性,因为它是继承自stu1的,所以没有自己的属性,我们试一下打印一下monitor的name属性值,如下:

console.log(monitor.name); //小慈

        它的属性值跟stu1一样,我们接下来给monitor修改属性,如下代码:

//修改属性
monitor.name = "小会";
monitor.id = 20240010;
console.log(monitor); //Student {name: '小会', id: 20240010}
//获取对象自己的属性
console.log(Object.getOwnPropertyNames(monitor)); //(2) ['name', 'id']

        我们看到修改了 monitor对象中name和id的属性值,它就有的自己的属性,我们再调用一下eat方法试试:

//调用eat方法
monitor.eat(); //小会吃饭  说明this指向了monitor

        可以看到eat方法运行结果是小会吃饭,不是小慈吃饭,说明this指向了monitor。

2. 原型链

        JavaScript中的每个对象都有一个内部链接指向它的原型对象。当试图访问一个对象的属性时,如果该对象自身没有这个属性,那么JavaScript会在对象的原型上查找这个属性,这就是原型链。如果原型对象自身也没有这个属性,那么会继续在原型对象的原型上查找,以此类推,直到找到属性或者到达原型链的末尾(通常是null)。

        在JavaScript中,几乎所有的对象都继承自Object.prototype。Object.prototype是所有对象的最终原型。这意味着,如果你尝试访问一个对象上不存在的属性或方法,JavaScript最终会在Object.prototype上查找。如果Object.prototype上也没有找到,那么会返回undefined。

        简单来说就是每个对象的原型都会有一个上层的原型,直到遇到null,这种链式继承下来的原型就构成了原型链,JavaScript中最顶层的对象是Object,它的原型是Object.prototype,但是它的原型的原型就是null,这样就达到了原型链的顶端。

        下面代码演示一下,下面代码是获取对象monitor(monitor是我们上一个小节中定义的对象)的原型,并赋值给变量protoOfMonitor:

//Object.getPrototypeOf获取对象的原型
var protoOfMonitor = Object.getPrototypeOf(monitor);
console.log(protoOfMonitor);

        上面代码运行结果如下,因为monitor继承自stu1,所以它的原型指向的是stu1。

        我们进一步获取protoOfMonitor的原型,并赋值给变量protoOfStu1,如下代码示意:

var protoOfStu1 = Object.getPrototypeOf(protoOfMonitor);
console.log(protoOfStu1);

        运行结果如下图所示,因为stu1是用构造函数创建的,所以它的原型指向的是构造函数:

        我们再进一步获取 protoOfStu1的原型,并赋值给变量protoOfStudent,如下代码所示:

var protoOfStudent = Object.getPrototypeOf(protoOfStu1);
console.log(protoOfStudent);

        运行结果如下,因为构造函数的原型是Object对象,所以它的原型指向的是Object:

 

        到这一层已经到了Object对象了,我们再进一步获取protoOfStudent的原型,如下代码:

var protoOfObj = Object.getPrototypeOf(protoOfStudent);
console.log(protoOfObj); 

        运行结果为:null

        至此,我们已经达到了原型链的最顶端了。这就是对象的原型链。

3.修改原型指向

        修改原型的指向,可以改变对象的继承关系,从而获取不同的属性和方法。这通常是通过改变构造函数的prototype属性来实现的。如下代码示例:        

function Person() {}

//给Person添加原型方法
Person.prototype.sayHello = function () {
  console.log("你好,我是" + this.name);
};
//给Person添加原型属性
Person.prototype.species = "人类";

//定义一个构造函数Students
function Students(name, id) {
  this.name = name;
  this.id = id;
  this.sayGood = function () {
    console.log("我很好!");
  };
}

//创建实例对象stu2
var stu2 = new Students("小雪", 20240030);
console.log(stu2.name, stu2.id); //可以访问name和id属性,输出:小雪 20240030
stu2.sayGood(); //调用sayGood方法,输出:我很好!
console.log(stu2.species); //没有species,返回:undefined
//stu2.sayHello();
//调用sayHello方法,运行报错:Uncaught TypeError: stu2.sayHello is not a function

//查看stu2的原型
console.log(Object.getPrototypeOf(stu2));

        上面的例子中,我们先创建了一个Person构造函数,并给他增加了原型方法sayHello和原型属性species,我们再创建一个Students构造函数并创建实例对象stu2,我们访问stu2的name和id的属性都能访问,stu2也可以调用sayGood方法,说明stu2继承了构造函数的属性和方法,我们访问stu2的species属性时,会返回undefined,调用stu2的sayHello方法时会报错,因为species属性sayHello方法是Person构造函数的原型属性和方法,stu2与Person构造函数没有继承关系。我们再查看stu2的原型,返回的是如下的结果,可以看出来,stu2的原型指向的是Students构造函数。

        接下来我们来修改原型指向,让stu2也具有species属性sayHello方法,并且我们再访问之前的那些属性和方法,如下代码:

//修改stu2的原型指向
Object.setPrototypeOf(stu2, Person.prototype);

console.log(stu2.name, stu2.id); //依然可以访问name和id属性,输出:小雪 20240030
stu2.sayGood(); //调用sayGood方法,输出:我很好!

stu2.sayHello(); //调用sayHello方法,输出:你好,我是小雪
console.log(stu2.species); //输出:人类

        我们可以看到,修改原型指向后,stu2具有了species属性sayHello方法,并且还保留了原来的属性和方法,我们再看一下现在的stu2的原型,如下代码:

//查看stu2的原型
console.log(Object.getPrototypeOf(stu2));

        运行结果如下:

        可以看到,stu2的原型指向已经发生改变。最后我们再用绝对等于判断一下stu2的原型与Person的原型是否相等。如下代码:        

//判断stu2的原型与Person的原型是否相等
console.log(Object.getPrototypeOf(stu2) === Person.prototype); //true

         可以看到返回了true,说明他们是完全相等的。

        以上便是今天的学习内容,如果对你有所帮助,请点个赞再走吧。

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

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

相关文章

Autosar的前世今生:E2E通信校验

在浏览项目整体框架的时候,发现E2E是一个不可绕开的点,而且处处可见Autosar框架的踪迹,因此开一个专栏,每天学习一点相关知识点 E2E(end to end)是Autosar规范里规定的一种用于保证数据传输正确的概念&…

超越 GPT-4V 和 Gemini Pro!HyperGAI 发布最新多模态大模型 HPT,已开源

随着AI从有限数据迈向真实世界,极速增长的数据规模不仅赋予了模型令人惊喜的能力,也给多模态模型提供了更多的可能性。OpenAI在发布GPT-4V时就已经明确表示: 将额外模态(如图像输入)融入大语言模型(LLMs&am…

CTK插件框架学习-源码下载编译(01)

1、编译环境 window11、vs17、Qt5.14.0、cmake3.27.4 2、下载链接 cmake:Index of /files/v3.20 qt:Index of / vs22以前的版本需要登录下载:Visual Studio 较旧的下载 - 2019、2017、2015 和以前的版本 vs22下载:下载 Visu…

力扣热门算法题 62. 不同路径,66. 加一,67. 二进制求和

62. 不同路径,66. 加一,67. 二进制求和,每题做详细思路梳理,配套Python&Java双语代码, 2024.03.21 可通过leetcode所有测试用例。 目录 62. 不同路径 解题思路 完整代码 Python Java 66. 加一 解题思路 …

专业矢量绘图设计软件:Sketch for mac 中文激活版

Sketch for Mac 是一款专业的矢量图形设计工具,主要用于 UI/UX 设计、网页设计、图标设计等领域。它的界面简洁、易用,功能强大,可以帮助设计师快速创建高质量的设计作品。 人性化界面 Sketch的界面非常简洁。最顶端的工具箱包含了最重要的操…

【MySQL】3.1MySQL索引的介绍

目录 一、索引的概念 数据库索引 索引的作用 索引的副作用 索引创建的原则(应用场景) 适合建立索引 二、索引的分类和创建 1.普通索引 创建普通索引 1.1直接创建 1.2修改表结构的方式创建普通索引 1.3创建表时创建普通索引 2.唯一索引 2.1…

ISO 8601:日期和时间的国际标准

ISO 8601 介绍 ISO 8601,介绍一下 ISO 8601 是由国际标准化组织(International Organization for Standardization,ISO)发布的国际标准,其全称为《数据存储和交换形式信息交换日期和时间的表示方法》。 这一标准提供了…

C语言 自定义类型:联合和枚举

目录 前言 一、联合体 1.1 联合体的特点 1.2 联合体与结构体的区别 1.3 联合体的大小计算 1.4 联合体例子 1.5 联合体判断大小端 二、枚举 2.1 枚举类型定义 2.2 枚举类型的优点 2.3 枚举类型的使用 总结 前言 之前我们讲了C语言其中一个自定义类型结构体&#xff…

jsp2024.3.21(4) html基础

一、实验目的 1、html 文件的基本结构&#xff1b; 2、html 的常用标记&#xff1b; <HTML> <HEAD> …… </HEAD> <BODY> …… </BODY> </HTML> 二、实验项目内容&#xff08;实验题目&#xff09; HTML常用标记 1&#xff0e;<…

说说你对webpack的理解?解决了什么问题?

文章目录 一、背景二、问题三、是什么参考文献 一、背景 Webpack 最初的目标是实现前端项目的模块化&#xff0c;旨在更高效地管理和维护项目中的每一个资源 模块化 最早的时候&#xff0c;我们会通过文件划分的形式实现模块化&#xff0c;也就是将每个功能及其相关状态数据各…

idea2023 运行多 springboot 实例

概要 1、修改idea运行多实例&#xff08;本地测试负载&#xff09; 你可能用到其他 1、改造项目缓存token 至redis 支持负载均衡部署 SpringSecurity6.0RedisJWTMP基于token认证功能开发&#xff08;源码级剖析可用于实际生产项目&#xff09;_springsecurity redis管理token…

【Django开发】前后端分离美多商城项目第3篇:用户部分,1. 后端接口设计:【附代码文档】

美多商城项目4.0文档完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;美多商城&#xff0c;项目准备1.B2B--企业对企业,2.C2C--个人对个人,3.B2C--企业对个人,4.C2B--个人对企业。项目准备&#xff0c;配置1. 修改settings/dev.py 文件中的路径信息,2. INS…

关于订单到期关闭的实现方案

前言 在电商、支付等系统中&#xff0c;一般都是先创建订单(支付单)&#xff0c;再给用户一定的时间进行支付&#xff0c;如果没有按时支付的话&#xff0c;就需要把之前的订单(支付单)取消掉。这种类似的场景有很多&#xff0c;还有比如到期自动收货、超时自动退款、下单后自…

API 接口渗透测试

1 API 接口介绍 1.1 RPC&#xff08;远程过程调用&#xff09; 远程过程调用&#xff08;英语&#xff1a;Remote Procedure Call&#xff0c;缩写为 RPC&#xff09;是一个计算机通信协议。该协议允许运行于一台计算机的程序调用另一台计算机的子程序&#xff0c;而程序员无…

爬虫分析-基于Python的空气质量数据分析与实践

概要 本篇文章利用了Python爬虫技术对空气质量网站的数据进行获取&#xff0c;获取之后把数据生成CSV格式的文件&#xff0c;然后再存入数据库方便保存。再从之前24小时的AQI&#xff08;空气质量指数&#xff09;的平均值中进行分析,把数据取出来后&#xff0c;对数据进行数据…

glibc内存管理ptmalloc

1、前言 今天想谈谈ptmalloc如何为应用程序分配释放内存的&#xff0c;基于以下几点原因才聊它&#xff1a; C/C 70%的问题是内存问题。了解一点分配器原理对解决应用程序内存问题肯定有帮助。C也在用ptmalloc. 当你在C中new一个对象时&#xff0c;底层还是依赖glibc中的ptma…

基于SpringBoot精品在线试题库系统

采用技术 基于SpringBoot精品在线试题库系统的设计与实现~ 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBootMyBatis 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 页面展示效果 系统功能结构图 学生管理 教师管理 专业管理 试卷管理 …

【阿里魔搭】modelscope包下载安装

最终解决方案&#xff1a;使用源码安装modelscope 这里写目录标题 问题描述&#xff1a;pip安装包冲突安装步骤 问题描述&#xff1a;pip安装包冲突 一开始的是在3.11的虚拟环境下使用命令行pip install "modelscope[nlp]" -f https://modelscope.oss-cn-beijing.al…

基于时空上下文(STC)的运动目标跟踪算法,Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…

MyBatis:XML操作

&#x1f451;专栏内容&#xff1a;MyBatis⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、MyBatis XML方式1、配置数据库2、指明XML路径3、写持久层代码 二、基础操作1、新增2、删除3、更新4、查找Ⅰ、开启驼峰命…