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.结构体概念 结构体可以用来构建更复杂的数据结…

Rust入门实战 编写Minecraft启动器#3解析资源配置

首发于Enaium的个人博客 在上一篇文章中,我们已经建立了资源模型,接下来我们需要解析游戏的配置文件。 首先我们添加serde_json依赖和model依赖。 model { path "../model" } serde_json "1.0"之后我们在lib.rs中添加解析的tra…

用户画像与相关性分析揭示麦当劳满意度提升关键

1.项目背景 在当今的餐饮行业中,顾客满意度已成为衡量服务质量和市场竞争力的关键指标,准确了解并提升顾客满意度,对于麦当劳制定有效的营销策略和优化产品服务至关重要。通过深入分析影响顾客满意度的主要因素,可以帮助麦当劳更好地理解顾客行为,从而制定更有针对性的策…

springmvc前端jsp与html

在Spring MVC框架中,前端页面既可以使用JSP(JavaServer Pages)也可以使用HTML,具体使用哪一种或哪几种技术,主要取决于项目的需求、团队的熟悉度以及项目的可维护性等因素。下面分别介绍这两种技术的使用场景和优缺点&…

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

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

事件mousePressEvent、paintEvent、closeEvent、keyPressEvent】

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

C++ 11 智能指针使用详解

文章目录 C++ 11 智能指针使用详解一、智能指针的介绍1. `std::unique_ptr`2. `std::shared_ptr`3. `std::weak_ptr`二、智能指针的基本使用方法1. 创建和初始化智能指针使用 `std::unique_ptr`:使用 `std::shared_ptr`:2. 访问指针指向的对象使用 `std::unique_ptr`:使用 `…

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

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

供应MT7628AN芯片现货

长期供应各品牌芯片现货: MT7628AN VC7920-11 QM77043 QM78207 QM77043 SD18-0847R8UUB1 QM78207 QPF4588TR13-5K D5DA782M0K2J6 SAYRH725MBA0B0A QM56023TR13-5K D5DA737M5K2H2 HS8443-61 RF5422 QM56021TR13-5K S55643-11 OM8816-61…

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

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

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

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

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

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

远程Linux机器图形化界面使用及音频转发

对于一些远程Linux云机器,一般我们在使用时通过各种ssh连接工具连接,并使用命令行方式操作,但是部分需要图形化界面验证的应用,必须需要使用到远程机器的图形化功能,本文记录总结一些跟远程使用Linux机器图形化界面以及…

27_电子电路设计基础

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

MySQL8之mysql-community-server的作用

MySQL8之mysql-community-server的作用主要体现在以下几个方面: 1. 提供开源的MySQL数据库服务 mysql-community-server是MySQL的一个开源版本,它是MySQL AB在2000年推出并由Oracle公司维护和管理的一个关系型数据库系统。这个服务器软件支持多种类型的…

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

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

相机光学(二十八)——感光度(ISO)

感光度又称为ISO,是指相机对光线的敏感程度。ISO值越大,感光度越高,拍出来的照片就会越亮,反之就会越暗。但是ISO过高会使照片噪点也随之变高。感光度,又称为ISO值,是衡量底片对于光的灵敏程度,…

22. Java ReentrantLock 使用

1. 前言 本节内容主要是对 ReentrantLock 的使用进行讲解,之前对于 Lock 接口进行了讲解,ReentrantLock 是 Lock 接口的常用实现子类,占据着十分重要的地位。本节内容的知识点如下: ReentrantLock 基本方法的使用,即 lock 与 unlock 方法的使用,这是最基础的方法使用,为…

Python 修改 pip 源

1.临时换源: #清华源 pip install markdown -i https://pypi.tuna.tsinghua.edu.cn/simple # 阿里源 pip install markdown -i https://mirrors.aliyun.com/pypi/simple/ # 腾讯源 pip install markdown -i http://mirrors.cloud.tencent.com/pypi/simple # 豆瓣源 …

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的…