补环境基础(一) 原型与原型链

1.创建对象的几种方式

1.对象字面量模式

直接使用{}定义键值对:

const obj = { key: 'value' };  

2.Object()构造函数模式

使用内置构造函数(较少使用):

const person = new Object();
console.log(person)//输出 {}

3.构造函数模式

通过函数模拟类,结合new关键字创建实例:

function Person(name) { this.name = name; }  
const person = new Person('John');  
console.log(person)//输出{name:"join"}

2.原型与原型链

1.构造函数

实例有一个属性constructor指向构造函数,实例拥有构造函数内部定义的属性和方法,构造函数相当于一个模板蓝图

function User(){this.age = 18this.login = function (){console.log("登录成功")}
}
user1 = new User()
user1 = new User()
console.log(user1.age) //18
console.log(user1.constructor == user2.constructor) //true

2.显式原型

在js中,函数对象有一个特殊的属性叫做显式原型(prototype),它指向另一个对象,这个对象(User.prototype)被称为原型对象

原型对象是用来共享属性和方法

我们可以看下面的代码

  • 在构造函数内部定义方法
function User(){this.age = 18this.login = function (){console.log("登录成功")}
}
user1 = new User()
user2 = new User()
console.log(user1)// { age: 18, login: [Function (anonymous)] }
console.log(user1.age == user2.age) //true  
console.log(user1.login == user2.login) //false 因为指向了不同内存地址

每个实例在堆内存中都有自己独立的方法。上面代码中,创建2个实例就会创建2个login方法。

  • 在原型上定义方法
function User(){this.age = 18}
User.prototype.login = function(){ console.log("登录成功")}
user1 = new User()
user2 = new User()
console.log(user1)//{ age: 18 }
console.log(user1.login == user2.login)//true
console.log(user1.login())//登录成功

创建出来的实例对象上本身并没有login方法

这个login方法在内存中只存在一份,它被分配在堆内存中,并且挂载到User.prototype这个对象上,如果在当前对象中没有获取到就会去它的原型上面获取。

  • 二者比较
特性定义在原型上 User.prototype.login= function()定义在构造函数内部 this.login = function()
方法存储位置原型对象(仅存一份)每个实例独立存储(每次new都创建新函数)
内存占用✅ 极低 (1000个实例共享1个方法)❌ 爆炸式增长 (1000个实例创建1000个独立方法)

3.隐式原型

在js中,每个对象(除Object.create(null) 创建外)都有一个__proto__属性(左右两个短下划线),这个被称为隐式原型,

隐式原型是js中所有对象的核心继承机制,直接决定了原型链的运作方式,__proto__存在的意义在于为原型链查找提供方向。隐式原型指向该对象的构造函数原型对象(即User.prototype)但通过 Object.create() 创建的对象会直接指向参数对象

1.通过构造函数创建的实例对象,实例对象的隐式原型指向构造函数的显式原型

function User(){this.age = 18}
User.prototype.login = function(){ console.log("登录成功")}
user1 = new User()
console.log(user.__proto__ == User.prototype)//true

2.通过Object.create()创建的实例对象,隐式原型指向参数对象

const animal = { type: 'unknown' };
// 参数对象 = animal
const dog = Object.create(animal); 
// dog.__proto__ 直接指向 animal(而非默认的 Object.prototype)
console.log(dog.type);            // 'unknown' ✅
console.log(dog.__proto__ === animal); // true ✅
  • 通过手动设置的原型实现继承

我们知道,从一个对象上获取属性,如果在当前对象中没有获取到就会去它的原型上面获取:

//user1.__proto__ = User.prototype  
var obj1 = {age:"18"}
var obj = {name:"john"};
obj.__proto__ = obj1
console.log(obj.name)//john
console.log(obj.age)//"18"

构造函数 、实例、原型对象之间的关系图

在这里插入图片描述

4.原型链

原型链(Prototype Chain)是JavaScript中实现继承的机制。

每个对象都有一个原型(__proto__属性),而原型本身也是一个对象,它也有自己的原型,这样一层一层形成的链式结构就是原型链。当访问一个对象的属性或方法时,如果对象自身没有该属性,就会沿着原型链向上查找,直到找到该属性或到达原型链的顶端(null)为止。

function Person() {}
const p = new Person();// 原型链验证
console.log(p.__proto__ == Person.prototype); // L1 true
console.log(Person.prototype.__proto__ == Object.prototype);// L2 true
console.log(Object.prototype.__proto__ == null); // L3  true

原型继承关系图

注:图中涉及到的部分知识点文中未提及

3.结语

本文旨在简单的理解原型和原型链来对抗环境检测还原关键加密逻辑,实际场景中网站会通过检测原生对象原型链来判断是否处于浏览器环境。

比如某网站会检查navigator.plugins的原型链长度判断是否爬虫;

用自定义Error对象,捕获错误后检查stack属性是否包含原生Error原型的方法名等等;

如需进一步理解原型链可参考文章:
参考文章

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

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

相关文章

Qt+yolov8目标识别

这是一个基于ONNX Runtime的YOLOv8目标检测项目,支持CPU和GPU加速,使用Qt框架构建图形化界面。摄像头实时画面识别视频文件识别,能正常识别目标:红绿灯,人,公交,巴士,摩托车 等YOLOv…

NLP分词notes

BPE 贪心提取所有出现频率高的成为词。 BPE的训练流程 1.初始化:将所有单个字符作为初始词汇表的元素。 2.迭代合并: 统计语料中所有相邻符号对(包括字符和合并后的符号)的出现频率。找到出现频率最高的符号对,将其合并…

【数据结构】栈和队列-----数据结构中的双生花

文章目录[toc]栈与队列:数据结构中的双生花1. 栈:后进先出的有序世界1.1 概念及结构剖析1.2 实现方式深度解析数组 vs 链表实现1.3 动态栈实现详解(附程序源码)1.定义一个动态栈2.初始化3.销毁4.入栈5.出栈6.取栈顶数据7.判空8.获…

Mybatis-2快速入门

学习主线 必学必会属于优化的东西。 快速入门需求说明 要求:开发一个MyBatis项目,通过MyBatis的方式可以完成对monster表的crud操作 1.创建mybatis数据库-monster表 主键Primary Key默认非空Not null,就省略了 create database mybatis us…

Web基础 -java操作数据库

一、JDBCJDBC&#xff1a;&#xff08;Java DataBase Connectivity&#xff09;&#xff0c;就是使用Java语言操作关系型数据库的一套API。为了使用JDBC操作数据库&#xff0c;首先&#xff0c;我们需要在pom.xml文件中引入依赖<dependencies><!-- MySQL JDBC driver …

cell2location复现

https://github.com/BayraktarLab/cell2location/issues/348 根据你已下载的本地 wheel 文件&#xff0c;可以通过以下方式修改安装命令&#xff0c;优先从本地路径安装 jaxlib&#xff0c;同时保持其他依赖的安装方式不变&#xff1a; 解决方案 # 安装 jax (从远程 PyPI 源) p…

什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景?

什么是 npm、Yarn、pnpm? 有什么区别? 分别适应什么场景? 在前端开发中&#xff0c;包管理工具扮演着非常重要的角色。它们帮助开发者高效地管理项目的依赖&#xff0c;确保项目中所需的所有第三方库和工具都能按时安装&#xff0c;并且兼容版本。npm、Yarn 和 pnpm 是三款…

深度隐匿源IP:高防+群联AI云防护防绕过实战

隐蔽性挑战 黑客常通过以下手段绕过基础防护&#xff1a; HTTPS证书嗅探&#xff1a;访问 https://源站IP&#xff0c;通过证书域名匹配暴露真实IP历史解析记录追踪&#xff1a;从DNS数据库获取旧A记录CDN缓存渗透&#xff1a;利用边缘节点回源漏洞定位源站 三重防护方案 高防I…

如何加快golang编译速度

跟着我的步骤来&#xff1a;第一步&#xff1a;(点击edit)第二步&#xff1a;将go tool arguments设置为-p4&#xff0c;初始值设为4&#xff0c; 代表最多同时编译4个包&#xff08;非文件&#xff09;。电脑性能好时&#xff0c;可设为CPU最大核心数&#xff08;充分利用多核…

浏览器自动化方案

B端后台列表页自动新增素材方案 我设计了一套完整的浏览器自动化方案&#xff0c;使用 Puppeteer 实现B端后台列表页的自动新增素材功能。该方案包含数据组织、浏览器操作、错误处理等完整流程。 一、技术选型 浏览器自动化工具&#xff1a;Puppeteer (https://pptr.dev)任务调…

MPPT电路设计

反激的具体计算过程要写好起码要一天&#xff0c;所以本次先更MPPT。这章不计算具体参数&#xff0c;只做分析。 目录 一、电路作用 二、电路设计 采样电路和输入电路 主体电路 驱动电路 一、电路作用 MPPT电路是一种广泛应用于光伏发电、风力发电等新能源系统中的关键电…

【基于飞浆训练车牌识别模型】

基于飞浆训练车牌识别模型 基于飞浆训练车牌识别模型 LPRNet&#xff08;License Plate Recognition via Deep Neural Networks&#xff09;是一种轻量级卷积神经网络&#xff0c;专为端到端车牌识别设计&#xff0c;由Intel IOTG Computer Vision Group的Sergey Zherzdev于201…

No module named ‘sklearn‘

1、运行python数据分析库时报错 No module named sklearn2、原因 虚拟环境未安装 sklearn 库&#xff08;即 scikit-learn&#xff09;。 3、解决方案 pip install scikit-learn使用国内镜像源&#xff1a; pip install scikit-learn -i https://mirrors.aliyun.com/pypi/simpl…

XPath注入攻击详解:原理、危害与防御

什么是XPath注入&#xff1f; XPath注入&#xff08;XPath Injection&#xff09;是一种针对使用XPath查询语言的应用程序的安全攻击技术&#xff0c;类似于SQL注入。当应用程序使用用户提供的输入来构造XPath查询而没有进行适当的过滤或转义时&#xff0c;攻击者可以通过构造恶…

网络编程(套接字)

目录 一、套接字 1、套接字的作用 2、关于TCP和UDP协议 1. TCP协议 2. UDP协议 3. 两者的区别 2、套接字函数 1&#xff09;函数 socket&#xff08;创建套接字同文件描述符&#xff09; 2&#xff09;准备套接字用结构体 1. 套接字的结构体 2. 客户端的套接字&…

R语言安装包

# 在安装过程中指定源地址 install.packages("RCurl", repos "https://mirrors.tuna.tsinghua.edu.cn/CRAN/") # 查看当前镜像 options()$repos # 设置为中科大镜像 options("repos" c(CRAN"https://mirrors.ustc.edu.cn/CRAN/")…

微服务引擎 MSE 及云原生 API 网关 2025 年 5 月产品动态

点击此处&#xff0c;了解微服务引擎 MSE 产品详情。

性能测试过程中监控linux服务器资源情况

文章目录1. cpu使用情况&#xff08;1&#xff09;性能瓶颈类型CPU密集型瓶颈​​I/O或等待瓶颈​&#xff08;2&#xff09;资源分配与竞争​资源争用分析​虚拟化环境资源分配​&#xff08;3&#xff09;系统稳定性与异常​​异常波动与毛刺​​过热降频影响​&#xff08;4…

使用defineExpose暴露子组件的属性和方法、页面生命周期onLoad和onReady的使用

欢迎来到我的UniApp技术专栏&#xff01;&#x1f389; 在这里&#xff0c;我将与大家分享关于UniApp开发的实用技巧、最佳实践和项目经验。 专栏特色&#xff1a; &#x1f4f1; 跨平台开发一站式解决方案 &#x1f680; 从入门到精通的完整学习路径 &#x1f4a1; 实战项目经…

新手必看!VSCodePyCharm 配置 OpenCV 超详细教程(支持 Python 和 C++ 双语言)

新手必看&#xff01;VSCode&PyCharm 配置 OpenCV 超详细教程&#xff08;支持 Python 和 C 双语言&#xff09; 适用对象&#xff1a;初学者&#xff0c;希望在 VSCode 与 PyCharm 两款常用 IDE 中&#xff0c;学会配置并使用 OpenCV&#xff0c;分别实现 Python 与 C 环境…