js原型、原型链和继承

文章目录

  • 一、原型
    • 1、prototype
    • 2、constructor
  • 二、原型链
    • 1、字面量原型链
    • 2、字面量继承
    • 3、构造函数的原型链
    • 4、Object.create
    • 5、Object.setPrototypeOf
  • 三、继承
    • 1、构造函数继承
    • 2、原型链继承
    • 3、组合继承
  • 四、常见链条
    • 1、Function
    • 2、Object.prototype

继承是指将特性从父代传递给子代,以便新代码可以重用并基于现有代码的特性进行构建。JavaScript 使用对象实现继承。每个对象都有一条链接到另一个称作原型的对象的内部链。该原型对象有自己的原型,依此类推,直到原型是 null 的对象。

一、原型

1、prototype

  • 构造函数自带原型对象prototype,可以在prototype增加属性和方法,这样构造函数产生的实例可以共享这些属性和方法(如果实例上没有的话)
  • 实例__proto__属性指向最近的上级prototype(如果有继承),如果没有继承那么指向构造函数的prototype;__proto__在浏览器上显示的是[[Prototype]]
  • 注意原型对象prototype也是对象,他是被Object创建出来的
const ParentFun = function () {this.name = "张三";
};
ParentFun.prototype.getName = function () {return this.name;
};
const parentObj = new ParentFun();
parentObj.__proto__ === ParentFun.prototype // true

2、constructor

  • constructor其实依赖于prototype,只是prototype上的一个属性,指向构造函数本身(函数对象,函数也可以被认为是一个对象,可以挂载属性和方法)
  • 在原型链继承的时候,错误操作可能只顾着继承prototype,而丢失constructor属性
  • instanceof: a instanceof b会在链条往上查找prototype.constructor,看a的原型链上有没有b;逐级上查
const ParentFun = function () {this.name = "张三";
};
ParentFun.prototype.constructor === ParentFun // true
// 等同于;因为ParentFunObj默认往上查找一层就是ParentFun.prototype
ParentFunObj.constructor === ParentFun // trueconst ParentFunObj = new ParentFun();
ParentFunObj instanceof ParentFun // true
ParentFunObj instanceof Object // true

二、原型链

1、字面量原型链

  • 注意对象中设置字面量{ proto: … },是被允许的、合理的;不合理是设置隐式原型obj.proto = …
const obj = {a: 1,// __proto__ 设置了 [[Prototype]]。在这里它被指定为另一个对象字面量。__proto__: {b: 2,__proto__: {c: 3,},},
};
obj.a // 1
obj.b // 2
obj.c // 3

2、字面量继承

const parent = {value: 2,method() {return this.value + 1;}
};// child 是一个继承了 parent 的对象
const child = {__proto__: parent
};console.log(child.method()); // 3// child ---> parent ---> Object.prototype ---> null

3、构造函数的原型链

function Constructor() {}const obj = new Constructor();// obj ---> Constructor.prototype ---> Object.prototype ---> null

4、Object.create

const a = { a: 1 };
// a ---> Object.prototype ---> nullconst b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1(继承的)

5、Object.setPrototypeOf

const obj = { a: 1 };
const anotherObj = { b: 2 };
Object.setPrototypeOf(obj, anotherObj);
// obj ---> anotherObj ---> Object.prototype ---> null

三、继承

1、构造函数继承

  • call、apply都可以
  • 也可以使用class,本文案例未举例
const ParentFun = function () {this.name = "张三";
};
const ChildFun = function () {// 继承父类的属性和方法;构造函数继承;// 注意调用的时机,会决定实例的属性顺序;比如这里的name属性在age前面ParentFun.call(this);// 运行时this指向childFunc实例对象(的内存空间);this.age = 20;
};

2、原型链继承

  • Object.setPrototypeOf(ChildFun.prototype, ParentFun.prototype):给目标设置原型链的上一级;
  • Object.setPrototypeOf(ChildFun.prototype):获取该目标的原型链的上一级
  • Object.create(ParentFun.prototype):创建和返回新对象,设置该对象的原型链上一级
  • 原型链扩充,每次扩充都会形成上级和下级的二元链;链条可以被设置成连续不断一直到顶层null,也可以设置成短链
const ParentFun = function () {this.name = "张三";
};
const ChildFun = function () {// 继承父类的属性和方法;构造函数继承;// 注意调用的时机,会决定实例的属性顺序;比如这里的name属性在age前面ParentFun.call(this);// 运行时this指向childFunc实例对象(的内存空间);this.age = 20;
};
ParentFun.prototype.getName = function () {return this.name;
};
ChildFun.prototype.getAge = function () {return this.age;
};const transferTemp = (Parent, Child) => {// 空的对象作为临时原型链;const Temp = () => {};Temp.prototype = Parent.prototype;Child.prototype = new Temp();Child.prototype.constructor = Child;
};const transferCreat = (Parent, Child) => {// Object.create本身就会返回一个空对象,该对象的__proto__指向Parent.prototype;Child.prototype = Object.create(Parent.prototype);// 覆盖prototype以后会丢失constructor,需要重新赋值;// constructor在一些判断中可能被用到// prototype在此之前设置的其他属性也会消失(比如getAge)Child.prototype.constructor = Child;
};// 注意原型链继承方式的区别
// 1
// ChildFun.prototype = new ParentFun();
// 2 废弃但可用;__proto__ 赋值只会接受对象,其他值会被忽略
// ChildFun.prototype.__proto__ = ParentFun.prototype;
// 3 推荐 安全有效,没有中转对象
// Object.setPrototypeOf(ChildFun.prototype, ParentFun.prototype);
// 4 使用中转对象
// transferTemp(ParentFun, ChildFun);
// 5 使用中转对象
// transferCreat(ParentFun, ChildFun);

3、组合继承

const ParentFun = function () {this.name = "张三";
};
const ChildFun = function () {// 继承父类的属性和方法;构造函数继承;// 注意调用的时机,会决定实例的属性顺序;比如这里的name属性在age前面ParentFun.call(this);// 运行时this指向childFunc实例对象(的内存空间);this.age = 20;
};
ParentFun.prototype.getName = function () {return this.name;
};
ChildFun.prototype.getAge = function () {return this.age;
};// 自定义Object.keys方法   用于获取对象所有属性名
Object.prototype.keysCustom = function (obj) {if (typeof obj !== "object" || obj === null) {return;}const result = []; // 用于存储结果for (let key in obj) {// hasOwnProperty表示自身的属性,不包括原型链上的属性if (obj.hasOwnProperty(key)) {// 相当于循环后存储keyresult.push(key);}}return result;
};Object.setPrototypeOf(ChildFun.prototype, ParentFun.prototype);const childObj = new ChildFun();const keysAll = [];
const keysOwn = [];
for (let key in childObj) {// 自己的属性和原型链上的属性都会遍历出来;// 原型链继承的所有属性 + Object.prototype 挂载的自定义方法keysAll.push(key);if (childObj.hasOwnProperty(key)) {// 自己的属性才会遍历出来;keysOwn.push(key);}
}
// console.log("Object.keysCustom", keysAll, keysOwn, childObj); // TEST
// 结果:keysAll = ["name", "age", "getName", "keysCustom"];
// 结果: keysOwn = ["name", "age"];// childObj ---> ChildFun.prototype ---> ParentFun.prototype ---> Object.prototype ---> null

四、常见链条

1、Function

  • Function是所有常见构造函数的源头,甚至他自己也被自己创造
  • 只要是构造函数都归Function管理,包括自定义的函数
// Function创造自己
Object.getPrototypeOf(Function) === Function.prototype // true
// 常规构造函数
Object.getPrototypeOf(Object) === Function.prototype // true
Object.getPrototypeOf(Array) === Function.prototype // true
// 自定义构造函数
const temp =() => {}
Object.getPrototypeOf(temp) === Function.prototype // true

2、Object.prototype

  • 只要是对象都归Object管理,包括prototype对象,当然有例外:Object.prototype
// 常规构造函数的prototype;上一级就是Object.prototype
Object.getPrototypeOf(Function.prototype) === Object.prototype // true
Object.getPrototypeOf(Array.prototype) === Object.prototype // true
// 链条顶层被null强制了
Object.getPrototypeOf(Object.prototype) === Object.prototype // false
Object.getPrototypeOf(Object.prototype) === null // true

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

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

相关文章

在Manjaro Gnome桌面的基础上安装Budgie桌面环境

在Manjaro上安装Budgie桌面环境 Budgie是Solus团队开发的一种简单而优雅的桌面环境。 Budgie是由Solus项目主要开发的流行桌面环境,与GNOME堆栈紧密集成。它提供了简单而优雅的用户体验,并且可用于大多数发行版,如Arch、Debian、Manjaro等。…

芯片测试-smith圆图

smith圆图 💢smith圆图的故事💢💢smith圆图中的各部分来历💢💢公式推导💢💢等电阻圆特点💢💢等电抗圆💢💢等电抗圆特点💢 &#x1f4a…

聚云科技×亚马逊云科技:打通生成式AI落地最后一公里

云计算时代,MSP(云管理服务提供商)犹如一个帮助企业上云、用云、管理云的专业管家,在云计算厂商与企业之间扮演桥梁的作用。生成式AI浪潮的到来,也为MSP带来全新的生态价值和发展空间。 作为国内领先的云管理服务提供…

树莓派/Jetson Nano/...aarch64:安装Miniforge 或 Mambaforge

目录 一、下载链接(我以miniforge为例)二、赋予脚本可执行权限三、运行安装脚本四、添加环境变量 Miniforge 或 Mambaforge是Miniforge 项目提供了针对多种架构(包括 aarch64)的轻量级 Conda 发行版,它们是 Miniconda …

腾讯阅文集团Android面试题及参考答案

Java 的基本数据类型有哪些?分别简述一下。 Java 的基本数据类型共有 8 种,可分为 4 类:整数类型、浮点类型、字符类型和布尔类型 。 整数类型:包括 byte、short、int 和 long。byte 占 1 个字节,取值范围是 - 128 到 127,适用于存储一些小范围的整数,如文件流中的字节数…

白嫖域名,无套路,无需手机注册,支持A解析,TXT解析

注册简单,连邮箱都不需要,不用填写任何资料。 支持A、redirectURL、AAAA、TXT等类型的记录,可以创建子域名 注册地址:Free DDNS 打开首页,输入想要的域名,点查询按钮。如果可用,再点击提交按钮…

SQL进阶技巧:非等值连接--单向近距离匹配

目录 0 场景描述 1 数据准备 2 问题分析 ​编辑 ​编辑 3 小结 数字化建设通关指南 0 场景描述 表 t_1 和表 t_2 通过 a 和 b 关联时,有相等的取相等的值匹配,不相等时每一 个 a 的值在 b 中找差值最小的来匹。 表 t_1:a 中无重复值…

【Linux】软件包管理与vim工具使用详解

Linux 软件包管理与vim工具使用详解 什么是软件包Liunx安装软件Linux下载软件的过程(Ubuntu、Centos、other) centos7配置新的yum源操作系统的好坏评估---生态问题如何安装软件查看软件包卸载软件 Linux编辑器-vim使用简单vim配置Linux编译器-gcc/g使用预…

Vue如何加载十万条数据

加载十万条数据到 Vue 应用中是一个相对复杂的问题,主要因为渲染大量数据可能会导致性能瓶颈,尤其是在前端性能较低的设备上。为了确保加载大量数据时,页面不会卡顿或崩溃,我们通常采取一些优化手段,以下是几种常用的方…

【Ant Design Pro】1. config 配置

前置说明 这里我使用的是 simple 版本,并结合 antd pro 脚手架搭建(现在默认使用为 umi4 版本): 虽然这个文档好像已经好久没有更新了。 config 文件: config.ts // https://umijs.org/config/ import { defineConfi…

《实战OpenCV系列》专栏介绍

简介 本专栏由浅入深,详细介绍了使用OpenCV进行图像/视频处理的各方面知识,包括:图像显示、图像的数学运算、图像的裁剪与拼接、图像的像素操作、几何变换、直方图、图像滤波、色彩空间转换、边缘检测、形态学操作、模板匹配、视频处理、图像…

Mac启动服务慢问题解决,InetAddress.getLocalHost().getHostAddress()慢问题。

项目启动5分钟,很明显有问题。像网上其他的提高jvm参数就不说了,应该不是这个问题,也就快一点。 首先找到自己的电脑名称(用命令行也行,只要能找到自己电脑名称就行,这里直接在共享里看)。 复制…

Vue 项目中有哪些内存泄漏的场景,以及预防内存泄漏技巧

前言 即便是功能强大的 Vue.js 也无法完全避免内存泄漏的问题,内存泄漏不仅会影响应用的性能,还可能导致浏览器崩溃。因此,识别和解决 Vue 项目中的内存泄漏问题是确保项目稳定性和性能的关键。 本文将通俗易懂地介绍 Vue 项目中常见的内存泄…

微信小程序Webview与H5通信

背景 近期有个微信小程序需要用到web-view嵌套H5的场景,该应用场景需要小程序中频繁传递数据到H5进行渲染,且需要保证页面不刷新。 由于微信小程序与H5之间的通信限制比较大,显然无法满足于我的业务场景 探索 由于微信小程序与webview的环境是…

【JAVA】接口杂谈:Java中的比较器(Comparator 接口)

这篇来介绍自定义类型对象的比较方法,利用Comparable 接口和 Comparator 接口。 目录 问题引入: 一、Comparable 接口 1.1比较学生的年龄 方法: 结果: 1.2比较学生的姓名 方法: 结果: 1.3 案例再…

Pytorch使用手册- PyTorch 中 non_blocking 和 pin_memory() 的使用指南(专题十一)

1. 介绍 在许多 PyTorch 应用中,将数据从 CPU 转移到 GPU 是非常基础的操作。用户理解在设备间传输数据时最有效的工具和选项非常重要。本教程将重点讲解两种在 PyTorch 中进行设备间数据传输的关键方法:pin_memory() 和带有 non_blocking=True 选项的 to()。 1.1 你将学习…

数据结构 (19)二叉树

一、定义 二叉树(Binary Tree)是n个有限元素的集合,该集合或者为空、或者由一个称为根(root)的元素及两个不相交的、被分别称为左子树和右子树的二叉树组成,是有序树。若集合为空,则称该二叉树为…

路由策略与路由控制实验

AR1、AR2、AR3在互联接口、Loopback0接口上激活OSPF。AR3、AR4属于IS-IS Area 49.0001,这两者都是Level-1路由器,AR3、AR4的系统ID采用0000.0000.000x格式,其中x为设备编号 AR1上存在三个业务网段A、B、C(分别用Loopback1、2、3接…

flutter 解决webview加载重定向h5页面 返回重复加载问题

long time no see. 如果觉得该方案helps,点个赞,评论打个call,这是我前进的动力~ 通常写法: 项目里用的webview_flutter 正常webview处理返回事件 if (await controller.canGoBack()) {controller.goBack(); } else {Navigator…

Kubernetes集群操作

查看集群信息: kubectl get nodes 删除节点 (⽆效且显示的也可以删除) 后期如果 要删除某个节点,为了不增加其他节点的访问压力,先增加一个节点,再删除要删除的节点 语法 :kubect delete…