JavaScript 原型链那些事

在讲原型之前我们先来了解一下函数。

在JS中,函数的本质就是对象,它与其他对象不同的是,创建它的构造函数与创建其他对象的构造函数不一样。那产生函数对象的构造函数是什么呢?是一个叫做Function的特殊函数,通过newFunction 产生的对象就是一个函数。

function f1() {}
//上面的函数等同于:
var f1 = new Function();function sum(a, b) {return a + b;
}
//上面的函数等同于:
var sum = new Function("a", "b", "return a + b");//前面的是函数形参名,最后一个参数是函数体

当一个函数被创建后,这个函数就会自动附带一个属性prototype,它就是一个Object对象,代表着函数的原型。也就是说prototype就是原型对象。
原型对象中包含两个属性:constructor和__proto__。constructor这个属性是指创建原型的函数,它指向函数本身。所以有以下关系:
在这里插入图片描述

var Person = function () { };
var p = new Person();    

看这个 new 究竟做了什么?

我们把 new 的过程拆分成以下三步:

  1. var p={}; 也就是说,初始化一个对象p。

  2. p.proto=Person.prototype;

  3. Person.call§;也就是说构造p,也可以称之为初始化p。

总结原型链的工作原理:

1. 原型对象:在JavaScript中,对象可以有一个原型对象,该对象本身也是一个对象。对象的原型对象通过内部属性[[Prototype]]来引用,这个属性在ES5可以通过Object.getPrototypeOf()或__proto__(非标准但被广泛实现的属性)访问。

2. 属性查找:当访问一个对象的属性时,如果该属性在对象自身上不存在,JavaScript 引擎会沿着[[Prototype]]链向上查找,直到找到该属性或到达链的末端。

3. 构造函数的prototype属性:每个函数都有一个prototype属性,指向一个对象,这个对象是使用该构造函数创建的所有实例的原型。

4. 原型链的末端:所有原型链最终都指向Object.prototype,这是内置的Object构造函数的prototype属性。Object.prototype的原型是null,表示原型链的结束。

代码示例:

示例1:原型链的基础

function Person(name) {this.name = name;
}// 为Person构造函数的prototype添加一个方法
Person.prototype.sayHello = function() {console.log("Hello, my name is " + this.name);
};// 创建Person的实例
var person = new Person("Alice");// 调用原型链上的方法
person.sayHello(); // 输出: Hello, my name is Alice// 查看person的原型
console.log(Object.getPrototypeOf(person) === Person.prototype); // 输出: true

示例2:原型链的继承

// 假设我们有一个Animal构造函数
function Animal(species) {this.species = species;
}Animal.prototype.eat = function() {console.log("Animal eats.");
};// Person构造函数继承自Animal
Person.prototype = Object.create(Animal.prototype);
Person.prototype.constructor = Person; // 修复Person实例的constructor属性// 创建Person的实例
var person = new Person("Alice");// 继承自Animal的方法
person.eat(); // 输出: Animal eats.// Person的原型链
console.log(person.__proto__ === Person.prototype); // 输出: true
console.log(person.__proto__.__proto__ === Animal.prototype); // 输出: true
console.log(person.__proto__.__proto__.__proto__ === Object.prototype); // 输出: true

示例3:原型链的查找过程

var myObject = {sayHi: function() {console.log("Hi!");}
};var childObject = Object.create(myObject);
childObject.name = "Child";// 调用原型链上的方法
childObject.sayHi(); // 输出: Hi!// 原型链的属性查找
console.log(childObject.hasOwnProperty('sayHi')); // 输出: false
console.log(childObject.hasOwnProperty('name')); // 输出: true

最后有关原型链的注意问题:

  • 原型链的修改:可以在任何时候修改对象的原型,但要注意这可能会影响所有继承自该原型的对象。
  • 性能问题:原型链的深度不宜过长,否则可能会影响属性访问的性能。
  • 构造函数的选择:使用构造函数、Object.create()或其他工厂模式时,要明确原型链的设置。
  • __proto__属性:__proto__属性是特定于某些JavaScript引擎的实现,并非ECMAScript标准的一部分。使用Object.getPrototypeOf()和Object.setPrototypeOf()是更标准和可移植的方法。

原型链,你理解了吗?

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

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

相关文章

单片机软件架构连载(4)-结构体

枚举、指针、结构体,我愿称为C语言"三板斧"。 用人话来讲,几乎所有c语言高阶编程,都离不开这这3个知识点的应用。 今天站在实际产品常用的角度,给大家讲一下结构体。 1.结构体概念 结构体可以用来构建更复杂的数据结…

中霖教育怎么样?二建继续教育什么意思?

1. 为什么要继续教育? 根据现行规定,二级建设师在获取资格证书后,若时间超过三年无论是否已进行注册,均需参加继续教育。此举旨在确保专业技术人员能够不断更新和补充其专业知识与技能,进而提升其创新能力、创造能力以及专业技术…

事件mousePressEvent、paintEvent、closeEvent、keyPressEvent】

事件 mousePressEvent、paintEvent、closeEvent、keyPressEvent 鼠标样式的设置 按WSAD通过keyPressEvent事件移动按钮 通过事件mousePressEvent获取鼠标位置的相对位置,绝对位置 cusor 鼠标样式设置成十字星 .h #ifndef DEFAULTHANDLEREXAMPLE_H #define DEFAUL…

GANs算法简介、学习步骤及具体实现

生成对抗网络(Generative Adversarial Networks,GANs)自从2014年由Ian Goodfellow等人提出以来,已经成为深度学习领域中最活跃的研究方向之一。GAN的基本思想是利用两个神经网络——生成器(Generator)和判别…

做好私域服务就是赢得用户的心

私域流量的概念在当今的商业环境中已经变得极为重要,许多品牌和企业都投入大量资源尝试通过各种策略吸引并保留用户。然而,单纯的流量积累并不足以确保商业成功。当面对用户的沉默、缺乏活跃度以及无法变现的困境时,我们必须重新审视私域流量…

Perforce发布白皮书,解读电动汽车初创公司如何加速进入市场并降低软件开发中的风险和成本

电动汽车(EV)领域的初创企业正迅速崛起,创新速度显著加快。然而,随着消费者对电动汽车需求的激增,老牌汽车制造商正加速进军这一市场,加剧了行业竞争。为在竞争中生存并发展,电动汽车初创企业必…

硬盘错误0x80071ac3如何修复?5大免费修复法,轻松找回硬盘数据

今天我们要聊的是一个让大家头疼不已的问题——硬盘错误0x80071ac3。你是否也曾经遇到过这个烦人的错误代码,导致数据无法读取、文件丢失,甚至整个硬盘都无法正常使用?别担心今天小编就为大家详细解析这个错误的原因,并分享5个免费…

27_电子电路设计基础

电路设计 电路板的设计 电路板的设计主要分三个步骤:设计电路原理图、生成网络表、设计印制电路板。 (1)设计电路原理图:将元器件按逻辑关系用导线连接起来。设计原理图的元件来源是“原理图库”,除了元件库外还可以由用户自己增加建立新的元件&#…

WAIC | 2024年世界人工智能大会“数学与人工智能”学术会议成功举办!

由斯梅尔数学与计算研究院(Smale Institue of Mathematics & Computation)主办的2024年世界人工智能大会(WAIC)“数学与人工智能”学术会议7月4日在上海世博中心圆满落幕!作为全球性高级别学术研讨会,此次会议由华院计算技术&…

html+js+css练手小项目

文章目录 练手小项目前言1.多轮播图1.1 效果展示1.2 实现思路1.2.1 三张轮播图1.2.2 左侧轮播图 1.2.3 右侧轮播图1.2.4 整体结合 2.图片变色2.1 效果展示2.2 实现 练手小项目 ☀️作者简介:大家好我是言不及行yyds 🐋个人主页:言不及行yyds的…

字节码编程javassist之打印方法耗时和入参

写在前面 本文看下如何实现打印方法耗时和入参。 1:程序 需要增强的类: public class ApiTest1 {public Integer strToInt(String str01, String str02) {return Integer.parseInt(str01);}}插桩类 package com.dahuyou.javassist.huohuo.aa;import…

tableau条形图绘制 - 2

tableau条形图绘制 1. 条形图绘制-11.1 创建工作表1.2 修改工作表名称1.3 条形图绘制1.4 显示标签1.5 行列转换 2. 条形图绘制-22.1 新建工作表2.2 修改工作表名称2.3 条形图绘制2.4 价格度量选平均值2.5 标签度量选平均值2.6 升序,整个视图显示2.7 行列转换 3. 堆积…

模型训练结果可视化

📚博客主页:knighthood2001 ✨公众号:认知up吧 (目前正在带领大家一起提升认知,感兴趣可以来围观一下) 🎃知识星球:【认知up吧|成长|副业】介绍 ❤️如遇文章付费,可先看…

AntDesign上传组件upload二次封装+全局上传hook使用

文章目录 前言a-upload组件二次封装1. 功能分析2. 代码详细注释3. 使用到的全局上传hook代码4. 使用方式5. 效果展示 总结 前言 在项目中,ant-design是我们常用的UI库之一,今天就来二次封装常用的组件a-upload批量上传组件,让它用起来更方便。 a-uploa…

Spring Cloud: Nacos配置中心与注册中心的使用

一、配置中心(配置管理) 配置中心是一种集中化管理配置的服务。它的主要作用包括集中管理配置信息,将不同服务的配置信息集中存储和管理;支持动态更新配置,通过操作界面或 API 无需重启服务即可应用最新配置信息;实现配置信息共享…

如何解决亚马逊环境技术问题?自养号测评助力下单成功率飙升

在构建针对测评任务的环境系统时,确保系统的稳定性和操作成功率至关重要。面对市场上纷繁复杂的解决方案,如虚拟机、模拟器、GCS服务、云手机及VPS等,虽选择众多,但往往伴随着高昂成本与低成功率的挑战。因此,构建一个…

数据库课设---酒店管理系统(MySQL、VBNet)

目录 一. 知识技术 二. 需求分析 2.1 功能需求 2.2 数据需求 三. 数据流图与数据字典 3.1 数据流图 3.1.1 业务流图 3.1.2 数据流图 3.1.3 关系图 3.2 数据字典 四. 数据库设计 4.1 概念模型设计 4.2 逻辑模型设计 4.3 数据库实现 …

网络规划与设计————期末复习

一、选择题(每题1分) 1、光纤线组建的标准以太网是______。 A.10BASE-5 B.10BASE-2 C.10BASE-T D.10BASE-F 其实也很好记,光纤的英文是 "Fiber Optic",双绞线的英文是 "Twisted Pair"。 5呢…

苹果电脑压缩软件哪个好用一些? mac电脑用什么压缩软件 mac电脑压缩文件怎么设置密码

压缩软件是Mac电脑必不可少的工具,虽然Mac系统自带了一款“归档实用工具”,但是其功能实在匮乏,若你需要加密压缩文件或者把文件压缩成指定格式,那么该工具无法满足你的需求。Mac用户应该怎么选择压缩软件呢?本文就来告…

股票数据分析(K线图、均值图、MACD图、RSI图)--股票日数据

数据 数据是上证指数日行情数据,股票代码000002.sz,原始数据shdata示例如下: 读取数据: import numpy as np import pandas as pd import mplfinance as mpf import matplotlib.pyplot as plt from datetime import datetime imp…