面试之《原型与原型链》

在 JavaScript 中,原型(Prototype)原型链(Prototype Chain) 是实现对象继承和属性共享的核心机制。以下是详细介绍:

一、原型(Prototype)

  1. 基本概念

    • 每个函数(包括构造函数)都有一个 prototype 属性,指向一个对象,称为原型对象
    • 当使用 new 调用构造函数创建实例时,实例内部会有一个隐藏属性 __proto__(ES6 规范中称为 [[Prototype]]),指向构造函数的原型对象。
    • 原型对象的作用是为所有实例共享属性和方法,避免重复定义。
  2. 示例

    function Person(name) {this.name = name;
    }// 原型对象添加方法
    Person.prototype.sayHello = function() {console.log(`Hello, ${this.name}`);
    };const person = new Person("Alice");
    console.log(person.__proto__ === Person.prototype); // true
    person.sayHello(); // Hello, Alice
    

二、原型链(Prototype Chain)

  1. 基本概念

    • 每个对象(包括原型对象)都有自己的 __proto__,指向其“父级”原型对象,形成一条链式结构,称为原型链
    • 当访问对象的属性或方法时,JavaScript 会沿着原型链向上查找,直到找到目标属性或到达 null(终点)。
  2. 原型链结构

    Object.prototype ← Function.prototype ← ... ← 自定义原型 ← 实例
    
    • 所有对象的最终原型是 Object.prototype,它定义了 toString()valueOf() 等通用方法。
    • 函数的原型是 Function.prototype,而 Function.prototype 的原型是 Object.prototype
  3. 示例

    const obj = {};
    console.log(obj.toString()); // 来自 Object.prototype
    console.log(obj.hasOwnProperty("toString")); // false(属于原型链)
    

三、关键特性

  1. 属性查找规则

    • 优先查找对象自身的属性,若不存在则沿原型链向上查找。
    • 修改对象自身的属性会直接覆盖原型链中的同名属性。
  2. 原型链的继承

    • 通过修改原型对象,可以实现类似“继承”的效果。例如:
      function Animal() {}
      Animal.prototype.eat = function() { console.log("Eating..."); };function Dog() {}
      Dog.prototype = Object.create(Animal.prototype); // Dog 的原型链继承 Animal
      Dog.prototype.bark = function() { console.log("Woof!"); };const dog = new Dog();
      dog.eat(); // 继承自动物原型
      dog.bark(); // 自身方法
      
  3. 原型链的终点

    • Object.prototype.__proto__ 的值为 null,表示原型链的结束。

四、相关方法

  1. isPrototypeOf()
    检查一个对象是否是另一个对象的原型:

    console.log(Animal.prototype.isPrototypeOf(dog)); // true
    
  2. hasOwnProperty()
    判断属性是否是对象自身的属性(而非原型链中的属性):

    console.log(dog.hasOwnProperty("bark")); // true
    
  3. Object.getPrototypeOf()
    获取对象的原型(ES6 方法,替代 __proto__):

    console.log(Object.getPrototypeOf(dog) === Dog.prototype); // true
    

五、注意事项

  • 避免原型链过长:过长的原型链会影响属性查找性能。
  • 原型与实例的动态关联:修改原型对象会影响所有后续创建的实例,但已存在的实例不会受影响。
  • class 语法糖:ES6 的 class 本质上仍基于原型链,只是语法糖简化了实现。

总结

  • 原型是对象共享属性和方法的基础。
  • 原型链通过 __proto__ 连接对象,实现属性的继承和查找。
  • 理解原型链有助于掌握 JavaScript 的核心机制(如继承、多态),并避免常见错误。

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

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

相关文章

2.2.3 TCP—UDP-QUIC

文章目录 2.2.3 TCP—UDP-QUIC1. TCP如何做到可靠性传输1. ACK机制2. 重传机制3. 序号机制4. 窗口机制5. 流量机制6. 带宽机制 2. tcp和udp如何选择1. tcp和udp格式对比2. ARQ协议(Automatic Repeat reQuest,自动重传请求)1. ARQ协议的主要类…

【动手实验】TCP 连接的建立与关闭抓包分析

本文是基于知识星球程序员踩坑案例分享中的作业进行的复现和总结,借此加深对 TCP 协议的理解, 原文参见TCP 连接的建立和关闭 —— 强烈建议新手看看。 实验环境 这里使用两台位于同一子网的腾讯云服务器,IP 分别是 node2(172.1…

视频理解之Actionclip(论文宏观解读)

配合解读代码解读 1.研究背景 1. 视频行为识别的重要性 视频行为识别是视频理解领域的核心任务之一,旨在通过分析视频内容来识别和分类其中的人物行为或活动。这一任务在多个领域具有重要的应用价值,例如智能监控、人机交互、自动驾驶、医疗健康等。随…

基于LabVIEW的脚本化子VI动态生成

该示例展示了一种利用LabVIEW VI脚本(VI Scripting)技术,通过程序化方式动态生成并替换子VI的解决方案。核心逻辑为:基于预定义的模板VI,根据用户选择的数学操作(加法或乘法),自动生…

Debian系统grub新增启动项

参考链接 给grub添加自定义启动项_linux grub定制 启动项名称自定义-CSDN博客 www.cnblogs.com 1. boot里面的grub.cfg 使用vim打开boot里面的grub.cfg sudo vim /boot/grub/grub.cfg 这时候会看到文件最上方的提示 2. 真正配置grub的文件 从刚才看到的文件提示中&#x…

ctfhub-web-SSRF通过攻略

1.URL Bypass 打开题目 请求的URL中必须包含http://notfound.ctfhub.com,使用来绕过即可 /?urlhttp://notfound.ctfhub.com127.0.0.1/flag.php 成功获得flag 2.数字IP Bypass 开启题目 发现127以及172被过滤了 尝试别的绕过 127.0.0.1–>localhost 127.0…

C语言(23)

字符串函数 11.strstr函数 1.1函数介绍: 头文件:string.h char *strstr ( const char * str1,const char *str2); 作用:在一个字符串(str1)中寻找另外一个字符串(str2)是否出现过 如果找到…

uniapp+Vue3 组件之间的传值方法

一、父子传值&#xff08;props / $emit 、ref / $refs&#xff09; 1、props / $emit 父组件通过 props 向子组件传递数据&#xff0c;子组件通过 $emit 触发事件向父组件传递数据。 父组件&#xff1a; // 父组件中<template><view class"container">…

晨控CK-FR08与汇川H5U系列PLC配置EtherNet/IP通讯连接手册

晨控CK-FR08与汇川H5U系列PLC配置EtherNet/IP通讯连接手册 晨控CK-FR08系列作为晨控智能工业级别RFID读写器,支持大部分工业协议如RS232、RS485、以太网。支持工业协议Modbus RTU、Modbus TCP、Profinet、EtherNet/lP、EtherCat以及自由协议TCP/IP等。 本期主题&#xff1a;围…

BLDC直流无刷电机转速电流双闭环调速MATLAB仿真

微♥&#xff1a;“电击小子程高兴的MATLAB小屋”获取巨额优惠 1.模型简介 本仿真模型基于MATLAB/Simulink&#xff08;版本MATLAB 2017Ra&#xff09;软件。建议采用matlab2017 Ra及以上版本打开。&#xff08;若需要其他版本可联系代为转换&#xff09; 2.仿真算法&#x…

Windows 11下Git Bash执行cURL脚本400问题、CMD/PowerShell不能执行多行文本等问题记录及解决方案

问题 在Postman里可成功执行的POST请求&#xff1a; 找到Postman的Code 因为cURL基本上算是行业标准&#xff0c;所以Postman默认选中cURL&#xff0c;支持切换不同的开发语言&#xff1a; 点击上图右上角的复制按钮&#xff0c;得到cURL脚本。 Windows 11家庭版&#xff…

4个 Vue 路由实现的过程

大家好&#xff0c;我是大澈&#xff01;一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员&#x1f468;&#x1f3fb;‍&#x1f4bb;&#xff0c;关注我&#xff0c;科技未来或许我能帮到你&#xff01; Vue 路由相信朋友们用的都很熟了&#xff0c;但是你知道 Vue 路由…

es-索引详解

在 Elasticsearch 中&#xff0c;**索引&#xff08;Index&#xff09;**是核心概念之一&#xff0c;类似于关系型数据库中的“表”。索引用于存储、组织和检索文档&#xff08;Document&#xff09;。以下是关于 Elasticsearch 索引的详细解析&#xff1a; 1. 索引的基本概念 …

C#实现本地Deepseek模型及其他模型的对话v1.4

前言 系 统&#xff1a;Window11 开发工具&#xff1a;Visual Studio 2022 相关技术&#xff1a;C# 、WPF .Net 8.0 1、C#实现本地AI聊天功能 WPFOllamaSharpe实现本地聊天功能,可以选择使用Deepseek 及其他模型。 新增根据聊天记录回复的功能。 优化了部分ViewModel&#xff…

若依框架-给sys_user表添加新字段并获取当前登录用户的该字段值

目录 添加字段 修改SysUser类 修改SysUserMapper.xml 修改user.js 前端获取字段值 添加字段 若依框架的sys_user表是没有age字段的&#xff0c;但由于业务需求&#xff0c;我需要新添加一个age字段&#xff1a; 修改SysUser类 添加age字段后&#xff0c;要在SysUser类 …

用Qt手搓AI助手,挑战24小时开发DeepSeek Assistant!

一、项目需求分析与技术选型 DeepSeekAssistant是一款基于深度求索&#xff08;DeepSeek&#xff09;API的智能对话助手&#xff0c;核心需求包括&#xff1a; 用户界面友好&#xff1a;支持多轮对话展示数据持久化&#xff1a;历史记录存储与检索异步网络通信&#xff1a;AP…

linux 软件扩展GPU显存

概述 共享内存可以通过 Unified Memory&#xff08;统一内存&#xff09;来实现&#xff0c;它允许 CPU 和 GPU 共享相同的内存地址空间&#xff0c;从而方便数据的传输和访问。 利用该技术可解决家用GPU 机器学习时显存不足的问题 &#xff08;注&#xff1a; 虽然解决了爆显…

Linux——进程初步

学进程前我们需要知道什么&#xff1f; 一、冯诺依曼体系结构 图中就是我们电脑运作时的大致工作流程&#xff0c;其中输入设备、输出设备我们也叫外设。其中&#xff0c;输入设备有比如键盘、鼠标、磁盘、摄像头等。输出设备有显示器、磁盘、打印机等。图中的存储器我们也叫内…

LeetCode-122. 买卖股票的最佳时机 II

其实这题画个折线图就很清晰了&#xff0c;因为我们每天都可以买卖股票&#xff0c;所有我们就只计算上升趋势的股票收益就好了&#xff0c;最小刻度为1&#xff0c;进行差值计算&#xff0c;取总和。 var maxProfit function(prices){let sum0;for(let i1;i<prices.leng…

关于前后端整合和打包成exe文件的个人的总结和思考

前言 感觉有很多东西&#xff0c;不知道写什么&#xff0c;随便写点吧。 正文 前后端合并 就不说怎么开发的&#xff0c;就说点个人感觉重要的东西。 前端用ReactViteaxios随便写一个demo&#xff0c;用于CRUD。 后端用Django REST Framework。 设置前端打包 import { …