当前位置: 首页 > news >正文

JavaScript继承与原型链

  1. 继承和原型链是什么?
    1.1 在继承中,子类继承父类的特征和行为,使得子类对象具有父类的实例域和方法。这意味着子类可以使用父类的方法和属性,使用继承的目的是为了更好设置实例的公共属性和方法,如下例子:

      // 以类的形式说明继承,直观一点// 父类class Animal {constructor() {this.area = '广东'}helloMethod () {return `它是${this.area}的动物`}}// 子类,子类继承了父类的属性和方法class Dog extends Animal {constructor(name) {super() // 调用父类的构造函数this.name = name}introduce () {return `${this.name}是一只狗`}}const dog1 = new Dog('咕咕')console.log(dog1.introduce()); // 咕咕是一只狗--introduce是自身实例的方法console.log(dog1.name); //  咕咕--name是自身实例的属性console.log(dog1.area); //  广东--area是继承了父类的属性console.log(dog1.helloMethod()); //  它是广东的动物--helloMethod是继承了父类的方法
    

    1.2 原型链:是javascript中实现对象间继承和代码重用的一种机制。
    JavaScript 只有一种结构:对象(广义的对象,不单指object)。每个对象都有一个私有属性指向另一个名为原型(prototype)的对象。原型对象也有一个自己的原型,层层向上直到一个对象的原型为 null。根据定义,null 没有原型,并作为这个原型链(prototype chain)中的最后一个环节。

    当你试图访问一个对象的属性时,如果在该对象本身中找不到该属性,就会在其原型中搜索该属性,如果仍然找不到,那么就会搜索原型的原型,以此类推,直到找到一个名字匹配的属性或到达原型链的末尾(即原型为null的对象)。

  2. 使用不同的方法来创建对象和改变原型链
    2.1 使用语法结构创建对象

    const o = { a: 1 };
    // 新创建的对象 o 以 Object.prototype 作为它的 [[Prototype]]
    // Object.prototype 的原型为 null。
    // 其原型链如下所示:
    // o ---> Object.prototype ---> nullconst b = ["yo", "whadup", "?"];
    // 数组继承了 Array.prototype(具有 indexOf、forEach 等方法)
    // 其原型链如下所示:
    // b ---> Array.prototype ---> Object.prototype ---> nullfunction f() {return 2;
    }
    // 函数继承了 Function.prototype(具有 call、bind 等方法)
    // 其原型链如下所示:
    // f ---> Function.prototype ---> Object.prototype ---> nullconst p = { b: 2, __proto__: o };
    // 可以通过 __proto__ 字面量属性将新创建对象的
    // [[Prototype]] 指向另一个对象。
    // (不要与 Object.prototype.__proto__ 访问器混淆,Object.prototype.__proto__添加原型链方法已经不推荐使用)
    // 其原型链如下所示:
    // p ---> o ---> Object.prototype ---> null

    2.2 使用构造函数

    function Family (name) {this.nameOfFamily = `${name}的家庭成员`this.persons = []
    }
    // 在Family原型链上添加addPerson方法,供后续创建的实例访问此公共的方法
    Family.prototype.addPerson = function (name) {this.persons.push(name)
    }const family = new Family('李四')family.addPerson('李四')family.addPerson('李四的妹妹')console.log(family.nameOfFamily); // 李四的家庭成员console.log(family.persons); // ['李四', '李四的妹妹']const family1 = new Family('王五')family1.addPerson('王五')family1.addPerson('王五的弟弟')console.log(family1.nameOfFamily); // 王五的家庭成员console.log(family1.persons); // ['王五', '王五的弟弟']
    

    2.3 使用 Object.create()

    const a = { a: 1 };
    // a ---> Object.prototype ---> nullconst b = Object.create(a);
    // b ---> a ---> Object.prototype ---> null
    console.log(b.a); // 1 (inherited)const c = Object.create(b);
    // c ---> b ---> a ---> Object.prototype ---> nullconst d = Object.create(null);
    // d ---> null(d 是一个直接以 null 为原型的对象)
    console.log(d.hasOwnProperty);
    // undefined,因为 d 没有继承 Object.prototype

    2.4 使用类class

      class Polygon {constructor(height, width) {this.height = height;this.width = width;}}class Square extends Polygon {constructor(sideLength) {super(sideLength, sideLength);}get area() {return this.height * this.width;}set sideLength(newLength) {this.height = newLength;this.width = newLength;}}const square = new Square(2);// square ---> Square.prototype ---> Polygon.prototype ---> Object.prototype ---> nullconsole.log(square.area); // 4square.sideLength = 3console.log(square.area); // 9
    

    2.5 使用 Object.setPrototypeOf()

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

    2.6 使用 proto 访问器(性能不佳且已被弃用)

      const obj = {};// 请不要使用该方法:仅作为示例。obj.__proto__ = { barProp: "bar val" };obj.__proto__.__proto__ = { fooProp: "foo val" };console.log(obj.fooProp); // foo valconsole.log(obj.barProp); // bar val
    

除非是为了与新的 JavaScript 特性兼容,否则永远不应扩展原生原型。

参考mdn和阮一峰日志

相关文章:

JavaScript继承与原型链

继承和原型链是什么? 1.1 在继承中,子类继承父类的特征和行为,使得子类对象具有父类的实例域和方法。这意味着子类可以使用父类的方法和属性,使用继承的目的是为了更好设置实例的公共属性和方法,如下例子: …...

SouthLeetCode-打卡24年01月第4周

SouthLeetCode-打卡24年01月第4周 // Date : 2024/01/22 ~ 2024/01/28 022.设计链表 - 双链表 (1) 题目描述 022#LeetCode.707.#北岸计划2024/01/22 (2) 题解代码 import java.util.List;class ListNode {int val;ListNode prev;ListNode next;ListNode(){this.val 0;th…...

Linux——磁盘和文件系统(一)

Linux——磁盘和文件系统 磁盘机械式磁盘固态硬盘 机械式磁盘结构磁盘,磁道,扇区柱面 文件系统的初始化划卷(划盘) 挂载C盘放了什么东西Boot Block(启动模块) 0号组放了什么东西Super Block(超级…...

EasyCVR视频智能监管系统方案设计与应用

随着科技的发展,视频监控平台在各个领域的应用越来越广泛。然而,当前的视频监控平台仍存在一些问题,如视频质量不高、监控范围有限、智能化程度不够等。这些问题不仅影响了监控效果,也制约了视频监控平台的发展。 为了解决这些问…...

Ubuntu搭建国标平台wvp-GB28181-pro

目录 简介安装和编译1.查看操作系统信息2.安装最新版的nodejs3.安装java环境4.安装mysql5.安装redis6.安装编译器7.安装cmake8.安装依赖库9.编译ZLMediaKit9.1.编译结果说明 10.编译wvp-GB28181-pro10.1.编译结果说明 配置1.WVP-PRO配置文件1.1.Mysql数据库配置1.2.REDIS数据库…...

LC 2808. 使循环数组所有元素相等的最少秒数

2808. 使循环数组所有元素相等的最少秒数 难度: 中等 题目大意: 给你一个下标从 0 开始长度为 n 的数组 nums 。 每一秒,你可以对数组执行以下操作: 对于范围在 [0, n - 1] 内的每一个下标 i ,将 nums[i] 替换成 nums[i] &…...

Qt|大小端数据转换

后面打算写Qt关于网络编程的博客,网络编程就绕不开字节流数据传输,字节流数据的传输一般是根据协议来定义对应的报文该如何组包,那这就必然牵扯到了大端字节序和小端字节序的问题了。不清楚的大小端的可以看一下相关资料:大小端模…...

禅道添加自定义字段

1&#xff0c;数据库表 zt_story 添加自定义字段 bakDate1&#xff0c;bakDate2&#xff0c;bakDate3&#xff0c;bakDate4 2&#xff0c;在 /opt/lampp/htdocs/zentaopms/extension/custom/story/ext/config 中添加bakDate.php文件 <?php $config->story->datatab…...

蓝桥杯2024/1/26笔记-----基于PCF8591的电压采集装置

功能实现要求&#xff1a; 每次建好工程文件夹&#xff0c;里边包含User&#xff08;放工程文件&#xff0c;mian.c&#xff0c;可以在这里写如同我这个文章的文本文档&#xff09;、Driver&#xff08;存放底层文件如Led.c&#xff0c;Led.h等&#xff09; 新建的工程先搭建框…...

【一】esp32芯片开发板环境搭建

1、esp32的源码在github上的地址 不同的芯片支持的源码版本不一样&#xff0c;需要根据自己的实际的esp32开发板的芯片下载不用版本的代码 esp32支持多种开发方式&#xff0c;如arduino&#xff0c;ESP-IDF等。官方推荐使用idf开发&#xff0c;ESP-IDF 是乐鑫官方推出的物联网开…...

PyTorch2ONNX-分类模型:速度比较(固定维度、动态维度)、精度比较

图像分类模型部署: PyTorch -> ONNX 1. 模型部署介绍 1.1 人工智能开发部署全流程 #mermaid-svg-bAJun9u4XeSykIbg {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-bAJun9u4XeSykIbg .error-icon{fill:#552222;}…...

Docker命令快车道:一票通往高效开发之旅

欢迎登上 Docker 命令快车&#xff01;在这趟旅程中&#xff0c;你不仅会学会如何驾驭 Docker 这辆神奇的车&#xff0c;还会发现如何让你的开发旅程变得更加轻松愉快。现在&#xff0c;请系好安全带&#xff0c;我们即将出发&#xff01; Docker 是什么 Docker 就像是一辆超…...

IP类接口大全,含免费次数

IP查询 IP归属地-IPv4高精版&#xff1a;根据IP地址查询归属地信息&#xff0c;支持到中国地区&#xff08;不含港台地区&#xff09;街道级别&#xff0c;包含国家、省、市、区县、详细地址和运营商等信息。IP归属地-IPv4区县级&#xff1a;根据IP地址查询归属地信息&#xf…...

LLMs 的记忆和信息检索服务器 Motorhead

LLMs 的记忆和信息检索服务器 Motorhead 1. 为什么使用 Motorhead&#xff1f;2. 通过 Docker 启动 Motorhead3. Github 地址4. python 使用示例地址 1. 为什么使用 Motorhead&#xff1f; 使用 LLMs构建聊天应用程序时&#xff0c;每次都必须构建记忆处理。Motorhead是协助该…...

vue3项目中让echarts适应div的大小变化,跟随div的大小改变图表大小

目录如下 我的项目环境如下利用element-resize-detector插件监听元素大小变化element-resize-detector插件的用法完整代码如下&#xff1a;结果如下 在做项目的时候&#xff0c;经常会使用到echarts&#xff0c;特别是在做一些大屏项目的时候。有时候我们是需要根据div的大小改…...

springboot启动异常

Error creating bean with name ‘dataSource’ org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name dataSource: Unsatisfied dependency expressed through field basicProperties; nested exception is org.springframew…...

直播主播之互动率与促单

直播互动率是衡量直播间观众参与度的重要指标&#xff0c;通常指的是直播间的观众点赞、评论以及转发的数量。互动率越高&#xff0c;表明观众参与度越高&#xff0c;直播间的人气值也相应越高。 为了提升直播互动率&#xff0c;主播可以采取以下策略: 1.积极引导观众参与互动…...

Android 基础技术——Bitmap

笔者希望做一个系列&#xff0c;整理 Android 基础技术&#xff0c;本章是关于 Bitmap Bitmap 内存如何计算 占用内存 宽 * 缩放比例 * 高 * 缩放比例 * 每个像素所占字节 缩放比例 设备dpi/图片所在目录的dpi Bitmap加载优化&#xff1f;不改变图片质量的情况下怎么优化&am…...

数据结构奇妙旅程之七大排序

꒰˃͈꒵˂͈꒱ write in front ꒰˃͈꒵˂͈꒱ ʕ̯•͡˔•̯᷅ʔ大家好&#xff0c;我是xiaoxie.希望你看完之后,有不足之处请多多谅解&#xff0c;让我们一起共同进步૮₍❀ᴗ͈ . ᴗ͈ აxiaoxieʕ̯•͡˔•̯᷅ʔ—CSDN博客 本文由xiaoxieʕ̯•͡˔•̯᷅ʔ 原创 CSDN …...

【JavaScript】Generator

MDN-Generator Generator对象由生成器函数返回&#xff0c;并且它符合可迭代协议和迭代器协议。 Generator-核心语法 核心语法: 定义生成器函数获取generator对象yield表达式的使用通过for of获取每一个yield的值 // 1. 通过function* 创建生成器函数 function* foo() {//…...

河南省考后天网上确认,请提前准备证件照哦

✔报名时间&#xff1a;2024年1月18号一1月24号 ✔报名确认和缴费&#xff1a;2024年1月 31号一2月4号 ✔准考证打印&#xff1a;2024年3月12号一3月17号 ✔笔试时间&#xff1a;2024年3月16日-2024年3月17日。 ✔面试时间&#xff1a;面试时间拟安排在2024年5月中旬 报名网址&…...

【前端】防抖和节流

防抖 防抖用于限制连续触发的事件的执行频率。当一个事件被触发时,防抖会延迟一定的时间执行对应的处理函数。如果在延迟时间内再次触发了同样的事件,那么之前的延迟执行将被取消,重新开始计时。 总结:在单位时间内频繁触发事件,只有最后一次生效 场景 :用户在输入框输…...

【网络】:网络套接字(UDP)

网络套接字 一.网络字节序二.端口号三.socket1.常见的API2.封装UdpSocket 四.地址转换函数 网络通信的本质就是进程间通信。 一.网络字节序 我们已经知道,内存中的多字节数据相对于内存地址有大端和小端之分, 磁盘文件中的多字节数据相对于文件中的偏移地址也有大端小端之分,网…...

Linux编程 1/2 数据结构

数据结构: 程序 数据结构 算法 1.数据结构: 1.时间复杂度: 数据量的增长与程序运行时间增长所呈现的比例函数,则称为时间渐进复杂度函数简称时间复杂度 O(c) > O(logn)> O(n) > O(nlogn) > O(n^2) > O(n^3) > O(2^n) 2.空间复杂度: 2.类…...

【UE Niagara】实现闪电粒子效果的两种方式

目录 效果 步骤 方式一&#xff08;网格体渲染器&#xff09; &#xff08;1&#xff09;添加网格体渲染器 &#xff08;2&#xff09;修改粒子显示方向 &#xff08;3&#xff09;添加从上到下逐渐显现的效果 &#xff08;4&#xff09;粒子颜色变化 方式二&#xff0…...

js数组/对象的深拷贝与浅拷贝

文章目录 一、js中的深拷贝和浅拷贝二、浅拷贝1、Object.assign()2、利用es6扩展运算符&#xff08;...&#xff09; 二、深拷贝1、JSON 序列化和反序列化2、js原生代码实现3、使用第三方库lodash等 四、总结 一、js中的深拷贝和浅拷贝 在JS中&#xff0c;深拷贝和浅拷贝是针对…...

HCIA学习第六天:OSPF:开放式最短路径优先协议

OSPF&#xff1a;开放式最短路径优先协议 无类别链路状态IGP动态路由协议 1.距离矢量协议&#xff1a;运行距离矢量协议的路由器会周期性的泛洪自己的路由表。通过路由的交互&#xff0c;每台路由器从相邻的路由器学习到路由&#xff0c;并且加载进自己的路由表中&#xff1b…...

从四个方面来解决企业在项目管理中遇到的各类问题

案例背景&#xff1a;某建筑集团有限公司成立于1949年&#xff0c;拥有国家房屋建筑工程施工总承包一级、建筑装修装饰工程专业承包一级、市政公用工程施工总承包一级资质。是一家集建筑施工、设备安装、装饰装潢、仿古建筑、房地产开发、建材试验为一体的具有综合生产能力的建…...

使用代码取大量2*2像素图片各通道均值,存于Excel文件中。

任务是取下图RGB各个通道的均值及标签&#xff08;R, G&#xff0c;B&#xff0c;Label&#xff09;,其中标签由图片存放的文件夹标识。由于2*2像素图片较多&#xff0c;所以将结果放置于Excel表格中&#xff0c;之后使用SVM对他们进行分类。 from PIL import Image import os …...

React16源码: React中commit阶段的commitBeforeMutationLifecycles的源码实现

commitBeforeMutationLifecycles 1 &#xff09;概述 在 react commit 阶段的 commitRoot 第一个while循环中调用了 commitBeforeMutationLifeCycles现在来看下&#xff0c;里面发生了什么 2 &#xff09;源码 回到 commit 阶段的第一个循环中&#xff0c;在 commitRoot 函数…...