前端 JS 经典:原型和原型链

1. 前言

这个前言很重要,要理解原型、原型链,就需要理解前言里面的一些定义。开始!

所有对象都是通过 new 一个函数去创建的,而这个函数通常首字母大写,被称为构造函数。我们也可以通过自定义构造函数,去 new 一个对象。平时,我们通过语法糖直接赋值对象,但他本质是通过 new Object 来创建对象的。数组同理。函数也同理,但是不推荐通过 new Function 去创建函数。

所有的函数也是对象,包括构造函数,本质是通过 new Function 创建,那 Function 又是怎么来的呢,是直接放到内存里面的,就是 JS 引擎启动的时候,直接将 Function 放入内存中。不通过任何东西来创建。

所有对象都是引用类型,什么是引用类型呢,就是保存的是地址,赋值的也是地址,它们是引用传递。

// 创建对象
let obj = { name: "yqcoder" };
// 本质如下
let obj = new Object({name: "yqcoder",
});// 创建数组
let arr = [1, 2, 3];
// 本质如下
let arr = new Array(1, 2, 3);// 创建函数
let fn = function (str) {return str;
};
// 本质如下,不建议这样去创建
let fn = new Function("str", "return str");// 自定义构造函数创建对象
let Person = function (name, age) {this.name = name;this.age = age;
};
let yq = new Person("yqcoder", 18);
console.log(yq); // {name: 'yqcoder', age: 18}

2. 原型 prototype

所有函数都有一个属性 prototype,称之为函数原型。默认情况下,prototype 是一个对象,所以 prototype 是通过 new Object 创建的。而这个 prototype 对象里面默认有一个 constructor 属性,它也是一个对象,它指向构造函数本身。

let fn = function () {};
fn.prototype.constructor == fn; // true

3. 隐式原型 __proto__

所有对象都有一个属性 __proto__,称之为隐式原型。默认情况下,隐式原型指向创建该对象的函数的原型。

let Person = function (name, age) {this.name = name;this.age = age;
};
let yq = new Person("yqcoder", 18);yq.__proto__ === Person.prototype; // true

通过同一个构造函数产生的对象,它们有一块内存空间是公用的,哪一块空间共用呢,就是它们的隐式原型指向的内存空间是共用的。换句话说,就是它们的构造函数的原型是共用的。构造函数里共用的方法,一般写在 prototype 里,这样构建的对象,生成的方法是指向同一个地址的,节约了内存空间。同时还可以使用 this,谁调用这个方法,这个 this 就指向谁。效果如下:

// 构造函数 Person
let Person = function (name, age) {this.name = name;this.age = age;
};
Person.prototype.sayHello = function () {console.log(`${this.name} say hello`);
};let user1 = new Person("yy", 18);
let user2 = new Person("qq", 18);
user1.__proto__.sayHello == user2.__proto__.sayHello; // trueuser1.sayHello(); // yy say hello
user2.sayHello(); // qq say hello

4. 原型链

什么叫原型链,就是每一个对象都有隐式原型 __proto__,隐式原型的指向就形成了一个链条,可以称之为原型链。而 Function 的__proto__指向自身的原型。前言说过 Function 的特殊。Object 的 prototype 的__proto__指向 null。

当访问一个对象的成员时,访问步骤:先访问对象自身是否拥有该成员,如果有,直接使用,如果没有,再看该对象的隐式原型上有没有该成员,如果有直接使用。如果也没有,在原型链中依次查找。如上例子,为什么 user1 可以访问 sayHello,因为在隐式原型中有 sayHello。所以可以访问。

如下例子:先在自身找 sex,没有,然后在 yq.__proto__ 里找,因为 yq.__proto__ == Person.prototype,所以也没有,再在 Person.prototype.__proto__ 里找,因为 Person.prototype.__proto__ == Object.prototype,还是没有,最后在 Object.prototype.__proto__ 里找,因为 Object.prototype.__proto__ == null,所以 yq.sex == undefined;

let Person = function (name, age) {this.name = name;this.age = age;
};
let yq = new Person("yq", 18);
yq.sex; // undefined

5. 猴子补丁

什么叫猴子补丁,就是在函数原型中加入成员,以增强其对象的功能,但是猴子补丁会导致原型污染,所以使用需谨慎。

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

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

相关文章

Largest Digit(思维题)

The 2023 ICPC Asia Jinan Regional Contest (The 2nd Universal Cup. Stage 17: Jinan) D. Largest Digit 题意: 设 f ( x ) f(x) f(x) 是正整数 x x x 的十进制表示中的最大位数。例如, f ( 4523 ) 5 f(4523) 5 f(4523)5 和 f ( 1001 ) 1 f(1…

深度学习入门到放弃系列 - 阿里云人工智能平台PAI部署开源大模型chatglm3

通过深度学习入门到放弃系列 - 魔搭社区完成开源大模型部署调用 ,大概掌握了开源模型的部署调用,但是魔搭社区有一个弊端,关闭实例后数据基本上就丢了,本地的电脑无法满足大模型的配置,就需要去租用一些高性价比的GPU机…

空格探究 空格ASCII码值不一样

背景 今天修改数据库字段发现修改无效,最后发现是空格引起的,数据库中空格有一些奇怪的空格 获取ASCII码,发现不一样 public static void main(String[] args) {String str1 " ";String str2 " ";System.out.println((int)str1.charAt(0) );//13228Syste…

神经网络中的误差反向传播(Backpropagation)方法理解

想象一下,神经网络就像是一个复杂的迷宫,里面有许多交叉路口(神经元),每个路口都有指示牌告诉你往哪个方向走(权重),而你的目标是找到从入口到出口的最佳路径,使得从起点…

优选算法——双指针2

题目一——有效三角形的个数 思路 先审题 举个例子,下面一个序列可分成4个三元组 然后我们论证哪个可以组成三角形即可 判断三个数能不能组成三角形:任意两边之和大于第三边 注意第一个和第四个,有人说,这不是两个相同的吗&#…

原生小程序开发如何使用 tailwindcss

原生小程序开发如何使用 tailwindcss 原生小程序开发如何使用 tailwindcss 前言什么是 weapp-tailwindcss ?0. 准备环境以及小程序项目1. 安装与配置 tailwindcss 0. 使用包管理器安装 tailwindcss1. 在项目目录下创建 postcss.config.js 并注册 tailwindcss2. 配置 tailwind…

python中try/except/else/finally块的一些例子

Python中的try/except/else/finally块可以用来捕获和处理异常,确保程序的健壮性。以下是一些使用这些块的例子: ### 基本异常捕获 python try: # 尝试读取文件 with open(example.txt, r) as file: data file.read() except FileNotF…

【强训笔记】day22

NO.1 思路&#xff1a;将情况全部枚举出来。 代码实现&#xff1a; #include <iostream> #include<string> using namespace std;string a,b; int main() {cin>>a>>b;int ma.size(),nb.size();int retm;for(int i0;i<n-m;i){int tmp0;for(int j…

【UnityShader入门精要学习笔记】第十二章 屏幕后处理效果

本系列为作者学习UnityShader入门精要而作的笔记&#xff0c;内容将包括&#xff1a; 书本中句子照抄 个人批注项目源码一堆新手会犯的错误潜在的太监断更&#xff0c;有始无终 我的GitHub仓库 总之适用于同样开始学习Shader的同学们进行有取舍的参考。 文章目录 建立一个基…

如何在Python中加载机器学习数据

如何在Python中加载机器学习数据 在开始机器学习项目之前&#xff0c;您必须能够加载数据。 机器学习数据最常见的格式是CSV文件。在Python中加载CSV文件的方法有很多。 加载CSV数据时的注意事项 1.你的数据有文件头吗&#xff1f;如果是这样的话&#xff0c;这可以帮助自动…

上位机图像处理和嵌入式模块部署(树莓派4b的提高版)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 目前人工智能非常火&#xff0c;但是人工智能需要极高的算力和海量的数据&#xff0c;因此相关的关联公司非常吃香&#xff0c;nvidia就是提供算力…

【基本数据结构】链表

文章目录 前言链表简介头节点与尾节点特性 分类单向链表双向链表循环链表 单链表基本操作定义并初始化单链表读取节点插入节点删除节点修改节点 参考资料写在最后 前言 本系列专注更新基本数据结构&#xff0c;现有以下文章&#xff1a; 【算法与数据结构】数组. 【算法与数…

互联网搞钱大变天,这有几条活路

互联网搞钱大变天&#xff0c;这有几条活路 靠互联网营生的各位同胞&#xff0c;你们有没有想过这样一个问题&#xff1a;假如有一天你的自媒体账号全被封了&#xff0c;你手上的操作项目全都黄了&#xff0c;你会怎么办&#xff1f; 就封号这事在这几年相信大家都不会陌生&a…

【LLM第五篇】名词解释:prompt

1.是什么 提示工程&#xff08;Prompt Engineering&#xff09;是一门较新的学科&#xff0c;关注提示词开发和优化&#xff0c;帮助用户将大语言模型&#xff08;Large Language Model, LLM&#xff09;用于各场景和研究领域。 掌握了提示工程相关技能将有助于用户更好地了解…

深入了解 npm:Node.js 包管理工具详解

文章目录 一、npm 基本概念1.1 什么是 npm&#xff1f;1.2 package.json 文件 二、npm 常用命令2.1 初始化项目2.2 安装依赖2.2.1 安装单个包2.2.2 全局安装包2.2.3 安装开发依赖 2.3 移除依赖2.4 更新依赖2.5 查看已安装的包2.6 发布包 三、npm 高级用法3.1 使用 npm scripts3…

JETBRAINS IDES 分享一个2099通用试用码!CLion 2024 版 ,支持一键升级

文章目录 废话不多说上教程&#xff1a;&#xff08;动画教程 图文教程&#xff09;一、动画教程激活 与 升级&#xff08;至最新版本&#xff09; 二、图文教程 &#xff08;推荐&#xff09;Stage 1.下载安装 toolbox-app&#xff08;全家桶管理工具&#xff09;Stage 2 : 下…

nestJs中跨库查询

app.module.ts中配置 模块的module中 注意实体类在写的时候和数据库中的表名一样 service中使用一下

【JS】call和 apply函数的详解

JavaScript 中 call() 和 apply() 函数的详解 在JavaScript中&#xff0c;call()和apply()都是非常重要的方法&#xff0c;用于调用函数时指定函数体内的this的值&#xff0c;从而实现不同对象之间的方法共享。尽管它们的功能非常相似&#xff0c;但在实际使用中各有其优势和特…

生产环境磁盘变更方案

datanode磁盘扩容(1人天) 扩容磁盘 1.1 扩容前检查、新盘初始化 确定block副本统计正常,无丢块,无under-replicated 块 后台执行命令检查 hdfs dfs fsck / 无异常可进行以下步骤进行磁盘扩容 新盘初始化 ##格式化新盘,命令示例: mkfs.xfs /dev/sdc##挂载新盘,命令示…

【AI学习】聊两句昨夜OpenAI的GPT-4o

蹭个热点&#xff0c;聊两句昨夜的大事件——OpenAI发布GPT-4o&#xff0c;我看到和想到的一点东西。 首先是端到端方法&#xff0c;前面关于深度学习的文章&#xff0c;对端到端的重要性做了一些学习&#xff0c;对端到端这个概念有了一些理解。正如Richard Sutton在《苦涩的…