后盾人JS -- 原型

没有原型的对象

也有没有原型的对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let xj = {name:"向军"}console.log(xj)console.log(xj.hasOwnProperty("name"))//完全数据字典对象let hd = Object.create(null,{name:{value:"后盾人"}}) console.log(hd.hasOwnProperty("name"))</script>
</body>
</html>

原型和对象优先级

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {show(){console.log("后盾人")}}hd.__proto__.render = function(){}hd.render()</script>
</body>
</html>

函数有多个长辈

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>console.log(User)User.prototype.show = function(){console.log("后盾人")}let hd = new User()console.log(User.prototype == hd.__proto__)console.log(hd)function User(){}User.__proto__.view = function(){console.log('User function view method')}
</script>
</body>
</html>

原型关系详解与属性继承实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = new Object()hd.name = "后盾人"Object.prototype.show= function(){console.log("houdunren")}function User(){}console.dir(User)console.log(User.prototype.__proto__ == User.__proto__.__proto__)console.dir(Object.prototype)</script>
</body>
</html>

系统构造函数的原型体现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {}    //Objectconsole.log(hd.__proto__ == Object.prototype)let arr = []console.log(arr.__proto__ == Array.prototype)let str = ""console.log(str.__proto__ == String.prototype)</script>
</body>
</html>

自定义对象的原型设置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {name:"hd"}let parent = {name:"parent",show(){console.log('partent method' + this.name)}} Object.setPrototypeOf(hd,parent)    //认爹console.log(Object.getPrototypeOf(hd))</script>
</body>
</html>

原型中的constructor引用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function User(name){this.name = name}console.dir(User)console.log(User.prototype.__proto__)console.log(User.prototype.constructor == User)let lisi = new User.prototype.constructor("李四")console.log(lisi)</script>
</body>
</html>

对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>function User(name){this.name = namethis.show = function(){console.log(this.name)}}let hd = new User("后盾人")console.log(hd)function createByObject(obj,...args){const constructor = Object.getPrototypeOf(obj).constructorreturn new constructor(...args)}let xj = createByObject(hd,"向军")xj.show()
</script>
</body>
</html>

原型链检测

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let a = {}let b = {}console.log(b.__proto__.isPrototypeOf(a))Object.setPrototypeOf(a,b)      //b是a爹console.log(b.isPrototypeOf(a))</script>
</body>
</html>

属性检测差异

修改 Object.prototype 会对所有对象产生影响，因为所有对象都继承自 Object.prototype

 

 in会检测当前对象和原型链

hasOwnProperty只检测当前对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let a = {url:"houdunren"}let b = {name:"后盾人"}console.log("url" in a)Object.prototype.web = "hdcms.com"console.log("web" in a)Object.setPrototypeOf(a,b)console.log("name" in  a)console.log(a.hasOwnProperty("url"))</script>
</body>
</html>

借用原型链

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {data:[1,2,3,4,5]}Object.setPrototypeOf(hd,{max(){return this.data.sort((a,b)=>b-a)[0]}})console.log(hd.max())let xj = {lessons:{js:87,php:63,node:99,linux:88},get data(){return Object.values(this.lessons)}}console.log(hd.max.apply(xj))</script>
</body>
</html>

优化方法借用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {data:[1,2,3,4,5]}console.log(Math.max.call(null,...hd.data))let xj = {lessons:{js:87,php:63,node:99,linux:88},}console.log(Math.max.apply(null,Object.values(xj.lessons)))</script>
</body>
</html>

DOM结点借用Array原型方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button message="后盾人" class="red">后盾人</button><button message="hdcms">hdcms</button><script>let arr = [1,3,43]let res = arr.filter(item => {return item > 39})console.log(arr.filter)console.log(res)let btns = document.querySelectorAll("button")console.log(btns.filter)btns = Array.prototype.filter.call(btns,item=>{return item.hasAttribute("class")})console.log(btns[0].innerHTML)</script>
</body>
</html>

this和原型没关系

this和原型是没有关系的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = {name:"后盾人",show(){console.log(this.name)}}let User = {name:'向军'}Object.setPrototypeOf(hd,{})console.log(hd.show())</script>
</body>
</html>

使用原型最好用get，set这种方法

__proto__严格意义上不算属性，有getter和setter

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

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

相关文章

洛谷 P1130 红牌 C语言

洛谷 P1130 红牌 C语言

题目描述 某地临时居民想获得长期居住权就必须申请拿到红牌。获得红牌的过程是相当复杂&#xff0c;一共包括 N 个步骤。每一步骤都由政府的某个工作人员负责检查你所提交的材料是否符合条件。为了加快进程&#xff0c;每一步政府都派了 M 个工作人员来检查材料。不幸的是&…
阅读更多...
【线程】基于环形队列的生产者消费者模型

【线程】基于环形队列的生产者消费者模型

1 环形队列 环形队列采用数组来模拟&#xff0c;用取模运算来模拟环状特性。 1.如何判断环形队列为空或者为满? 当环形队列为空时&#xff0c;头和尾都指向同一个位置。当环形队列为满时&#xff0c;头和尾也都指向同一个位置。 因此&#xff0c; 可以通过加计数器或者标记…
阅读更多...
商品列表及商品详情展示

商品列表及商品详情展示

前言 本文将展示一段结合 HTML、CSS 和 JavaScript 的代码&#xff0c;实现了一个简单的商品展示页面及商品详情&#xff0c;涵盖数据获取、渲染、搜索及排序等功能。 效果展示 点击不同的商品会展示对应的商品详情。 代码部分 代码总体实现 <!DOCTYPE html> <htm…
阅读更多...
大模型综述一镜到底（全文八万字） ——《Large Language Models: A Survey》

大模型综述一镜到底（全文八万字） ——《Large Language Models: A Survey》

论文链接&#xff1a;https://arxiv.org/abs/2402.06196 摘要&#xff1a;自2022年11月ChatGPT发布以来&#xff0c;大语言模型&#xff08;LLMs&#xff09;因其在广泛的自然语言任务上的强大性能而备受关注。正如缩放定律所预测的那样&#xff0c;大语言模型通过在大量文本数…
阅读更多...
【C++】B2124 判断字符串是否为回文

【C++】B2124 判断字符串是否为回文

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;题目描述输入格式&#xff1a;输出格式&#xff1a;样例&#xff1a; &#x1f4af;方法一&#xff1a;我的第一种做法思路代码实现解析 &#x1f4af;方法二&#xff1a;我…
阅读更多...
ubuntuCUDA安装

ubuntuCUDA安装

系列文章目录 移动硬盘制作Ubuntu系统盘 前言 根据前篇“移动硬盘制作Ubuntu系统盘”安装系统后&#xff0c;还不能够使用显卡。 如果需要使用显卡&#xff0c;还需要进行相关驱动的安装&#xff08;如使用的为Nvidia显卡&#xff0c;就需要安装相关的Nvidia显卡驱动&#xff…
阅读更多...
Sqoop导入MySQL中含有回车换行符的数据

Sqoop导入MySQL中含有回车换行符的数据

个人博客地址&#xff1a;Sqoop导入MySQL中含有回车换行符的数据 MySQL中的数据如下图&#xff1a; 检查HDFS上的目标文件内容可以看出&#xff0c;回车换行符位置的数据被截断了&#xff0c;导致数据列错位。 Sqoop提供了配置参数&#xff0c;在导入时丢弃掉数据的分隔符&…
阅读更多...
掌握API和控制点(从Java到JNI接口)_36 JNI开发与NDK 04

掌握API和控制点(从Java到JNI接口)_36 JNI开发与NDK 04

4、 *.so的入口函数&#xff1a;JNI_OnLoad() VM (virtual machine)的角色 Java代码在VM上执行。在执行Java代码的过程中&#xff0c;如果Java需要与本地代码(*.so)沟通时&#xff0c; VM就会把*.so視为插件<Tn>而加载到VM里。然后让Java函数呼叫到这插件<Tn>里的…
阅读更多...
[MRCTF2020]Ez_bypass1(md5绕过)

[MRCTF2020]Ez_bypass1(md5绕过)

[MRCTF2020]Ez_bypass1(md5绕过) ​​ 这道题就是要绕过md5强类型比较&#xff0c;但是本身又不相等&#xff1a; md5无法处理数组&#xff0c;如果传入的是数组进行md5加密&#xff0c;会直接放回NULL&#xff0c;两个NuLL相比较会等于true&#xff1b; 所以?id[]1&gg…
阅读更多...
90，【6】攻防世界 WEB Web_php_unserialize

90，【6】攻防世界 WEB Web_php_unserialize

进入靶场 进入靶场 <?php // 定义一个名为 Demo 的类 class Demo { // 定义一个私有属性 $file&#xff0c;默认值为 index.phpprivate $file index.php;// 构造函数&#xff0c;当创建类的实例时会自动调用// 接收一个参数 $file&#xff0c;用于初始化对象的 $file 属…
阅读更多...
Jenkins安装部署（以及常见报错解决方案），jdk版本控制器sdkman

Jenkins安装部署（以及常见报错解决方案），jdk版本控制器sdkman

目录 零、环境介绍 一、Jenkins安装 1、插件安装以及更换插件源 2、修改jenkins时区 二、sdkman安装&#xff08;可选&#xff09; 1、sdkman常用方法 2、sdkman常用方法演示 2.1、查看可用的jdk 2.2、下载jdk并切换版本 三、jenkins报错解决 1、下载sdkman后systemc…
阅读更多...
c语言练习题【数据类型、递归、双向链表快速排序】

c语言练习题【数据类型、递归、双向链表快速排序】

练习1&#xff1a;数据类型 请写出以下几个数据的数据类型 整数 a a 的地址 存放a的数组 b 存放a的地址的数组 b的地址 c的地址 指向 printf 函数的指针 d 存放 d的数组 整数 a 的类型 数据类型是 int a 的地址 数据类型是 int*&#xff08;指向 int 类型的指针&#xff09; …
阅读更多...
联想拯救者Y9000P IRX8 2023 (82WK) 原厂Win11 家庭中文版系统 带一键还原功能 安装教程

联想拯救者Y9000P IRX8 2023 (82WK) 原厂Win11 家庭中文版系统 带一键还原功能 安装教程

安装完重建winre一键还原功能&#xff0c;和电脑出厂时的系统状态一模一样。自动机型专用软件&#xff0c;全部驱动&#xff0c;主题壁纸&#xff0c;自动激活&#xff0c;oem信息等。将电脑系统完全恢复到出厂时状态。 支持机型 (MTM) : 82WK 系统版本&#xff1a;Windows 1…
阅读更多...
深入解析“legit”的地道用法——从俚语到正式表达：Sam Altman用来形容DeepSeek: legit invigorating（真的令人振奋）

深入解析“legit”的地道用法——从俚语到正式表达：Sam Altman用来形容DeepSeek: legit invigorating（真的令人振奋）

深入解析“legit”的地道用法——从俚语到正式表达 一、引言 在社交媒体、科技圈甚至日常对话中&#xff0c;我们经常会看到或听到“legit”这个词。比如最近 Sam Altman 在 X&#xff08;原 Twitter&#xff09;上发的一条帖子中写道&#xff1a; we will obviously deliver …
阅读更多...
Vue 图片引用方式详解：静态资源与动态路径访问

Vue 图片引用方式详解：静态资源与动态路径访问

目录 前言1. 引用 public/ 目录2. assets/ 目录3. 远程服务器4. Vue Router 动态访问5. 总结6. 扩展&#xff08;图片不显示&#xff09; 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 在 Vue 开发中&#x…
阅读更多...
DeepSeek-R1 本地部署教程（超简版）

DeepSeek-R1 本地部署教程（超简版）

文章目录 一、DeepSeek相关网站二、DeepSeek-R1硬件要求三、本地部署DeepSeek-R11. 安装Ollama1.1 Windows1.2 Linux1.3 macOS 2. 下载和运行DeepSeek模型3. 列出本地已下载的模型 四、Ollama命令大全五、常见问题解决附&#xff1a;DeepSeek模型资源 一、DeepSeek相关网站 官…
阅读更多...
JVM运行时数据区域-附面试题

JVM运行时数据区域-附面试题

Java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域。这些区域 有各自的用途&#xff0c;以及创建和销毁的时间&#xff0c;有的区域随着虚拟机进程的启动而一直存在&#xff0c;有些区域则是 依赖用户线程的启动和结束而建立和销毁。 1. 程序计…
阅读更多...
2月3日星期一今日早报简报微语报早读

2月3日星期一今日早报简报微语报早读

2月3日星期一&#xff0c;农历正月初六&#xff0c;早报#微语早读。 1、多个景区发布公告&#xff1a;售票数量已达上限&#xff0c;请游客合理安排行程&#xff1b; 2、2025春节档总票房破70亿&#xff0c;《哪吒之魔童闹海》破31亿&#xff1b; 3、美宣布对中国商品加征10…
阅读更多...
C++ Primer 标准库vector

C++ Primer 标准库vector

欢迎阅读我的 【CPrimer】专栏 专栏简介&#xff1a;本专栏主要面向C初学者&#xff0c;解释C的一些基本概念和基础语言特性&#xff0c;涉及C标准库的用法&#xff0c;面向对象特性&#xff0c;泛型特性高级用法。通过使用标准库中定义的抽象设施&#xff0c;使你更加适应高级…
阅读更多...
【Numpy核心编程攻略：Python数据处理、分析详解与科学计算】2.6 广播机制核心算法：维度扩展的数学建模

【Numpy核心编程攻略：Python数据处理、分析详解与科学计算】2.6 广播机制核心算法：维度扩展的数学建模

2.6 广播机制核心算法&#xff1a;维度扩展的数学建模 目录/提纲 #mermaid-svg-IfELXmhcsdH1tW69 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-IfELXmhcsdH1tW69 .error-icon{fill:#552222;}#mermaid-svg-IfELXm…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023