前端面试题-JavaScriptl原型,原型链?有什么特点?(2024.2.2)

一、先理解下构造函数,实例对象 (看代码的打印结果和解释)

 构造函数(Constructor)的 prototype 属性: 当你创建一个函数时,JavaScript 会自动为该函数创建一个 prototype 属性。这个 prototype 属性是一个对象,它包含可以由该构造函数创建的所有实例共享的属性和方法。

对象的 __proto__ 属性: 每个对象都有一个 __proto__ 属性,它指向该对象的原型。当你访问一个对象的属性时,JavaScript 引擎会首先查找对象本身是否有这个属性,如果没有,就会去查找对象的原型(通过 __proto__ 找到原型对象),以此类推,直到找到该属性或到达原型链的末尾。

// 构造函数
function Person(name) {this.name = name;
}// 通过构造函数创建对象
var person1 = new Person('Alice');// person1 的原型是 Person 构造函数的 prototype 属性
console.log(person1.__proto__ === Person.prototype); // 输出: true// Person 构造函数的 prototype 的原型是 Object 构造函数的 prototype
console.log(Person.prototype.__proto__ === Object.prototype); // 输出: true// Object 构造函数的 prototype 的原型是 null,这是原型链的终点
console.log(Object.prototype.__proto__ === null); // 输出: true
  • __proto__ 是访问原型的非标准方法,它通常被称为“隐式原型”。
  • 在现代 JavaScript 中,你应该使用 Object.getPrototypeOf()Object.create() 等方法来访问和设置原型。

二、原型、原型链 

  1. 原型(prototype)

    • 每个 JavaScript 对象都有一个原型对象,它是一个指向另一个对象的引用。
    • 原型对象可以包含属性和方法,它们可以被对象实例继承。
    • 在 JavaScript 中,对象实例可以通过 Object.prototype 访问到它的原型对象。
  2. 原型链(prototype chain)

    • 当访问一个对象的属性或方法时,JavaScript 引擎会先查找该对象本身是否具有这个属性或方法。如果没有,它会继续查找对象的原型对象,以此类推,直到找到该属性或方法,或者达到原型链的顶端(即 Object.prototype)。
    • 这种对象之间通过原型链连接起来的结构被称为原型链。
  3. 特点

    • 继承关系:原型链实现了对象之间的继承关系,允许对象实例继承原型对象的属性和方法。
    • 动态性:可以在运行时动态地改变和扩展对象的原型。这意味着你可以在程序执行过程中修改对象的原型,对所有继承自该原型的对象都会产生影响。
    • 原型和实例之间的关系:对象实例与它的原型之间存在连接,通过 __proto__ 属性(不建议直接使用,可以使用 Object.getPrototypeOfObject.setPrototypeOf)可以访问到实例的原型对象。
// 示例
function Animal(name) {this.name = name;
}// 创建 Animal 的实例
const cat = new Animal('Cat');// 演示原型链
console.log(cat.hasOwnProperty('name'));  // true,实例本身有 name 属性
console.log(cat.hasOwnProperty('toString'));  // false,toString 是从原型链继承而来的
console.log('toString' in cat);  // true,toString 是在原型链上找到的console.log(Object.getPrototypeOf(cat) === Animal.prototype);  // true,实例的原型是 Animal.prototype
console.log(Animal.prototype.isPrototypeOf(cat));  // true,Animal.prototype 是 cat 的原型

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

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

相关文章

半桥式三相无刷直流电动机不同导通角的性能的变化

半桥式三相无刷直流电动机不同导通角的性能的变化 syms Omega clear clcOmega0pi/180*120 for Omega_x[pi/180*120,pi/180*130,pi/180*140,pi/180*150,pi/180*160,pi/180*170,pi/180*180]Omega_x*180/piOmega_x_0 (4*sin(Omega_x/2)/(Omega_xsin(Omega_x)))/(4*sin(Omega0/2)/…

2024美赛D题全保姆教程 代码思路

2024 ICM Problem D: Great Lakes Water Problem (最佳水位问题)题目要求 国际联合委员会(IJC)要求贵公司国际网络控制建模公司(ICM)提供支持,以协助管理和建模直接影响五大湖流量网络水位的控制机制(两座…

使用gcc/g++查看C语言预处理,编译,汇编,连接,以及动静态库的区分

文章目录 使用gcc/ggcc如何完成编译后生成可执行文件?预处理(进行宏替换)编译(生成汇编)汇编(生成机器可识别代码)连接(生成可执行文件或库文件)最后记忆小技巧 在这里涉及到一个重要的概念&…

[css] 让文字进行竖着 分散对齐

.demo2 {width: 60px;background-color: aqua;height: 200px;display: grid;place-items: center;}参考: css 让文字进行竖着书写, 附带个小知识,行内块元素添加文字之后底部对不齐的问题

iOS 集成 Flutter Module

集成步骤 # Flutter flutter_application_path ./flutter_module_test/ load File.join(flutter_application_path, .ios, Flutter, podhelper.rb)target IntegrateFlutter douse_frameworks!# Flutterinstall_all_flutter_pods(flutter_application_path)end在主项目根目录下…

数据可视化市场概览:五款主流工具的优缺点解析

在数据可视化的世界中,选择一款合适的工具对于提升工作效率和洞察力至关重要。本文将为您介绍五款主流数据可视化工具,包括山海鲸可视化、Echarts、D3.js、Tableau和Power BI,并进行详细比较,帮助您做出明智的选择。 山海鲸可视化…

HCIP-Datacom(H12-821)41-50题解析

有需要完整题库的同学可以私信博主,博主看到会回复将文件发给你!(麻烦各位同学给博主推文点赞关注和收藏哦) 41.IEEE802.1Q定义的TPID的值为多少? A.0x8200 B.0x7200 C.0x9100 D.0x8100 解析:TCP/IP网…

九、Qt图表使用

一、QCharts概述 Qt图表提供了:折线图、样条曲线图、面积图、散点图、条形图、饼图、方块胡须图、蜡烛图、极坐标图。1、QChart介绍 Qt Charts基于Qt的QGraphics View架构,其核心组件是QChartView和QChartQChartView是显示图标的视图,基类为…

vue动态修改侧边菜单栏宽度

1.添加可修改宽度的dom元素 <div style"background: #f5f7fa;padding: 20px 10px;"><label>菜单宽度 </label><el-input v-model"sideWidth" placeholder"请输入宽度值" style"width: 100px"/> px<el-but…

【C++】题目:数字分组问题

1.题目描述 小明的数学计算能力超强&#xff0c;常常在同学们面前表面得很骄傲。数学科代表实在看不下去了&#xff0c;决定出道很麻烦的题&#xff0c;好好“折磨”他一下。 数学科代表决定给他一些数&#xff0c;让他分组。从第一个数开始分组&#xff0c;且每组必须是连续的…

什么样的软件,可以搜大学题?解决难题不费神,尽在大学搜题工具! #媒体#其他

学会运用各类学习辅助工具和资料&#xff0c;是大学生培养自主学习能力和信息获取能力的重要途径之一。 1.千鸟搜题 这个是公众号 涵盖往年成人各类考试&#xff0c;题库有建筑类、金融类、医药卫生类、公考类、安全生产类、特种作业类等试题 下方附上一些测试的试题及答案 …

代码随想录刷题第23天

今天是二叉树的终章&#xff0c;不知不觉已经刷题23天了&#xff0c;先给自己点个赞&#x1f604;&#x1f44d; 第一题是修剪二叉搜索树&#xff0c;要注意修剪时被删除节点的子树可能符合要求&#xff0c;因此还需向下遍历。最后用root->left与right接住返回值。 迭代法先…

【Python】一个简单的小案例:实现批量修改图片格式

1.代码 import os from tkinter import Tk, Button from PIL import Imagedef check_and_create_folders():# 获取当前目录current_directory os.getcwd()# 定义文件夹名称folders_to_check ["JPG", "PNG"]for folder_name in folders_to_check:folder_…

Springboot集成Camunda并完成一条流程实例

&#x1f496;专栏简介 ✔️本专栏将从Camunda(卡蒙达) 7中的关键概念到实现中国式工作流相关功能。 ✔️文章中只包含演示核心代码及测试数据&#xff0c;完整代码可查看作者的开源项目snail-camunda ✔️请给snail-camunda 点颗星吧&#x1f618; &#x1f496;设计流程定…

Python 生成图片验证码

图片验证码&#xff08;CAPTCHA&#xff09;是一种区分用户是计算机还是人的公共全自动程序。这种验证码通常以图片的形式出现&#xff0c;其中包含一些扭曲的字符或对象&#xff0c;用户需要识别这些字符或对象并输入正确的答案以通过验证。 通常情况下&#xff0c;图片验证码…

网络攻防模拟与城市安全演练 | 图扑数字孪生

在数字化浪潮的推动下&#xff0c;网络攻防模拟和城市安全演练成为维护社会稳定的不可或缺的环节。基于数字孪生技术我们能够在虚拟环境中进行高度真实的网络攻防模拟&#xff0c;为安全专业人员提供实战经验&#xff0c;从而提升应对网络威胁的能力。同时&#xff0c;在城市安…

linux免密登录的实现

ssh免密登录使用方便&#xff0c;关键没有了口令验证反倒规避了暴力破解或者被探测的风险。配置得当&#xff0c;使用ssh免密登录更加安全。在生产环境中应用和数据库服务器之间互相设置后使用方便&#xff0c;并且在第三方人员配置使用时不用告知对方密码。 第一步、ssh登录发…

区块链赋能编程:开启数字世界的新篇章

区块链&#xff0c;一种去中心化、分布式账本技术&#xff0c;正在以其独特的优势&#xff0c;为编程领域带来新的变革。 编程与区块链的结合 编程是构建数字世界的基础&#xff0c;而区块链则为数字世界提供了一种更加安全、可靠的信任机制。将两者结合&#xff0c;可以创造…

OpenJudge7084迷宫问题

迷宫问题 题目背景 定义一个二维数组&#xff1a; int maze[5][5] {0, 1, 0, 0, 0,0, 1, 0, 1, 0,0, 0, 0, 0, 0,0, 1, 1, 1, 0,0, 0, 0, 1, 0, };题目描述 它表示一个迷宫&#xff0c;其中的1表示墙壁&#xff0c;0表示可以走的路&#xff0c;只能横着走或竖着走&#xf…

【Vue3】源码探索之旅:compiler-core之parseChildren函数(二)

简言 parseChildren函数是在baseParse函数中作为createRoot函数的子节点参数传入的&#xff0c;今天来探索下parseChildren函数。 parseChildren在 compiler-core/src/parse.ts文件内。 parseChildren 这个函数就是用来解析模板字符串内容的 &#xff0c;里面有个while循环…