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.xdnf.cn/news/1474249.html

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

相关文章

数据库、创建表、修改表

一、数据库 1、登陆数据库 2、创建数据库zoo 3、修改数据库zoo字符集为gbk 4、选择当前数据库为zoo 5、查看创建数据库zoo信息 6、删除数据库zoo 二、创建表 1、创建一个名称为db_system的数据库 2、在该数据库下创建两张表,具体要求如下 员工表 user…

VMware虚拟机配置桥接网络

转载:虚拟机桥接网络配置 一、VMware三种网络连接方式 VMware提供了三种网络连接方式,VMnet0, VMnet1, Vmnet8,分别代表桥接,Host-only及NAT模式。在VMware的编辑-虚拟网络编辑器可看到对应三种连接方式的设置(如下图…

【JVM系列】Full GC(完全垃圾回收)的原因及分析

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

【C++ OpenCV】机器视觉-二值图像和灰度图像的膨胀、腐蚀、开运算、闭运算

原图 结果图 //包含头文件 #include <opencv2/opencv.hpp>//命名空间 using namespace cv; using namespace std;//全局函数声明部分//我的腐蚀运算 Mat Erode(Mat src, Mat Mask, uint32_t x0, uint32_t y0) {uint32_t x 0, y 0;Mat dst(src.rows, src.cols, CV_8U…

MySQL:保护数据库

保护数据库 1. 用户1.1 创建用户1.2 查看用户1.3 删除用户1.4 修改密码 2. 权限2.1 授予权限2.2 查看权限2.3 撤销权限 之前都是介绍本地数据库而你自己就是数据库的唯一用户&#xff0c;所以不必考虑安全问题。但实际业务中数据库大多放在服务器里&#xff0c;你必须妥善处理好…

001,函数指针是一种特殊的指针,它指向的是一个函数地址,可以存储函数并作为参数传递,也可以用于动态绑定和回调函数

函数指针是一种特殊的指针 001&#xff0c;函数指针是一种特殊的指针&#xff0c;它指向的是一个函数地址&#xff0c;可以存储函数并作为参数传递&#xff0c;也可以用于动态绑定和回调函数 文章目录 函数指针是一种特殊的指针前言总结 前言 这是ai回答的标准答案 下面我们…

set的应用(C++)

set的使用 【基本用法】 大家可以敲一下这段代码体会一下set的基本初始化和使用 #include <iostream> #include <set> #include <vector> using namespace std;int main() {set<int> st1; // 空的set// 使用迭代器构造string str("abcdef"…

element-ui输入框如何实现回显的多选样式?

废话不多说直接上效果&#x1f9d0; 效果图 <template><div><el-form:model"params"ref"queryForm"size"small":inline"true"label-width"68px"><el-form-item label"标签" prop"tag&q…

常用SQL语句(基础篇)

前言 查询的sql的结构是 select...from...where...group by...having...order by...limit... 写查询sql的时候需要按照如下顺序写 from&#xff0c;where&#xff08;and&#xff0c;or&#xff0c;&#xff01;&#xff09;&#xff0c;group by&#xff0c;select&#xf…

如何在忘记密码的情况下解锁Android手机?

您的 Android 设备密码有助于保护您的数据并防止您的个人信息被滥用。但是&#xff0c;如果您被锁定在Android设备之外怎么办&#xff1f;我们知道忘记您的 Android 手机密码是多么令人沮丧&#xff0c;因为它会导致您的设备和数据无法访问。在本技术指南中&#xff0c;我们将向…

CSRF靶场通关合集

目录 前言 CSRF漏洞总结 1.PiKachu靶场 1.1CSRF(get) 1.2 CSRF(post)请求 1.3 CSRF Token 2.DVWA靶场 难度低 难度中 难度高 前言 最近系统的将从web渗透到内网渗透的知识点做一个回顾,同时结合一些实战的案例来演示,下面是对刚开始学习时对靶场的一个总结. CSRF漏洞…

快手大模型首次集体亮相 获《焦点访谈》报道关注

7月6日,2024世界人工智能大会暨人工智能全球治理高级别会议在上海闭幕。 据央视《焦点访谈》报道,今年的大会展览持续扩容升级,展览规模、参展企业数、亮点展品数、首发新品数均创历史新高。大会聚焦大模型、算力、机器人、自动驾驶等重点领域,集中展示了一批“人工智能”创新…

流程表单设计器开源优势多 助力实现流程化!

实现流程化办公是很多职场企业的发展目标。应用什么样的软件可以实现这一目的&#xff1f;低代码技术平台、流程表单设计器开源的优势特点多&#xff0c;在推动企业降本增效、流程化办公的过程中作用明显&#xff0c;是理想的软件平台。那么&#xff0c;流程表单设计器开源的优…

开发个人Go-ChatGPT--5 模型管理 (二)

开发个人Go-ChatGPT–5 模型管理 (二) ChatGPT 这是该项目的最终效果&#xff0c;使用ollama的open-webui进行人与机器的对话功能&#xff0c;对话的后端服务则完全对接自己开发的Go项目。 如何实现呢&#xff1f;则通过这篇文章&#xff0c;一一给大家剖析后端的原理及功能…

Apache Seata配置管理原理解析

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Apache Seata配置管理原理解析 说到Seata中的配置管理&#xff0c;大家可能会想到Seata中适配…

c++ word转换为pdf

在windows系统下&#xff0c;使用QAxObject效果是最好的 转60多兆的文件速度还是可以的&#xff0c;不建议使用多线程&#xff0c;因为多线程会多次调用转换函数&#xff0c;导致程序一直运行&#xff0c;只有全部转换完成后&#xff0c;程序才能继续向下运行&#xff0c;但是c…

dependencyManagement的作用、nacos的学习

使用SpringCloudAlibaba注意各组件的版本适配 SpringCloudAlibaba已经包含了适配的各组件&#xff08;nacos、MQ等&#xff09;的版本号&#xff0c;也是一个版本仲裁者&#xff0c;但是可能已经有了父项目Spring-Boot-Starter-Parent这个版本仲裁者&#xff0c;又不能加多个父…

three.js实现3D模型任意方向旋转

因为业务需要&#xff0c;我们在公司官网使用Three.js实现了可鼠标拖动任意旋转的3D旋转模型&#xff0c;可是实现之后发现除了Z轴方向都可以任意旋转&#xff0c;但是Z轴方向最多只能旋转180度。找遍全网也没有找到相关的资料来解释错在了哪一步&#xff0c;最终还是在github仓…

IT之家最新科技热点 | 小米 AI 研究院开创多模态通用模型

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

hive表小练习

-- 将对应的命令写在每个步骤中 -- 1.在hive中创建数据库school create database if not exists school; -- 2.在数据库school中创建如下的表 每张表的列分隔符都是, 存储格式是textfile 创建表名为student_info, 字段为stu_id 类型为string,注释为学生id 字段为stu_name 类…