揭秘原型链：探索 JavaScript 面向对象编程的核心（下）

在这里插入图片描述

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

  • 五、使用原型链的注意事项
    • 原型链的性能考虑
    • 避免循环引用
  • 六、常见的原型链问题及解决方法
    • 原型链污染
  • 七、优化原型链的技巧
    • 使用构造函数模式
  • 八、总结
    • 原型链的重要性和应用场景
    • 优化原型链的方法

五、使用原型链的注意事项

原型链的性能考虑

原型链在 JavaScript 中是一种强大而灵活的机制，用于实现继承、共享属性和方法等功能。然而，在考虑原型链的性能时，需要注意以下几点：
在这里插入图片描述

  1. 查找速度：原型链的查找速度相对较慢，因为它需要沿着链进行多次查找才能找到所需的属性或方法。在大型的对象结构中，这种查找可能会导致一定的性能开销。

  2. 共享属性：原型链中的属性是共享的，这意味着如果多个对象共享同一个原型对象，对其中一个对象的属性修改可能会影响到其他对象。这在某些情况下可能会导致意外的行为，需要谨慎处理。

  3. 内存占用：由于原型链中的对象是引用类型，它们在内存中只存在一个实例。这可以减少内存的使用，但也可能导致内存泄漏的风险。如果一个原型对象被大量对象引用，并且不再被使用，它可能会一直存在于内存中，直到整个 JavaScript 运行环境被释放。

为了优化原型链的性能，可以考虑以下几点：

  1. 尽量减少原型链的长度：通过合理的类设计和继承层次结构，尽量减少原型链的长度，以提高属性和方法的查找速度。

  2. 使用优化的方法：对于频繁访问的属性和方法，可以考虑将它们直接定义在对象本身，而不是通过原型链来访问。这样可以提高访问速度。

  3. 避免共享敏感属性：如果需要在对象之间保持独立的状态，尽量避免在原型对象上定义敏感属性，以避免意外的修改影响到其他对象。

  4. 注意内存泄漏：在处理不再使用的原型对象时，及时释放对它们的引用，以避免内存泄漏的问题。

在这里插入图片描述

总的来说，原型链在 JavaScript 中是一种强大而灵活的机制，但在考虑性能时需要谨慎处理。通过合理的设计和优化，可以在保持原型链的优势的同时，最大程度地减少性能问题。

避免循环引用

在 JavaScript 中，循环引用是指两个或多个对象之间相互引用，形成一个循环的引用关系。
这种情况可能会导致内存泄漏，因为这些对象将无法被垃圾回收器正确释放。

为了避免循环引用，可以采取以下措施：

  1. 解除引用：在不再需要对象时，及时将对它们的引用解除，以确保它们可以被垃圾回收器正确释放。可以使用 null 或 undefined 来赋值给对象的引用，以解除引用。

  2. 使用 weakMap：WeakMap 是 JavaScript 中的一种弱引用数据结构，它允许存储对象作为键，但不会阻止这些对象被垃圾回收器回收。可以使用 WeakMap 来存储对对象的弱引用，从而避免循环引用。

  3. 使用 Proxy 对象：Proxy 对象可以用来创建一个代理对象，该代理对象可以拦截对另一个对象的访问。通过使用 Proxy 对象，可以在访问对象的属性时进行特殊处理，例如自动解除引用，从而避免循环引用。

在这里插入图片描述

以下是一个示例，展示如何使用 WeakMap 来避免循环引用：

class MyClass {constructor() {this.myWeakMap = new WeakMap();}setReference(obj) {this.myWeakMap.set(obj, true);}clearReference(obj) {this.myWeakMap.delete(obj);}
}const obj1 = new MyClass();
const obj2 = new MyClass();obj1.setReference(obj2);
obj2.setReference(obj1);// 释放引用
obj1.clearReference(obj2);
obj2.clearReference(obj1);// 现在 obj1 和 obj2 可以被正确回收

在这个示例中，MyClass 类使用 WeakMap 来存储对其他对象的弱引用。通过使用 setReference 方法来设置弱引用，并使用 clearReference 方法来清除弱引用，可以避免循环引用导致的内存泄漏问题。

需要注意的是，WeakMap 只能存储对象作为键，而不能存储基本类型的值。此外，WeakMap 的键是弱引用的，这意味着如果没有其他强引用指向这些键，它们将被垃圾回收器回收。

总的来说，避免循环引用是确保 JavaScript 应用程序内存安全的重要方面。通过及时解除引用、使用 WeakMap 或其他适当的技术，可以有效地避免循环引用导致的内存泄漏问题。

六、常见的原型链问题及解决方法

原型链污染

原型链污染是指在原型链上意外地修改了对象的原型，导致其他对象受到影响。这可能会导致不可预测的行为和错误。

以下是一个可能导致原型链污染的示例：

function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.friends = ["John", "Jane"];function Employee(salary) {Person.call(this, "John", 30);this.salary = salary;
}Employee.prototype = Object.create(Person.prototype);const employee = new Employee(5000);// 意外地修改了原型链
employee.friends.push("Bob");console.log(employee.friends); // 输出: ["John", "Jane", "Bob"]
console.log(new Person().friends); // 输出: ["John", "Jane", "Bob"]

在这个示例中，我们创建了一个 Person 类和一个继承自 Person 的 Employee 类。我们将 Employee 的原型对象设置为 Person 的原型对象的一个副本，以实现继承。

然而，在后面的代码中，我们意外地修改了 employee 对象的 friends 属性，这导致了原型链的污染。由于 Employee 的原型对象是 Person 的原型对象的副本，所以对 employee.friends 的修改也会反映在 Person 的原型对象上。

为了避免这种问题，可以采取以下措施：

  1. 避免直接修改原型对象：尽量避免直接修改原型对象上的属性。如果需要在对象之间共享属性或方法，可以考虑使用构造函数或其他合适的模式。

  2. 使用 Object.assign() 或 ... 扩展运算符：在创建子类时，可以使用 Object.assign() 或 ... 扩展运算符来复制父类的属性，而不是直接使用原型链。

  3. 使用 Object.preventExtensions()：可以使用 Object.preventExtensions() 方法来防止对象的属性被意外修改。这可以在创建对象后立即调用，以确保对象的属性不会被意外修改。

以下是一个使用 Object.preventExtensions() 来避免原型链污染的示例：

function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.friends = ["John", "Jane"];function Employee(salary) {Person.call(this, "John", 30);this.salary = salary;
}Employee.prototype = Object.create(Person.prototype);const employee = new Employee(5000);// 使用 Object.preventExtensions() 防止属性被意外修改
Object.preventExtensions(employee);employee.friends.push("Bob");console.log(employee.friends); // 输出: ["John", "Jane"]
console.log(new Person().friends); // 输出: ["John", "Jane"]

在这个示例中，我们使用 Object.preventExtensions() 方法来防止 employee 对象的属性被意外修改。这样，即使我们尝试修改 employee.friends，也不会影响到 Person 的原型对象。

需要注意的是，使用 Object.preventExtensions() 方法会使对象变得不可扩展，无法添加新的属性。如果需要在对象上添加新的属性，可以考虑使用其他方法，例如使用 Object.defineProperty() 或使用其他合适的数据结构。

七、优化原型链的技巧

使用构造函数模式

在 JavaScript 中，优化原型链的一种常见技巧是使用构造函数模式（Constructor Pattern）。构造函数模式通过使用构造函数来创建对象，并在构造函数中定义对象的属性和方法。这种模式可以避免使用原型链来共享属性和方法，从而提高性能和可维护性。

以下是一个使用构造函数模式的示例：

function Person(name, age) {this.name = name;this.age = age;
}Person.prototype.friends = ["John", "Jane"];function Employee(salary) {Person.call(this, "John", 30);this.salary = salary;
}Employee.prototype = Object.create(Person.prototype);const employee = new Employee(5000);employee.friends.push("Bob");console.log(employee.friends); // 输出: ["John", "Jane", "Bob"]
console.log(new Person().friends); // 输出: ["John", "Jane"]

在这个示例中，我们创建了一个 Person 类和一个继承自 Person 的 Employee 类。我们使用 Object.create() 方法来创建 Employee 的原型对象，并将其设置为 Person 的原型对象的一个副本。

这样，Employee 就可以继承 Person 的属性和方法，包括共享的 friends 属性。由于 Employee 的原型对象是 Person 的原型对象的副本，所以对 employee.friends 的修改不会影响到 Person 的原型对象。

这种模式可以提高性能和可维护性，因为它避免了在原型链上进行多次查找和修改，并且可以更好地控制对象的属性和方法。但是，在某些情况下，使用原型链来共享属性和方法可能更加方便和灵活，具体取决于您的需求和使用场景。

八、总结

原型链的重要性和应用场景

原型链是 JavaScript 中一个重要的概念，它允许对象通过原型链来共享属性和方法，从而提高代码的灵活性和可复用性。以下是原型链的重要性和一些常见的应用场景：

重要性：

  1. 代码复用：原型链允许对象通过继承来共享属性和方法，从而减少了代码的重复。
  2. 动态扩展：原型链允许在运行时动态地向对象添加属性和方法，从而提高了代码的灵活性。
  3. 提高性能：原型链可以减少对象的创建，因为对象可以通过原型链来共享属性和方法，从而提高了性能。
    在这里插入图片描述

应用场景：

  1. 继承：原型链是 JavaScript 中实现继承的一种方式。通过将一个对象的原型设置为另一个对象的实例，可以实现继承。
  2. 共享属性和方法：原型链允许对象通过原型链来共享属性和方法，从而减少了代码的重复。
  3. 扩展对象：原型链允许在运行时动态地向对象添加属性和方法，从而提高了代码的灵活性。
  4. 原型污染：原型链可能会导致原型污染，即在原型链上意外地修改了对象的原型。为了避免这种情况，可以使用构造函数模式或类模式来创建对象。
    在这里插入图片描述

总之，原型链是 JavaScript 中一个重要的概念，它允许对象通过原型链来共享属性和方法，从而提高了代码的灵活性和可复用性。在使用原型链时，需要注意避免原型污染，并根据具体的应用场景选择合适的方法来创建对象。

优化原型链的方法

以下是优化原型链的一些方法：

  1. 使用构造函数模式：通过使用构造函数来创建对象，并在构造函数中定义对象的属性和方法。这种模式可以避免使用原型链来共享属性和方法，从而提高性能和可维护性。
  2. 使用类模式：类模式是一种更高级的构造函数模式，它使用 class 关键字来定义类，并使用 extends 关键字来实现继承。类模式提供了更好的语法糖和类型检查，可以提高代码的可读性和可维护性。
  3. 避免直接修改原型对象：尽量避免直接修改原型对象上的属性。如果需要在对象之间共享属性或方法，可以考虑使用构造函数或其他合适的模式。
  4. 使用 Object.preventExtensions()：可以使用 Object.preventExtensions() 方法来防止对象的属性被意外修改。这可以在创建对象后立即调用，以确保对象的属性不会被意外修改。
  5. 使用 Object.defineProperty()：可以使用 Object.defineProperty() 方法来定义对象的属性，并设置其可枚举性、可写性和可配置性。这可以提高代码的可读性和可维护性，并避免潜在的问题。

在这里插入图片描述

这些方法可以帮助优化原型链，提高代码的性能和可维护性。具体的优化方法应根据具体的应用场景和需求来选择。

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

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

相关文章

【Android】Android Framework系列--Launcher3桌面图标加载流程

【Android】Android Framework系列--Launcher3桌面图标加载流程

Launcher3桌面加载流程 Android Launcher3(简称Launcher）启动后会加载桌面。基于Android12代码，分析一下桌面加载的流程。 一些相关的概念： WorkSpace：桌面。在桌面上可以添加快捷方式、Hoseat或Dock（就是手机或者车…
阅读更多...
项目中遇到的半导体公司

项目中遇到的半导体公司

作为一个技术人，我并不是亲美，从技术的实事求是角度讲，不得不感叹欧美的半导体技术。他们的datasheet能学到的东西太多太多；我甚至佩服他们缜密的逻辑。从他们的文章中领悟我们技术到底有多low，没办法一个一个了解所有…
阅读更多...
【重点】【双指针】11. 盛最多水的容器

【重点】【双指针】11. 盛最多水的容器

题目 注意&#xff1a;二维接雨水&#xff0c;有墙的&#xff0c;有线的&#xff0c;着这个属于线的。 class Solution {public int maxArea(int[] height) {if (height.length < 2) {return 0;}int left 0, right height.length - 1, res 0;while (left < right) {…
阅读更多...
avue-crud中时间范围选择默认应该是0点却变成了12点

avue-crud中时间范围选择默认应该是0点却变成了12点

文章目录 一、问题二、解决三、最后 一、问题 在avue-crud中时间范围选择&#xff0c;正常默认应该是0点&#xff0c;但是不知道怎么的了&#xff0c;选完之后就是一直是12点。具体问题如下动图所示&#xff1a; <template><avue-crud :option"option" /&g…
阅读更多...
Linux文件系统 -- inode和block

Linux文件系统 -- inode和block

目录 重要参数目录项fsck软连接&#xff0c;硬链接 重要参数 dumpe2fs /dev/sda1|more查看ext4文件元数据&#xff08;描述文件系统的数据&#xff09;&#xff0c;xfs_info查看xfs文件系统 superblock&#xff1a;超级块&#xff0c;记录此file system的整体信息&#xff0c…
阅读更多...
每日一练：冒泡排序

每日一练：冒泡排序

1. 概述 冒泡排序&#xff08;Bubble Sort&#xff09;也是一种简单直观的排序算法。它重复地走访过要排序的数列&#xff0c;一次比较两个元素&#xff0c;如果他们的顺序错误就把他们交换过来。走访数列的工作是重复地进行直到没有再需要交换&#xff0c;也就是说该数列已经排…
阅读更多...
Vue---Echarts

Vue---Echarts

项目需要用echarts来做数据展示&#xff0c;现记录vue3引入并使用echarts的过程。 1. 使用步骤 安装 ECharts&#xff1a;使用 npm 或 yarn 等包管理工具安装 ECharts。 npm install echarts 在 Vue 组件中引入 ECharts&#xff1a;在需要使用图表的 Vue 组件中&#xff0c;引入…
阅读更多...
深入理解Java中的锁机制

深入理解Java中的锁机制

引言 大家好&#xff0c;我是小黑。今天咱们来聊聊Java中的锁机制&#xff0c;这可是并发编程的核心。你知道吗&#xff0c;在并发编程的世界里&#xff0c;正确地使用锁就像是掌握了一把神奇的钥匙&#xff0c;它能帮咱们在多线程的混战中保持秩序&#xff0c;防止数据被乱改…
阅读更多...
opencv知识库：基于cv2.flip()函数对图像进行随机翻转(水平/垂直)

opencv知识库：基于cv2.flip()函数对图像进行随机翻转(水平/垂直)

需求场景 欲对RGB格式的lena图像进行随机翻转&#xff0c;要求这些图像不翻转、水平翻转、垂直翻转的概率都为1/3。 功能代码 import cv2 import random# 读取并展示图像 img cv2.imread("lena.jpg") cv2.imshow(lena, img) cv2.waitKey(0)for i in range(6): #…
阅读更多...
Hdoop学习笔记（HDP）-Part.18 安装Flink

Hdoop学习笔记（HDP）-Part.18 安装Flink

目录 Part.01 关于HDP Part.02 核心组件原理 Part.03 资源规划 Part.04 基础环境配置 Part.05 Yum源配置 Part.06 安装OracleJDK Part.07 安装MySQL Part.08 部署Ambari集群 Part.09 安装OpenLDAP Part.10 创建集群 Part.11 安装Kerberos Part.12 安装HDFS Part.13 安装Ranger …
阅读更多...
头歌JUnit单元测试相关实验入门

头歌JUnit单元测试相关实验入门

一、入门实验 1.1第一个Junit测试程序 任务描述 请学员写一个名为testSub()的测试函数&#xff0c;来测试给定的减法函数是否正确。 相关知识 Junit编写原则 1、简化测试的编写&#xff0c;这种简化包括测试框架的学习和实际测试单元的编写。 2、测试单元保持持久性。 3、利用…
阅读更多...
短线买入卖出有哪些交易技巧？

短线买入卖出有哪些交易技巧？

前面两节课&#xff0c;我们认识了短线交易&#xff0c;知道了短线交易常见的买入卖出时机&#xff0c;这节课&#xff0c;我们来讲解一下短线买入卖出的一些交易技巧。话不多时&#xff0c;直接进入重点&#xff01; 一、短线交易要果断 短线波动快&#xff0c;在出现买卖信号…
阅读更多...
排序算法总结（Python、Java）

排序算法总结（Python、Java）

Title of Content 1 冒泡排序 Bubble sort&#xff1a;两两交换&#xff0c;大的冒到最后概念排序可视化代码实现Python - 基础实现Python - 优化实现Java - 优化实现C - 优化实现C - 优化实现 2 选择排序 Selection sort&#xff1a;第i轮遍历时&#xff0c;将未排序序列中最小…
阅读更多...
反序列化漏洞详解（一）

反序列化漏洞详解（一）

目录 一、php面向对象 二、类 2.1 类的定义 2.2 类的修饰符介绍 三、序列化 3.1 序列化的作用 3.2 序列化之后的表达方式/格式 ① 简单序列化 ② 数组序列化 ③ 对象序列化 ④ 私有修饰符序列化 ⑤ 保护修饰符序列化 ⑥ 成员属性调用对象 序列化 四、反序列化 …
阅读更多...
unity学习笔记

unity学习笔记

一、线段渲染器 在Unity中&#xff0c;线段渲染器&#xff08;Line Renderer&#xff09;是一种用于在场景中绘制线段的组件。线段渲染器非常适合用于创建轨迹、路径、光束等效果。 1. 创建Line Renderer&#xff1a;在Unity编辑器中&#xff0c;你可以通过创建空对象 -> …
阅读更多...
Linux - 动态库的加载 和 重谈进程地址空间 - vscode 当中的 Remote - SSH 插件

Linux - 动态库的加载 和 重谈进程地址空间 - vscode 当中的 Remote - SSH 插件

推书&#xff1a;《现代操作系统》《操作系统--精髓于设计原理》《UNIX环境高级编程》 目录 前言 程序的加载 程序没有加载之前的地址&#xff08;此时还是程序&#xff09; 程序被加载到内存之后&#xff08;此时是进程&#xff09; 动态库的地址 静态库的不加载&#xff…
阅读更多...
数据结构——堆排序的topk问题

数据结构——堆排序的topk问题

呀哈喽&#xff0c;我是结衣 前言 今天给大家带来的堆排序的topk问题。topk就是在许多数中&#xff0c;找出前k个大的数&#xff0c;可能是几十个数&#xff0c;也可能是几千万个数中找。今天我们将要在1000000&#xff08;一百万&#xff09;个数中找出前10大的数。 知识点 C…
阅读更多...
【c】角谷猜想

【c】角谷猜想

#include<stdio.h> int coll(int x)//定义函数 {int count0;while(x>1){if(x%20){xx/2;count;}else{x3*x1;count;}}return count; } int main() {int n,num;scanf("%d",&n);int arr[n1];for(int i1;i<n;i)//输入n组数据保存到数组中{scanf("%d&…
阅读更多...
数据结构之哈希表

数据结构之哈希表

数据结构之哈希表 文章目录 数据结构之哈希表一、哈希概念二、哈希冲突三、哈希函数常见哈希函数 四、哈希冲突解决闭散列闭散列的思考线性探测线性探测的实现 二次探测 开散列开散列概念开散列的思考开散列实现 五、开散列与闭散列比较 一、哈希概念 顺序结构以及平衡树中&am…
阅读更多...
MidJourney笔记（6）-Niji模式

MidJourney笔记（6）-Niji模式

Niji模式 回顾一下，在讲解settings命令时，我们可以看到一个Niji字眼。 而且是在Midjourney V4之后才有的，那Niji到底是什么？ Niji是MidJourney中用于绘制二次元/动漫风格的模型，那Niji的V4和V5有什么区别呢？
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023