JavaScript基础4之原型的原型继承、原型链和理解对象的数据属性、访问器属性

news/2024/4/21 13:04:12/文章来源:https://blog.csdn.net/qq_34306228/article/details/136492687

JavaScript基础

  • 原型
    • 原型继承
      • 问题
      • 解决
    • 原型链
      • isPrototypeOf()
      • Object.getPrototypeOf()
  • 理解对象
    • 数据属性
    • 访问器属性

原型

原型继承

继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript中大多是借助原型对象实现继承的特性。
龙生龙、凤生凤、老鼠的儿子会打洞描述的正是继承的含义。
我们来看个代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title>
</head>
<body>
<script>//继续抽取 公共的部分放到原型上const Person= {eyes: 2,head: 1}//女人  构造函数 继承 想要继承 Personfunction Woman(){}//Woman通过原型来继承PersonWoman.prototype=Person//指回原来的构造函数Woman.prototype.constructor=Womanconst red= new Woman()console.log(red)console.log(Woman.prototype)//男人 构造函数 继承 想要继承Personfunction Man(){}Man.prototype=PersonMan.prototype.constructor=Manconst pink=new Man()console.log(pink.head)console.log(pink)
</script>
</body>
</html>

请添加图片描述

问题

例如:
给女人加一个生孩子的方法

 //给女人添加一个方法 生孩子Woman.prototype.baby=function (){console.log("宝贝")}

全部代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title>
</head>
<body>
<script>//继续抽取 公共的部分放到原型上const Person= {eyes: 2,head: 1}//女人  构造函数 继承 想要继承 Personfunction Woman(){}//Woman通过原型来继承PersonWoman.prototype=Person//指回原来的构造函数Woman.prototype.constructor=Womanconst red= new Woman()console.log(red)console.log(Woman.prototype)//给女人添加一个方法 生孩子Woman.prototype.baby=function (){console.log("宝贝")}//男人 构造函数 继承 想要继承Personfunction Man(){}Man.prototype=PersonMan.prototype.constructor=Manconst pink=new Man()console.log(pink.head)console.log(pink)
</script>
</body>
</html>

在这里插入图片描述

男人和女人都同时使用了同一个对象,根据引用类型的特点,他们指向同一个对象,修改一个就会都影响。
在这里插入图片描述

解决

需求:男人和女人不要使用同一个对象,但是不同对象里面包含相同的属性和方法
答案:构造函数
new 每次都会创建一个新的对象

function Star(){this.age = 18this.say = function () {}
}
const ldh = new Star( )
const zxy = new Star()
console.log(ldh)
console.log(zxy)
console.log(ldh === zxy) // false每个实例对象都不一样
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"><title>Title</title>
</head>
<body>
<script>/*//继续抽取 公共的部分放到原型上const Person= {eyes: 2,head: 1}*///解决 构造函数 new 出来的对象 结构一样 但是对象不一样function Person(){this.eyes=2this.head=1}//女人  构造函数 继承 想要继承 Personfunction Woman(){}//Woman通过原型来继承Person//父构造函数(父类) 子构造函数(子类)//子类的原型 = new 父类Woman.prototype=new Person()//指回原来的构造函数Woman.prototype.constructor=Woman//给女人添加一个方法 生孩子Woman.prototype.baby=function (){console.log("宝贝")}const red= new Woman()console.log(red)console.log(Woman.prototype)red.baby() //男人 构造函数 继承 想要继承Personfunction Man(){}Man.prototype=new Person()Man.prototype.constructor=Manconst pink=new Man()console.log(pink.head)console.log(pink)
</script>
</body>
</html>

在这里插入图片描述

原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链
在这里插入图片描述

在这里插入图片描述

  1. 只要是对象就有__proto__,指向原型对象。
  2. 只要是原型对象就有constructor,指回创造我的构造函数。

当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
② 如果没有就查找它的原型(也就是__proto__指向的prototype原型对象)
③如果还没有就查找原型对象的原型(Object的原型对象)
④ 依此类推一直找到Object 为止(null)
⑤ __proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线
可以使用instanceof 运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>function Person(){}const ldh=new Person()console.log(ldh.__proto__===Person.prototype);console.log(Person.prototype.__proto__===Object.prototype)console.log(ldh instanceof Person)console.log(ldh instanceof Object)console.log(ldh instanceof Array)console.log([1,3,7] instanceof Array)console.log(Array instanceof Object)
</script>
</body>
</html>

在这里插入图片描述
正常的原型链都会终止于 Object 的原型对象,Object 原型的原型是 null

console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Person.prototype.__proto__.constructor === Object); // true
console.log(Person.prototype.__proto__.__proto__ === null); // true
 function Person(){}console.log(Person.prototype.__proto__);
{constructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()
}

在这里插入图片描述

isPrototypeOf()

确定两个对象之间的关系
[[prototype]]

isPrototypeOf()会在传入参数的[[Prototype]]指向调用它的对象时返回 true

function Person(){}const person=new Person()console.log(Person.prototype.__proto__);console.log(Person.prototype.isPrototypeOf(person));

相当于:

 console.log(person.__proto__===Person.prototype) //true

在这里插入图片描述

Object.getPrototypeOf()

返回参数的内部特性 [[Prototype]] 的值

 console.log(Object.getPrototypeOf(person)===Person.prototype)  //true

理解对象

new Object() ==== {}

const person=new Object()person.name="张三"person.age=18person.say=function(){console.log(this.name)}person.say()

等同于

const person={name:"张三",age:20,say(){console.log(this.name)}}person.say()

在这里插入图片描述

数据属性

  • configurable:属性是否可以通过delete 删除并重新定义 ⇒true
  • Enumerable:属性是否可以通过for in 循环 =》 true
  • writable:属性是否可以被修改 =》 true
  • value:属性实际的值undefined

Object.defineProperty

访问器属性

  • configurable:属性是否可以通过delete 删除并重新定义 → true
  • Enumerable:属性是否可以通过for in 循环 =》 true
  • Get:获取函数
  • Set: 设置函数
    getter
    setter
let person ={year_:2023,age:18}Object.defineProperty(person,"year",{get(){console.log('get')return this.year_},set(newvalue){console.log('set',newvalue)this.year_=newvaluethis.age +1}})console.log(person.year)person.year =2014console.log(person.age)

请添加图片描述

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

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

相关文章

按图搜索淘宝商品(拍立淘)

使用淘宝拍立淘接口的步骤通常包括&#xff1a; 注册成为淘宝开放平台的开发者&#xff1a;在淘宝开放平台网站上注册账号并完成认证。 创建应用以获取API密钥&#xff1a;在您的开发者控制台中创建一个应用&#xff0c;并获取用于API调用的密钥&#xff0c;如Client ID和Clie…

OpenHarmony教程指南—Ability的启动模式

介绍 本示例展示了在一个Stage模型中&#xff0c;实现standard、singleton、specified多种模式场景。 本实例参考开发指南 。 本实例需要使用aa工具 查看应用Ability 模式信息。 效果预览 使用说明 1、standard模式&#xff1a; 1&#xff09;进入首页&#xff0c;点击番茄…

FreeRTOS day2

使用ADC采样光敏电阻数值&#xff0c;如何根据这个数值调节LED灯亮度 总结DMA空闲中断接收数据的使用方法 首先要要选择串口然后配置串口的参数&#xff0c;配置MDA通道选择接受数据&#xff0c;配置空闲中断&#xff0c;定义一个数据接收的容器&#xff0c;启动MDA传输当串口…

学习大语言模型(LLM),从这里开始

在见识了ChatGPT的各种强大能力后&#xff0c;不少 NLP一线从业人员很自然地想到&#xff0c;以后开发者只要借助 ChatGPT&#xff0c;就可以做到现在大部分NLP工程师在做的事&#xff0c;比如文本分类、实体抽取、文本推理等。甚至随着大语言模型&#xff08;largelanguagemod…

力扣刷题Days11第二题--141. 环形链表(js)

目录 1,题目 2&#xff0c;代码 2.1快慢指针 2.2&#xff0c;哈希表 3&#xff0c;学习与总结 3.1自己尝试写快慢指针 反思 1,题目 给你一个链表的头节点 head &#xff0c;判断链表中是否有环。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&…

时光机关:探秘Java中的Timer和TimerTask

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 时光机关&#xff1a;探秘Java中的Timer和TimerTask 前言Timer和TimerTask的基本概念Timer&#xff1a;TimerTask&#xff1a;为何它们是 Java 中任务调度的得力工具&#xff1a; Timer的使用方法创建…

python中的文件操作2

文件遍历 在Python中&#xff0c;遍历文件通常指的是逐行读取文件中的内容。这种方式对于处理大型文件特别有用&#xff0c;因为它不需要一次性将整个文件加载到内存中。下面是几种常见的遍历文件内容的方法&#xff1a; 1. 使用with语句和for循环 这是最推荐的方式&#xf…

appium解锁android真机系统的屏幕

在使用appium进行app自动化操作的过程中&#xff0c;经常遇到的第一个难题就是如何解锁系统屏幕&#xff0c;也就是亮屏解锁。 实际上解决办法如下&#xff1a;在desired_capabilities中增加两个参数unlockType和unlockKey&#xff0c;类似的示例代码如下&#xff1a; desire…

外包干了2年,技术退步明显

先说一下自己的情况&#xff0c;研究生&#xff0c;19年进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试&#xf…

Stable Diffusion 模型分享:Realistic Stock Photo(真实的库存照片)

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八下载地址模型介绍

利用Python爬取高德地图全国地铁站点信息

利用Python中的requests库进行地铁站点信息的获取,同时将数据保存在本机excel中 # 首先引入所需要的包 import requests from bs4 import BeautifulSoup import pandas as pd import json# 发送 GET 请求获取网页内容 url http://map.amap.com/subway/index.html response r…

vue3页面内容切换(类似登录、注册内容切换)

一、内容描述 页面有俩块内容&#xff0c;分别是验证码登录页面内容&#xff0c;账号密码登录页面内容。有俩种处理方式&#xff0c;一个是写俩个页面跳转使用&#xff0c;还有一种是一个页面俩个内容&#xff0c;切换的只是不同的内容&#xff0c;相同的内容保留。一般都是选择…

比肩Gen-2,全新开源文生视频模型

著名开源平台Stability.ai在官网宣布&#xff0c;推出全新文生视频的扩散模型Stable Video Diffusion&#xff0c;已开源了该项目并公布了论文。 据悉&#xff0c;用户通过文本或图像就能生成高精准&#xff0c;14帧和25帧的短视频。目前&#xff0c;Stable Video Diffusion处…

【常见索引使用】⭐️Mysql中索引的类型以及使用方式和失效场景

目录 一、前言 二、数据准备 三、索引的分类 四、索引示例 示例1、主键索引&#xff08;Primary Key Index&#xff09;与 唯一索引&#xff08;Unique Index&#xff09; 示例2、前缀索引&#xff08;Prefix Index&#xff09; 示例3、联合索引&#xff08;复合索引&am…

Unity3D学习之XLua实践——背包系统

文章目录 1 前言2 新建工程导入必要资源2.1 AB包设置2.2 C# 脚本2.3 VSCode 的环境搭建 3 面板拼凑3.1 主面板拼凑3.2 背包面板拼凑3.3 格子复合组件拼凑3.4 常用类别名准备3.5 数据准备3.5.1 图集准备3.5.2 json3.5.3 打AB包 4 Lua读取json表及准备玩家数据5 主面板逻辑6 背包…

什么是工业协议网关?作用是什么?

在工业自动化和智能制造领域&#xff0c;数据的采集、传输和处理是实现设备监控、远程控制和优化的关键。而工业协议网关&#xff0c;作为连接工业设备与上层管理系统的桥梁&#xff0c;发挥着至关重要的作用。今天&#xff0c;我们就来深入解析一下HiWoo Box这一工业协议网关的…

【three.js】22. Imported Models导入模型

22. Imported Models导入模型 介绍 Three.js 可以让你创建很多原始几何体&#xff0c;但是当涉及到更复杂的形状时&#xff0c;我们最好使用专用的 3D 软件建模。 在本课中&#xff0c;我们将使用已经制作好的模型&#xff0c;但我们将在以后的课程中学习如何完全在 3D 软件中…

《汇编语言》第3版 (王爽)第10章检测点解析

第10章 检测点 检测点10.1&#xff1a;补全程序&#xff0c;实现从内存1000:0000处开始执行指令。 解析: 我们知道retf指令是用栈中的数据&#xff0c;同时修改CS和IP寄存器中的内容&#xff0c;实现远转移&#xff0c;而且是先出栈的数据放入IP中&#xff0c;后出栈的数据放入…

IPSEC VPN 网关模式实验

要求&#xff1a;FW1与FW3建立IPSEC通道&#xff0c;保证10.0.2.0/24网段能访问192.168.1.0/24网段 因为FW1与FW3都处于边界&#xff0c;所以使用网关部署模式来建立IPSEC VPN FW1 这里选择主模式跟隧道模式 FW3与FW1配置类似&#xff0c;与FW1的源目地址反过来&#xff0c;…

[Unity实战]使用NavMeshAgent做玩家移动

其实除了Character Controller, Rigidbody&#xff0c;我们还可以使用NavMeshAgent去做。这么做的好处是能避免玩家去莫名其妙的地方&#xff08;毕竟基于烘焙过的导航网格&#xff09;&#xff0c;一般常见于元宇宙应用和mmo。 根据Unity手册&#xff0c;NavMeshAgent 也有和…