js原型链prototype解释

news2025/7/16 19:00:26

function Person(){}
var person=new Person() 
console.log('======啊啊',Person instanceof Function);//true
console.log('======',Person.__proto__==Function.prototype);//true
console.log('======',Person.prototype.__proto__ === Object.prototype);//true
console.log('======',Function.prototype.__proto__==Object.prototype);//true
var arr=[]
console.log('======',arr.__proto__==Array.prototype);//true
console.log('======',Array.prototype.__proto__==Object.prototype);//true
function Animal() {}
Animal.prototype.eat = function() { console.log("Eating...") };

function Dog() {}
Dog.prototype = new Animal(); // Dog 继承 Animal
Dog.prototype.bark = function() { console.log("Bark!") };

const myDog = new Dog();
console.log('======',myDog.__proto__.__proto__=== Animal.prototype);//true

上述代码都是true 

理解 JavaScript 中的​​原型链(Prototype Chain)​​是掌握其面向对象编程的核心。原型链的本质是通过对象的隐式原型([[Prototype]],即 __proto__)连接形成的链式结构,用于实现属性和方法的继承。以下是逐步解析:


一、原型链的核心机制

  1. ​每个对象都有一个隐式原型(__proto__)​
    在 JavaScript 中,几乎所有对象(包括函数)都有一个 __proto__ 属性,指向它的构造函数的 prototype 对象。

  2. ​构造函数的 prototype 属性​
    每个函数在创建时会自动生成一个 prototype 属性,它是一个对象,其中默认包含 constructor 属性指向函数自身。例如:

    function Person() {}
    console.log(Person.prototype.constructor === Person); // true

    3.​​实例的原型链形成​
    当通过 new 创建实例时,实例的 __proto__ 会指向构造函数的 prototype 对象:

const person = new Person();
console.log(person.__proto__ === Person.prototype); // true

 ​​4.链式继承​
如果构造函数的 prototype 本身也有 __proto__,则会继续向上查找,直到 Object.prototype,最终指向 null

console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

原型链的层级关系

function Animal() {}
Animal.prototype.eat = function() { console.log("Eating...") };

function Dog() {}
Dog.prototype = new Animal(); // Dog 继承 Animal
Dog.prototype.bark = function() { console.log("Bark!") };

const myDog = new Dog();

// 原型链层级:
// myDog → Dog.prototype → Animal.prototype → Object.prototype → null
  • myDog 可以访问 bark(来自 Dog.prototype)和 eat(来自 Animal.prototype)。
  • 所有对象最终继承自 Object.prototype,因此 myDog.toString() 可用。

 

 

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

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

相关文章

【知识】性能优化和内存优化的主要方向

转载请注明出处:小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你,欢迎[点赞、收藏、关注]哦~ 前言 现在有很多论文,乍一看很高级,实际上一搜全是现有技术的堆砌,但是这种裁缝式的论文依然能发表在很好的会议和期…

VS Code + GitHub:高效开发工作流指南

目录 一、安装 & 基本配置 1.下载 VS Code 2.安装推荐插件(打开侧边栏 Extensions) 3.设置中文界面(可选) 二、使用 VS Code 操作 Git/GitHub 1.基本 Git 操作(不输命令行!) 2.连接 GitHub(第一次使用) 三、克隆远程仓库到 VS Code 方法一(推荐): 方…

软件测试之接口测试常见面试

一、什么是(软件)接口测试? 接口测试:是测试系统组件间接口的一种测试方法 接口测试的重点:检查数据的交换,数据传递的正确性,以及接口间的逻辑依赖关系 接口测试的意义:在较早期开展,在软件开发的同时…

11、Refs:直接操控元素——React 19 DOM操作秘籍

一、元素操控的魔法本质 "Refs是巫师与麻瓜世界的连接通道,让开发者能像操控魔杖般精准控制DOM元素!"魔杖工坊的奥利凡德先生轻抚着魔杖,React/Vue的refs能量在杖尖跃动。 ——以神秘事务司的量子纠缠理论为基,揭示DOM…

uniapp-商城-33-shop 布局搜索页面以及u-search

shop页面上有一个搜索&#xff0c;可以进行商品搜索&#xff0c;这里我们先做一个页面布局&#xff0c;后面再来进行数据i联动。 1、shop页面的搜索 2、搜索的页面代码 <navigator class"searchView" url"/pagesub/pageshop/search/search"> …

【dataframe显示不全问题】打开一个行列超多的excel转成df之后行列显示不全

出现问题如下图&#xff1a; 解决方案&#xff5e; display.width解决列显示不全 pd.set_option(display.max_columns,1000) pd.set_option(display.width, 1000) pd.set_option(display.max_colwidth,1000) pd.set_option(display.max_rows,1000)

Windows下Golang与Nuxt项目宝塔部署指南

在Windows下将Golang后端和Nuxt前端项目打包&#xff0c;并使用宝塔面板部署的步骤如下 一、Golang后端打包 交叉编译为Linux可执行文件 在Windows PowerShell中执行&#xff1a; powershell复制下载 $env:GOOS "linux" $env:GOARCH "amd64" go build…

真实趋势策略思路

该交易策略通过一系列技术指标的计算与逻辑判断&#xff0c;旨在捕捉市场趋势的反转与延续点&#xff0c;以实现盈利。其主要交易逻辑思路可以概括如下&#xff1a; 1. 趋势与动量分析 策略首先利用动量函数计算收盘价的短期&#xff08;3周期&#xff09;变化&#xff0c;通过…

江奇霖惊喜亮相泡泡岛音乐节,新歌首唱+合作舞台燃动现场

2025年4月20日&#xff0c;江奇霖受邀参加2025泡泡岛音乐与艺术节东南站。现场献唱三首歌曲&#xff0c;超5万名观众现场一同感受音乐的魅力。 在泡泡岛SPECIAL SET特别企划舞台中&#xff0c;江奇霖带来新歌的首唱&#xff0c;温暖的旋律如低语倾诉&#xff0c;观众们也纷纷喊…

【HarmonyOS】ArKUI框架

目录 概述 声明式开发范式 基于ArKUI的项目 • 1&#xff0e;创建资源文件 • 2&#xff0e;引用资源 • 3&#xff0e;引用系统资源&#xff1a; • 系统资源有哪些 • 4. 在配置和资源中引用资源 声明式语法 UI描述规范 UI组件概述 组件化 组件渲染控制语法 修改…

计算机网络八股——HTTP协议与HTTPS协议

目录 HTTP1.1简述与特性 1. 报文清晰易读 2. 灵活和易于扩展 3. ⽆状态 Cookie和Session 4. 明⽂传输、不安全 HTTP协议发展过程 HTTP/1.1的不足 HTTP/2.0 HTTP/3.0 HTTPS协议 HTTP协议和HTTPS协议的区别 HTTPS中的加密方式 HTTPS中建立连接的方式 前言&#xff…

webpack基础使用了解(入口、出口、插件、加载器、优化、别名、打包模式、环境变量、代码分割等)

目录 1、webpack简介2、简单示例3、入口(entry)和输出(output)4、自动生成html文件5、打包css代码6、优化&#xff08;单独提取css代码&#xff09;7、优化&#xff08;压缩过程&#xff09;8、打包less代码9、打包图片10、搭建开发环境&#xff08;webpack-dev-server&#xf…

微信小程序 van-dropdown-menu

点击其他按钮&#xff0c;关闭van-dropdown-menu下拉框 DropdownMenu 引入页面使用index.wxmlindex.scssindex.ts(重点)index.ts(全部) DropdownMenu 引入 在app.json或index.json中引入组件 "usingComponents": {"van-dropdown-menu": "vant/weapp…

智驱未来:AI大模型重构数据治理新范式

第一章 数据治理的进化之路 1.1 传统数据治理的困境 在制造业巨头西门子的案例中&#xff0c;其全球200个工厂每天产生1.2PB工业数据&#xff0c;传统人工清洗需要300名工程师耗时72小时完成&#xff0c;错误率高达15%。数据孤岛问题导致供应链决策延迟平均达48小时。 1.2 A…

C++ 蓄水池抽样算法

&#xff08;1&#xff09;概念 蓄水池抽样算法&#xff08;Reservoir Sampling&#xff09;是一种用于从 大规模数据集&#xff08;尤其是 流式数据 或 无法预先知晓数据总量 的场景&#xff09;中 等概率随机抽取固定数量样本 的算法。 &#xff08;2&#xff09;实现 我们…

分布式光纤测温技术让森林火灾预警快人一步

2025年春季&#xff0c;多地接连发生森林火灾&#xff0c;累计过火面积超 3万公顷。春季历来是森林草原火灾易发、多发期&#xff0c;加之清明节已到来&#xff0c;生产生活用火活跃&#xff0c;民俗祭祀用火集中&#xff0c;森林火灾风险进一步加大。森林防火&#xff0c;人人…

Vue2 el-checkbox 虚拟滚动解决多选框全选卡顿问题 - 高性能处理大数据量选项列表

一、背景 在我们开发项目中&#xff0c;经常会遇到需要展示大量选项的多选框场景&#xff0c;比如权限配置、数据筛选等。当选项数量达到几百甚至上千条时&#xff0c;传统的渲染方式全选时会非常卡顿&#xff0c;导致性能问题。本篇文章&#xff0c;记录我使用通过虚拟滚动实现…

KUKA机器人KR 3 D1200 HM介绍

KUKA KR 3 D1200 HM是一款小型机器人&#xff0c;型号中HM代表“Hygienic Machine&#xff08;卫生机械&#xff09;用于主副食品行业”&#xff0c;也是一款并联机器人。用于执行高速、高精度的抓取任务。这款机器人采用食品级不锈钢设计&#xff0c;额定负载为3公斤&#xff…

【MATLAB第117期】#源码分享 | 基于MATLAB的SSM状态空间模型多元时间序列预测方法(多输入单输出)

【MATLAB第117期】#源码分享 | 基于MATLAB的SSM状态空间模型多元时间序列预测方法&#xff08;多输入单输出&#xff09; 引言 本文使用状态空间模型实现失业率递归预测&#xff0c;状态空间模型&#xff08;State Space Model, SSM&#xff09;是一种用于描述动态系统行为的…

【Linux】线程ID、线程管理、与线程互斥

&#x1f4da; 博主的专栏 &#x1f427; Linux | &#x1f5a5;️ C | &#x1f4ca; 数据结构 | &#x1f4a1;C 算法 | &#x1f310; C 语言 上篇文章&#xff1a; 【Linux】线程&#xff1a;从原理到实战&#xff0c;全面掌握多线程编程&#xff01;-CSDN博客 下…