想品客老师的第九天:原型和继承

原型与继承前置看这里

原型

原型都了解了,但是不是所有对象都有对象原型

       let obj1 = {}console.log(obj1)let obj2 = Object.create(null, {name: {value: '荷叶饭'}})console.log(obj2)

obj2为什么没有对象原型?obj2是完全的数据字典对象,没有对象的关系

但是这种对象用到的地方很少

原型方法和对象方法的优先级

一句话,就是自己有方法就不要原型的方法,自己没有的才会向上检索

函数拥有多个对象原型

原型链:

这是我自己画的图,其实和之前看品客老师那张图是一样的:

js里万物皆对象,所以其他类型也有原型关系:

    let arr = []; // new Arrayconsole.log(arr.__proto__ == Array.prototype);let str = ""; //new Stringconsole.log(str.__proto__ == String.prototype);let bool = true;console.log(bool.__proto__ == Boolean.prototype);let reg = /a/i; // new RegExpconsole.log(reg.__proto__ == RegExp.prototype);let obj = {};console.log(obj.__proto__ == Object.prototype);

很多关于原型的方法

改变对象的原型

使用Object.setPrototypeOf(son, parent)

      let son = { name: "son" };let parent = {name: "parent",show() {console.log("parent method:" + this.name);}};// console.log(hd.__proto__ == Object.prototype)//trueObject.setPrototypeOf(son, parent)//设置son的原型为parentconsole.log(Object.getPrototypeOf(son))//验证,原型确实被设置为了parent

也可以在属性里改变

constructor学过了,这里就不说了

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

        function A() { }function B() { }function C() { }let c = new C();B.prototype = c;let b = new B();A.prototype = b;let a = new A();console.log(a instanceof A);//trueconsole.log(a instanceof C);//trueconsole.log(a instanceof C);//trueconsole.log(b instanceof A);//false

小在左,大在右,才为true

isPrototypeOf() 方法用于检查一个对象是否存在于另一个对象的原型链中:

        let a = {}let b = {}let c = {}Object.setPrototypeOf(b, c)//设置b的原型为cObject.setPrototypeOf(a, b)//设置a的原型为bconsole.log(b.isPrototypeOf(a))//b在不在a的原型链里,trueconsole.log(c.isPrototypeOf(b))//trueconsole.log(c.isPrototypeOf(a))//true

hasOwnProperty() 方法返回一个布尔值,表示对象自有属性(而不是继承来的属性)中是否具有指定的属性。

in操作符会检测整条原型链

let a = { name1: "我是a" };let b = { name: "我是b" };Object.setPrototypeOf(a, b);console.log(a.hasOwnProperty("name"))//falseconsole.log("name" in a)//truefor (const key in a) {if (a.hasOwnProperty(key)) {console.log(a[key])//我是a}}

使用call或apply借用原型链

自己的对象里没有某个属性,可以通过call或apply改变当前的this,来获取新this的原型链的属性或方法,算一个小技巧吧:

    let hd = {data: [1, 2, 3, 34, 5, 7]};Object.setPrototypeOf(hd, {max(data) {return data.sort((a, b) => b - a)[0];}})let xj = {lessons: { js: 87, php: 63, node: 99, linux: 88 }};console.log(hd.max.call(null, Object.values(xj.lessons)))//99,相当于用hd的原型里的方法求xj里的最大值

这里也区分一下call和apply,call可以传分散的参数,apply传数组,用math方法

let arr = [1, 3, 43, 4];console.log(Math.max(...arr));let hd = {data: [1, 2, 3, 34, 5, 7]};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)))//可以传数组

Dom节点借用数组的过滤操作

dom节点没有过滤操作,但是数组有,所以可以借助数组方法:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>后盾人</title></head><body><button message="后盾人" class="red">后盾人</button><button message="hdcms">hdcms</button></body><script>let arr = [1, 3, 43];let res = arr.filter(item => {return item > 39;});// console.dir();console.log(res);let btns = document.querySelectorAll("button");btns = [].filter.call(btns, item => {//借用数组操作return item.hasAttribute("class");});console.log(btns);</script>
</html>

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

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

相关文章

SpringBoot--基本使用(配置、整合SpringMVC、Druid、Mybatis、基础特性)

这里写目录标题 一.介绍1.为什么依赖不需要写版本&#xff1f;2.启动器(Starter)是何方神圣&#xff1f;3.SpringBootApplication注解的功效&#xff1f;4.启动源码5.如何学好SpringBoot 二.SpringBoot3配置文件2.1属性配置文件使用2.2 YAML配置文件使用2.3 YAML配置文件使用2.…

98.1 AI量化开发:长文本AI金融智能体(Qwen-Long)对金融研报大批量处理与智能分析的实战应用

目录 0. 承前1. 简介1.1 通义千问(Qwen-Long)的长文本处理能力 2. 基础功能实现2.1 文件上传2.2 单文件分析2.3 多文件分析 3. 汇总代码&运行3.1 封装的工具函数3.2 主要功能特点3.3 使用示例3.4 首次运行3.5 运行结果展示 4. 注意事项4.1 文件要求4.2 错误处理机制4.3 最佳…

数据结构实战之线性表(一)

一.线性表的定义和特点 线性表的定义 线性表是一种数据结构&#xff0c;它包含了一系列具有相同特性的数据元素&#xff0c;数据元素之间存在着顺序关系。例如&#xff0c;26个英文字母的字符表 ( (A, B, C, ....., Z) ) 就是一个线性表&#xff0c;其中每个字母就是一个数据…

FreeRTOS学习 --- 中断管理

什么是中断&#xff1f; 让CPU打断正常运行的程序&#xff0c;转而去处理紧急的事件&#xff08;程序&#xff09;&#xff0c;就叫中断 中断执行机制&#xff0c;可简单概括为三步&#xff1a; 1&#xff0c;中断请求 外设产生中断请求&#xff08;GPIO外部中断、定时器中断…

Vue+Echarts 实现青岛自定义样式地图

一、效果 二、代码 <template><div class"chart-box"><chart ref"chartQingdao" style"width: 100%; height: 100%;" :options"options" autoresize></chart></div> </template> <script> …

嵌入式知识点总结 Linux驱动 (七)-Linux驱动常用函数 uboot命令 bootcmd bootargs get_part env_get

针对于嵌入式软件杂乱的知识点总结起来&#xff0c;提供给读者学习复习对下述内容的强化。 目录 1.ioremap 2.open 3.read 4.write 5.copy_to_user 6.copy_from_user 7.总结相关uboot命令以及函数 1.bootcmd 1.1.NAND Flash操作命令 2.bootargs 2.1 root 2.2 rootf…

《STL基础之vector、list、deque》

【vector、list、deque导读】vector、list、deque这三种序列式的容器&#xff0c;算是比较的基础容器&#xff0c;也是大家在日常开发中常用到的容器&#xff0c;因为底层用到的数据结构比较简单&#xff0c;笔者就将他们三者放到一起做下对比分析&#xff0c;介绍下基本用法&a…

Windows中本地组策略编辑器gpedit.msc打不开/微软远程桌面无法复制粘贴

目录 背景 解决gpedit.msc打不开 解决复制粘贴 剪贴板的问题 启用远程桌面剪贴板与驱动器 重启RDP剪贴板监视程序 以上都不行&#xff1f;可能是操作被Win11系统阻止 最后 背景 远程桌面无法复制粘贴&#xff0c;需要查看下主机策略组设置&#xff0c;结果按WinR输入…

高精度加法乘法

高精度加法&乘法都是把数字转化成数组进行运算&#xff0c;存储 高精度加法 建议多在纸上画画&#xff0c;梳理思路 代码实现 输入字符串 //初始化数组存储 int a[250]{0}; int b[250]{0}; int c[251]{0}; //定义字符串&#xff0c;输入字符串 string s1,s2; getline(c…

Python 列表思维导图

Python 列表思维导图 腾讯云盘下载连接 https://share.weiyun.com/Ri6bUJed

获取snmp oid的小方法1(随手记)

snmpwalk遍历设备的mib # snmpwalk -v <SNMP version> -c <community-id> <IP> . snmpwalk -v 2c -c test 192.168.100.201 .根据获取的值&#xff0c;找到某一个想要的值的oid # SNMPv2-MIB::sysName.0 STRING: test1 [rootzabbix01 fonts]# snmpwalk -v…

【leetcode练习·二叉树】计算完全二叉树的节点数

本文参考labuladong算法笔记[拓展&#xff1a;如何计算完全二叉树的节点数 | labuladong 的算法笔记] 如果让你数一下一棵普通二叉树有多少个节点&#xff0c;这很简单&#xff0c;只要在二叉树的遍历框架上加一点代码就行了。 但是&#xff0c;力扣第第 222 题「完全二叉树的…

WebStorm安装及配置迁移

一、安装 官方下载安装包 WebStorm&#xff1a;JetBrains 出品的 JavaScript 和 TypeScript IDE 适用于2024版本及以下 按需安装后重启电脑 运行WebStorm,注意不要选择大陆地区&#xff0c;语言不选择中文&#xff0c;运行激活文件 二、配置迁移 根据已有软件导出相关配置…

ARM内核:嵌入式时代的核心引擎

引言 在当今智能设备无处不在的时代&#xff0c;ARM&#xff08;Advanced RISC Machines&#xff09;处理器凭借其高性能、低功耗的特性&#xff0c;成为智能手机、物联网设备、汽车电子等领域的核心引擎。作为精简指令集&#xff08;RISC&#xff09;的典范&#xff0c;ARM核…

离线大模型-通义千问

关部署离线模型的教程就不写了&#xff0c;百度一搜一大堆 Kamailio介绍 1. Kamailio介绍 user: 您了解kamailio吗&#xff1f;assistant: 是的&#xff0c;我了解Kamailio。Kamailio是一个开源的SIP服务器和代理&#xff0c;用于处理VoIP&#xff08;Voice over Internet…

Hypium+python鸿蒙原生自动化安装配置

Hypiumpython自动化搭建 文章目录 Python安装pip源配置HDC安装Hypium安装DevEco Testing Hypium插件安装及使用方法​​​​​插件安装工程创建区域 Python安装 推荐从官网获取3.10版本&#xff0c;其他版本可能出现兼容性问题 Python下载地址 下载64/32bitwindows安装文件&am…

细说机器学习算法之ROC曲线用于模型评估

系列文章目录 第一章&#xff1a;Pyhton机器学习算法之KNN 第二章&#xff1a;Pyhton机器学习算法之K—Means 第三章&#xff1a;Pyhton机器学习算法之随机森林 第四章&#xff1a;Pyhton机器学习算法之线性回归 第五章&#xff1a;Pyhton机器学习算法之有监督学习与无监督…

ROS_noetic-打印hello(√)

笔者创建的路径如下 进入到src&#xff0c; catkin_create_pkg helloworld roscpp rospy std_msgs Helloworld-C hello_C.cpp #include "ros/ros.h" int main(int argc, char *argv[]) { //执行 ros 节点初始化 ros::init(argc,argv,"hello"); //创…

冲刺蓝桥杯之速通vector!!!!!

文章目录 知识点创建增删查改 习题1习题2习题3习题4&#xff1a;习题5&#xff1a; 知识点 C的STL提供已经封装好的容器vector&#xff0c;也可叫做可变长的数组&#xff0c;vector底层就是自动扩容的顺序表&#xff0c;其中的增删查改已经封装好 创建 const int N30; vecto…

Golang 并发机制-2:Golang Goroutine 和竞争条件

在今天的软件开发中&#xff0c;我们正在使用并发的概念&#xff0c;它允许一次执行多个任务。在Go编程中&#xff0c;理解Go例程是至关重要的。本文试图详细解释什么是例程&#xff0c;它们有多轻&#xff0c;通过简单地使用“go”关键字创建它们&#xff0c;以及可能出现的竞…