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

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.mzph.cn/news/727829.shtml

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

相关文章

蜘蛛池是什么意思,怎么生成蜘蛛池

蜘蛛池是由自然界中的蜘蛛群落构成的一个小生态系统&#xff0c;也是身处自然界中的游客们可以在风雨中体验到最贴近自然气息的地方。 点开我主页面 Baidu蜘蛛的作用&#xff1a; 引蜘蛛逐渐收录&#xff0c;降权引蜘蛛可以疗伤&#xff0c;排名/收录不稳定&#xff0c;没有收…

等离子体密度诊断集

文章目录 等离子体密度诊断电子密度诊断朗缪尔探针法 (Langmuir Probe)干涉度量法 (Interferometer)全息法 (Holographic Method)离子密度诊断光腔衰减震荡 (Cavity Ring-Down Spectroscopy, CRDS)发射光谱法 (OES)中性粒子密度吸收光谱法 (Absorption Spectroscopy, AS)发射光…

【Linux篇】gdb的使用

&#x1f49b;不要有太大压力&#x1f9e1; &#x1f49b;生活不是选择而是热爱&#x1f9e1; &#x1f49a;文章目录&#x1f49a; 1. 背景知识2. 使用 1. 背景知识 1. 程序发布的方式有两种&#xff0c;debug模式和release模式 2. Linux下&#xff0c;gcc和g编译生成的可执行…

LeetCode每日一题[c++]-找出字符串的可整除数组

题目描述 链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 给你一个下标从 0 开始的字符串 word &#xff0c;长度为 n &#xff0c;由从 0 到 9 的数字组成。另给你一个正整数 m 。word 的 可整除数组 div 是一个长度为 n 的整数数组&#xff0c;并满足&#xff…

mongodb4.2升级到5.0版本,升级到6.0版本, 升级到7.0版本案例

今天一客户想把自己当前使用的mongodb数据库4.2版本升级到7.0版本。难道mongodb能直接跳跃升级吗? 经过几经查找资料&#xff0c;貌似真不行呀。确定升级流程如下: 还得从mongo4.2升级到5.0。其次再从5.0升级到6.0。最后再从6.0升级到7.0。 开始升级之前将数据进行备份 这一步…

国家积极推进长城国家文化公园建设

长城脚下&#xff0c;文化绽放——国家积极推进长城国家文化公园建设 在中华大地的北方&#xff0c;横亘着一条巨龙&#xff0c;它见证着中华民族的沧桑岁月&#xff0c;承载着我们的民族记忆&#xff0c;它就是——长城。这座千年的雄关&#xff0c;不仅是中国的象征&#xf…

WPF —— TextBox 控件详解

TextBox控件是WPF中最基本的文字输入控件。它允许最终用户在一行、对话输入、或多行编写&#xff0c;就像是个编辑器。 关于TextBox常用的属性 FontFamily 字体样式 宋体 楷体等 FontWeight 字体粗细 &#xff0c; Bold加粗 FontStyle 字体样式 斜体和…

Git Cherry-Pick命令详解:轻松选取与移植提交

前言 在Git版本控制系统中&#xff0c;git cherry-pick是一个非常实用的功能&#xff0c;它允许开发人员选择性地将某一个或多个提交&#xff08;commit&#xff09;从一个分支复制到另一个分支&#xff0c;从而实现了对特定改动的精确移植。这对于重现特定补丁、回溯修复bug、…

【软件测试】测试工具推荐

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 本…

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

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

Stringbuffer 和 Stringbuilder 的区别是什么?

StringBuffer 和 StringBuilder 是 Java 中用于处理字符串的两种常用类&#xff0c;它们都允许我们修改字符串&#xff0c;即进行字符串的拼接、插入和删除等操作。尽管两者都提供了可变字符串的功能&#xff0c;但它们之间有一些关键的区别&#xff0c;特别是在线程安全性和性…

学c++对Python有帮助吗?

学习C对Python编程确实有帮助&#xff0c;尽管这两种语言在许多方面有很大的不同。以下是学习C可能对Python编程产生帮助的几个方面&#xff1a; 理解底层概念&#xff1a;C是一种更接近硬件的编程语言&#xff0c;它要求程序员更深入地理解内存管理、指针、数据类型等底层概念…

【在线普法】无端遭受他人殴打,反击抵抗时不慎致滋事者受伤住院,这样的行为是否构成正当防卫?

反击滋事者致其受伤 是否承担民事责任 无端遭受他人殴打&#xff0c;反击抵抗时不慎致滋事者受伤住院&#xff0c;这样的行为是否构成正当防卫&#xff1f;是否应承担民事责任&#xff1f;近日&#xff0c;重庆市九龙坡区人民法院审结了一起健康权纠纷案&#xff0c;认定本案中…

第二十三章 javascript请求方式Ajax

文章目录 一、Ajax的概念二、Ajax的使用使用流程xhr 状态码&#xff1a;xhr.readyStatehttp 状态码&#xff1a;xhr.status 三、发送数据的数据格式 - Content-Type四、其他1. POST和GET的区别2. AJAX的兼容问题3. 个别设备中ajaxGet请求的缓存问题4. XMLHttprequest常见事件 一…

Dubbo分布式服务框架:原理深度解析与实战应用探索(一)

本系列文章简介&#xff1a; 在本系列文章中&#xff0c;我们将深入探索Dubbo分布式服务框架的原理和实战应用。我们将从Dubbo的架构设计开始&#xff0c;详细解析其内部的工作原理和核心组件。我们将探讨Dubbo的服务治理机制、负载均衡策略、容错机制等&#xff0c;并通过实际…

Linux:文件权限详解及修改方法

文章目录 1、Linux文件权限1.1、如何查看到文件权限1.2、ll命令介绍 2、权限分类2.1、文件权限2.2、文件夹权限 3、权限修改3.1、修改文件/文件夹权限1&#xff09;chmod指令2&#xff09;chmod指令符号 3.2、修改文件/文件夹所属用户3.3、修改文件/文件夹所属群组 4、参考 1、…

AI产品摄影丨香水

AI电商产品拍摄丨&#xff08;可指定产品&#xff09; 均为概念图 可换产品 可指定产品&#xff0c;可换logo 工具&#xff1a;StartAI 搭配“手机摄影”风格使用效果更佳哦 咒语&#xff1a;anha perfume in bottle on stone surface, in the style of everyday american…

和为K的子数组

题目&#xff1a; 使用前缀和的方法可以解决这个问题&#xff0c;因为我们需要找到和为k的连续子数组的个数。通过计算前缀和&#xff0c;我们可以将问题转化为求解两个前缀和之差等于k的情况。 假设数组的前缀和数组为prefixSum&#xff0c;其中prefixSum[i]表示从数组起始位…

JQuery的基础笔记

前言&#xff1a; j --> JavaScript Query --> 查询 jquery的入口函数 等DOM结构渲染完毕即可执行内部代码 相当于原生js的DOMContentLoaded 不同于原生js中的load是等一切加载完毕再执行 用法&#xff1a;&#xff08;推荐第二种&#xff09; $(document).ready(…

分段线性化问题探析

目录 1 使用0-1变量将分段函数转换为线性约束 2 连续函数采用分段线性化示例 3 matlab程序测试 4 matlab测试结果说明 5 分段线性化应用 1 使用0-1变量将分段函数转换为线性约束 2 连续函数采用分段线性化示例 3 matlab程序测试 clc;clear all; gn10;tn1; x_pfsdpvar(1, t…