js原型链与继承笔记

前置阅读:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain


  1. js中的“类”是一个函数。
  2. function test() {}中,test是由Function生成的。
  3. prototype与__proto__的区别:
    前者是js函数(C++中的类)的原型。
    后者是对象的原型链(比如function Base{}, const a = new Base, 那这个a对象的__proto__就是Base.prototype,且Base.prototype规定为Object.prototype)。
  4. 对于function test() {}来说,test既有prototype(即test.prototype),又有__proto__(即test.__proto__)。
    如何理解test.__proto__呢?js中的每个类似test的函数,其实是Function函数(C++中的类)的一个实例。所以基于原型链,实例的__proto__就是Function.prototype(C++中的类)。即test.__proto__===Function.prototype。控制台输出:
    在这里插入图片描述
    如何理解test.prototype呢?test也是一个函数(C++中的类。可以想一下,js中的class最终都是会编译为function,比如下图)
    在这里插入图片描述
    那函数(C++中的类)就有自己的prototype(类比Object.prototype,且Object.prototype.[[prototype]]=null)。控制台输出:
    在这里插入图片描述
    可以看到test.prototype就是test函数自己的原型。test.prototype.[[prototype]]就是Object.prototype(之后就是null)。
    注意,test.prototype!=Function.prototype,为什么?这里test和Function都是同级的概念,都是函数,所以有自己独立的prototype,两者并不相等。
    注意,这里的constructor指向了test函数自己,即 test.prototype.constructor == test 。所以test.prototype.constructor.prototype就等于test.prototype,也就是上面贴的图,即重复了。
为什么要指向自己?
1.原型链的维护:当你创建一个函数时,JavaScript会自动为该函数创建一个prototype对象,并将constructor属性指向该函数本身。这样,通过原型链,我们可以轻松地访问和操作函数的构造函数。
举个例子,假设我们有一个构造函数Person:function Person(name) {this.name = name;
}var john = new Person("John");
在这个例子中,Person函数的constructor属性指向Person本身。我们可以通过john.constructor来获取john对象的构造函数,即Person。console.log(john.constructor); // 输出: ƒ Person(name) { this.name = name; }
通过constructor属性,我们可以方便地判断一个对象的类型,比如:console.log(john.constructor === Person); // 输出: true(构造函数中的super()应该也需要用到原型链中的constructor。在子类的构造函数中使用super()调用父类的构造函数时,super关键字会将子类的实例绑定到父类的构造函数中。这样,父类的构造函数可以在子类的实例上设置属性和执行其他操作。)2.动态创建对象:constructor属性可以用于动态创建对象实例。通过构造函数的prototype属性和constructor属性,我们可以在运行时使用new关键字来创建新的对象实例。举个例子,假设我们有一个构造函数Person:function Person(name) {this.name = name;
}Person.prototype.sayHello = function() {console.log("Hello, my name is " + this.name);
};var john = new Person("John");
var jane = new john.constructor("Jane");john.sayHello(); // 输出: "Hello, my name is John"
jane.sayHello(); // 输出: "Hello, my name is Jane"
在这个例子中,我们通过john.constructor获取了john对象的构造函数Person,然后使用new关键字和Person构造函数创建了一个新的对象实例jane。这样,我们可以动态地创建新的对象实例,而不需要显式地使用构造函数的名称。
  1. 如何获取proto:
  • 对象:Object.getPrototypeOf() 等价于 obj.__proto__;
  • 函数:Function.prototype;
    注意这两个是不一样的,对象的__proto__是根据其类型的prototype创建的。
  1. 检查对象本身(不包括原型链)是否存在某个属性:
  • obj.hasOwnProperty(“propertyName”);
  • Object.hasOwn(obj, “propertyName”);
  1. 使用不同的方法来创建对象和改变原型链的方法:
  • 使用语法结构创建对象

const p = { b: 2, __proto__: o };

  • 使用构造函数
function Graph() {this.vertices = [];this.edges = [];
}Graph.prototype.addVertex = function (v) {this.vertices.push(v);
};
  • 使用 Object.create()
const a = { a: 1 };
// a ---> Object.prototype ---> nullconst b = Object.create(a);
  • 使用类
class Polygon {constructor(height, width) {this.height = height;this.width = width;}
}
class Square extends Polygon {
}
  • 使用 Object.setPrototypeOf()
const obj = { a: 1 };
const anotherObj = { b: 2 };
Object.setPrototypeOf(obj, anotherObj);
// obj ---> anotherObj ---> Object.prototype ---> null
  • 使用 proto 访问器
const obj = {};
// 请不要使用该方法:仅作为示例。
obj.__proto__ = { barProp: "bar val" };
obj.__proto__.__proto__ = { fooProp: "foo val" };
console.log(obj.fooProp);
console.log(obj.barProp);

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

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

相关文章

Linux学习之路 -- 文件系统 -- 缓冲区

前面介绍了文件描述符的相关知识,下面我们将介绍缓冲区的相关知识。 本质上来说,缓冲区就是一块内存区域,因为内核上的缓冲区较复杂,所以本文主要介绍C语言的缓冲区。 目录 1.为什么要有缓冲区 2.应用层缓冲区的默认刷新策略 …

如何在bud里弄3d模型?---模大狮模型网

随着数字化设计的不断发展,越来越多的设计软件提供了对3D模型的支持,为设计师们带来了更广阔的创作空间。Bud作为一款功能强大的设计工具,也提供了添加和编辑3D模型的功能,让用户能够更加灵活地进行设计创作。本文将为您详细介绍如…

Python实战开发及案例分析(16)—— 遗传算法

遗传算法(Genetic Algorithm, GA)是一种模拟自然选择和遗传学原理的搜索启发式算法。它们通常用于解决优化和搜索问题,基于“适者生存”的自然选择概念,通过选择、交叉(杂交)、变异操作在一系列迭代中逐步优…

01-背包

此为本蒟蒻第n次发文,若有错误或不足之处,还请各位牛犇多多指出。 目录 引入 01背包 时间复杂度 O ( n 2 ) O(n^2) O(n2) 空间复杂度 O ( n 2 ) O(n^2) O(n2) 代码 滚动数组优化 空间复杂度 O ( n ) O(n) O(n) 代码 练习与拓展 资源来源与参考 0. 引入 在正式开始讲『01背…

【计算机网络】计算机网络体系结构

🚩本文已收录至专栏:计算机网络学习之旅 一.常见的三种结构 (1) OSI参考模型 为了使不同体系结构的计算机网络都能互连起来,国际标准化组织于1977年成立了专门机构研究该问题,提出了著名的开放系统互连基本参考模型&#xff0c…

pycharm 将项目连同库一起打包及虚拟环境的使用

目录 一、创建虚拟环境 1、用 anaconda 创建 2、Pycharm 直接创建 二、虚拟环境安装第三方库 1、创建项目后,启动终端(Alt F12),或者点击下方标记处。 2、使用 pip 或者 conda 来进行三方库的安装或卸载 3、将项目中的库放入文档,便于…

李宏毅-注意力机制详解

原视频链接:attention 一. 基本问题分析 1. 模型的input 无论是预测视频观看人数还是图像处理,输入都可以看作是一个向量,输出是一个数值或类别。然而,若输入是一系列向量,长度可能会不同,例如把句子里的…

Spring STOMP-消息处理流程

一旦STOMP的接口被公布,Spring应用程序就成为连接客户端的STOMP代理。本节描述服务端消息处理的流程。 spring-messaging模块包含消息类应用的基础功能,这些功能起源于Spring Integration项目。并且,后来被提取整合到Spring框架,…

LeetCode - 0001 两数之和

题目地址:https://leetcode.cn/problems/two-sum/description/ 我:你好,面试官,我对算法了解的不多,只刷过LeetCode第一题,你不要问的太难了,好,我准备好了。 面试官:啊…

Spring Boot 调用外部接口的几种方式

Spring Boot 调用外部接口的几种方式 在微服务架构中,服务间的调用是不可或缺的环节。Spring Boot 为开发者提供了多种方式来实现这一任务,这个文章将为你详细介绍这些方式。 一、使用RestTemplate RestTemplate是 Spring Boot 早期版本中常用的 REST 客…

十个最适合论文写作的GPTs及其应用

文章目录 一、GPTs让一切皆有可能二、最适合论文写作的GPTs及其应用1、[Paper Search Engine](https://chat.openai.com/g/g-9v5gHG9Bo)2、[Academic Paper Specialist(学术论文撰写专家)](https://chat.openai.com/g/g-jryw3pfsH)3、[Paper Connect 论文…

【八十七】【算法分析与设计】单调栈全新版本,右大于,左小于右小于等于,739. 每日温度,907. 子数组的最小值之和

739. 每日温度(右大于) 给定一个整数数组 temperatures ,表示每天的温度,返回一个数组 answer ,其中 answer[i] 是指对于第 i 天,下一个更高温度出现在几天后。如果气温在这之后都不会升高,请在该位置用 0 来代替。 示…

微信公众号接入chatGPT自动回复(2)

微信公众平台 配置自动回复的服务器 application.properties中的配置 验证服务器接口配置 其实就两个接口(相同的url地址,只不过请求方式不一样) 1.验证接口(get请求) 2.自动回复接口(post请求) 完整代码 这个地址就是上面URL配置的地址 如果使用Nginx的话自动配置 将该代…

[原创](Modern C++)现代C++的字符串与Windows API交互的正确方式.

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ联系: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、D…

11个免费的 android数据恢复应用程序功能分析

在手机上丢失数据是一个很大的错误。但是,在这种情况下,除了惊慌失措之外,最好开始使用android数据恢复应用程序搜索以查找将其取回的方法。您可以检查手机的备份存储以在Android上进行数据恢复,但是如果数据仍然无处可寻&#xf…

@PostConstruct

PostConstruct initializeBean方法–> PostProcessor.postProcessMergedBeanDefinition --> InitDestroyAnnotationBeanPostProcessor.postProcessBeforeDestruction 被PostConstruct注解的方法会在Bean初始化的时候被调用,如下图: 继承关系如下…

jenkins连接ubuntu普通用户节点

1.创建credentials 2.创建node 3.在jenkins服务器还需要进行的操作(jenkins服务器中) mkdir /var/lib/jenkins/.ssh ssh-keyscan -H 192.168.110.204 >> /var/lib/jenkins/.ssh/known_hosts chown -R jenkins:jenkins /var/lib/jenkins/.ssh/ 4.…

相交链表(数据结构)

160. 相交链表 - 力扣(LeetCode)https://leetcode.cn/problems/intersection-of-two-linked-lists/description/ 题目 解决思路 1,找到相交的点 相交链表的关键也就是找到相交的点,所以我们需要首先判断有没有相交的节点&#…

程序员必读书籍推荐

在快速发展的编程领域,不断学习和积累是每位程序员的必修课。以下是几本对于程序员来说,不容错过的必读书籍。 《代码大全》是一本编程界的经典之作,书中不仅详细介绍了编程的最佳实践,还深入探讨了软件构建的艺术。对于想要提升…