JavaScript红宝书第8章:对象、类与面向对象编程(1/4)

原生JavaScript之对象、类与面向对象编程

  • 理解对象
    • 属性类型
      • 数据属性
      • 访问器属性
    • 定义多个属性
    • 读取属性特征
    • 合并对象
    • 对象标识及相等判定
    • 对象新语法
      • 属性值简写
      • 动态给属性命名
    • 简写方法
    • 对象解构
  • 小结

理解对象

定义:对象为一组属性的无序集合,严格来说,对象就是一组没有特定顺序的值。它的每个属性或方法都由一个特定的名称来标识,一个名称映射到一个值,这个值可以是函数或数组,也可以是普通的原始值。
使用对象字面量创建对象实例:

let obj={name:'Jack',age:18,eat(){console.log('Eating')}
}

还可以使用new Object()创建对象,这里就不赘述了,上述就是对象的name、age就是对象的具体属性,而eat则是一个方法。这个方法用于打印出Eating值。

属性类型

属性类型是指用于描述属性特征的内部属性,一般用双重中括号进行标识,不能用JavaScript进行显性调用出来,了解这些只是为了更好的使用JavaScript开发。属性分两种,数据属性和访问器属性。

数据属性

数据属性包含一个保存数据值的位置,值会从这个位置读取和写入,数据属性中有四个特性描述它们的行为。
[[configurable]]:属性是否可以通过delete删除,是否可以修改成访问器属性,是否可以修改它的特性,默认都为true。
[[Enumerable]]:是否可以通过for-in遍历,默认都为true。
[[Writable]]:属性值是否可以被修改,默认都为true。
[[value]]:包含属性实际值,这就是刚才提到的读取和写入数据的值,默认值为undefined。
举例:

let obj={name:'Jack'
}

我们定义了一个属性name值为Jack,而这个值就会放在[[value]]这个位置中,无论这个值如何修改或删除都会放在[[value]]这个位置中。

如果想要修改属性的默认特征,可以通过Object.defineProperty属性,举例

let obj={}
Object.defineProperty(obj,'name',{writable:false,value:'Tom'
})
console.log(obj.name);//Tom
obj.name='Jack'
console.log(obj.name);//Tom

在上述代码中,我们可以发现,在defineProperty属性中定义name的内部特性writeable为false后,name就不能被修改了,在非严格模式下,它不会报错,只会忽略,但是在严格模式下,它会报错。而其他属性也是一样的。

访问器属性

访问器属性不包含数据值,它们包含一个获取get和一个设置set函数,这两个函数不是必需的,这两个函数默认值为undefined。
get函数是在属性读取时候会默认调用,set函数则是在写入属性时会默认调用。举例:

let obj={name:'Tom'
}
Object.defineProperty(obj,'newName',{get(){return this.name+this.name;},set(newValue){this.name=newValue+'Tom'}
})
console.log(obj.newName);//TomTom
obj.newName='Jack'
console.log(obj.newName);//JackTomJackTom

上述代码中,我们重构了set和get方法,在get方法中,我们令newName属性获取值,等于两个name属性值,而set更新方法中,我们让name属性值等于修改后newName属性值。

定义多个属性

语法:Object.defineProperties
如果想定义多个属性并且设置它们的数据特性和访问器属性时,可以使用上述方法。

let obj={name:'Tom'}Object.defineProperties(obj,{age:{value:18},food:{value:'coco happy'},method:{get(){return age;},set(){aget=++method;}}})

最终的值,是不可修改、不可删除、不可使用for-in迭代器的。也就是说,使用definedProperty或者definedProperties,默认所有属性都为false,而不是都为true。所以在慎用这两个属性。

读取属性特征

语法:Object.getOwnPropertyDescriptor()

let obj={name:'Tom'
}
let description=Object.getOwnPropertyDescriptor(obj,'name')
console.log(description.value);//Tom
console.log(description.configurable);//true
console.log(description.enumerable);//true
console.log(description.get);//undefined
console.log(description.set);//undefined
console.log(description.writable);//true

这个方法传递一个对象则输出这个对象的所有属性的特性值,传递一个对象加其中的一个属性名,则输出该属性的特性值。

合并对象

Object.assign(合并对象,被合并对象)
它只能实现一层深拷贝,多层就变浅拷贝了,深拷贝就是指复制对象中属性值发生改变,原对象属性值不变,浅拷贝就是说复制对象属性值发生改变,原对象属性值也改变,深浅就在于它俩是否在同一个内存空间中,浅拷贝是把它的引用和内存空间都复制了,而深拷贝是把它的引用复制到新对象的内存空间中。实现深拷贝可以通过序列化、反序列化和递归操作实现,这里就不赘述了。

let obj={name:'Tom',food:{drink:'coco'}
}
let newObj=Object.assign({},obj)
newObj.name='tom'
newObj.food.drink='jojo'
console.log(newObj.name,obj.name);//tom Tom
console.log(newObj.food.drink,obj.food.drink);//jojo jojo

对象标识及相等判定

ES6新推出的用于相等判定方法,Object.is(参数,参数)返回的是true、false;

console.log(Object.is(NaN, NaN)); // true

对象新语法

ES6新增对象语法

属性值简写

let name='tom'
let obj={name
}

动态给属性命名

let miniName='name'
let obj={}
obj[miniName]='Tom'
console.log(obj.name);//Tom

简写方法

ES6前,需要用 匿名函数方式写对象方法,方法名:function(){},ES6中则简化成
方法名(){}

对象解构

ES6前

let person={name:1,name1:2,
}
let name=person.name,name1=person.name1;

let {name:name,name1:name1}=person

小结

本章主要讲解红宝书第八章第一部分对象。包含对象内部特性和对象的一些新语法。

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

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

相关文章

ROS机器人毕业论文数量井喷-数据日期23年11月13日

背景 ROS机器人论文数量在近3年井喷发展,仅硕士论文知网数据库可查阅就已经达到2264篇,实际相关从业者远远远大于这个数值。 按日期排序,每页20篇,23年还未结束,检索本身也不一定完备,就超过200。 相关从业…

语音识别芯片在产品应用上的难点列举

语音识别技术,作为人工智能领域中的一颗璀璨明珠,已经广泛应用于用户交互、智能家居、语音助手等多个领域。它为我们的生活带来了诸多便利,使得我们可以更加高效地与电子设备进行互动。然而,语音识别技术的实现,依赖于…

单例模式的双重检查锁定是什么

单例模式的双重检查锁定是什么? 单例模式是一种常见的设计模式,用于确保一个类只有一个实例,并提供一个全局访问点。双重检查锁定(Double-Checked Locking)是一种在单例模式中使用的性能优化技术。 在传统的单例模式…

Android超简单的显示网络图片方法

Android显示网络图片的方法如下&#xff1a; 1、首先&#xff0c;需要在AndroidManifest.xml文件中添加网络权限&#xff1a; <uses-permission android:name"android.permission.INTERNET" /> 2、在布局文件中添加ImageView控件&#xff1a; <ImageVie…

强烈建议linux中nvidia 545.29驱动不要升

我之前一直用终端连接我的工作站&#xff08;系统是arch rolling状态&#xff09;&#xff0c;结果昨天回家难得想试试545驱动下的效果。结果一用chrome播放视频就卡&#xff0c;甚至后面进Login界面也会卡住鼠标。 折腾了一晚上用 $sudo downgrade nvidia nvidia-prime nvid…

比尔.盖茨最新思考和宣言, 未来5年AI将彻底改变生活!

人工智能即将彻底改变你使用计算机的方式 并颠覆软件行业。 比尔盖茨 今天我仍然像保罗艾伦和我创办微软时一样热爱软件。但是&#xff0c;尽管从那时起的几十年里它已经有了很大的进步&#xff0c;但在很多方面&#xff0c;软件仍然相当愚蠢。 要在计算机上执行任何任务&am…

js控制手机蓝牙

要使用JavaScript控制手机蓝牙&#xff0c;您需要使用Web Bluetooth API。这是一种新的Web API&#xff0c;可以让Web应用程序访问和控制蓝牙设备。 以下是一些步骤&#xff0c;以便您开始使用Web Bluetooth API&#xff1a; 检查浏览器支持&#xff1a;首先&#xff0c;您需要…

docker基于debian11基础环境安装libreoffice

首先下载指定版本的libreoffice&#xff0c;注意debian11下需要选择Linux (64-bit) (deb) 官方下载地址&#xff1a;https://www.libreoffice.org/download/download-libreoffice/?typedeb-x86_64&version7.6.2&langzh-CN 将文件上传到服务器并解压缩备用&#xff0c…

PostgreSQL 入门教程

PostgreSQL 入门教程 1. 历史背景2. 概念3. 特点4. 用法4.1 数据库连接4.2 数据库创建4.3 表创建4.4 数据插入4.5 数据查询4.6 数据更新4.7 数据删除 5. 安装步骤6. 简单示例7. 扩展7.1 数据类型7.2 查询优化7.3 并发控制7.4 数据备份和恢复7.5 扩展性和高可用性7.6 安全性加固…

pyTorch Hub 系列#2:VGG 和 ResNet

一、说明 在上一篇教程中,我们了解了 Torch Hub 背后的本质及其概念。然后,我们使用 Torch Hub 的复杂性发布了我们的模型,并通过相同的方式访问它。但是,当我们的工作要求我们利用 Torch Hub 上提供的众多全能模型之一时,会发生什么? 在本教程中,我们将学习如何利用称为…

「Verilog学习笔记」4bit超前进位加法器电路

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 timescale 1ns/1nsmodule lca_4(input [3:0] A_in ,input [3:0] B_in ,input C_1 ,output wire CO ,output wire [3:0] …

SpringBoot3+Vue3+Mysql+Element Plus完成数据库存储blob类型图片,前端渲染后端传来的base64类型图片

前言 如果你的前后端分离项目采用SpringBoot3Vue3Element Plus&#xff0c;且在没有OSS&#xff08;对象存储&#xff09;的情况下&#xff0c;使用mysql读写图片&#xff08;可能不限于图片&#xff0c;待测试&#xff09;。 耗时三天&#xff0c;在踩了无数雷后&#xff0c…

Android BottomSheetDialog中列表滑动冲突问题

前言 使用BottomSheetDialog弹窗时&#xff0c;里面嵌套了一个纵向的RecyclerView&#xff0c;弹出后加载列表数据&#xff0c;发现弹窗不能滑动&#xff0c;产生了滑动冲突。 一、使用步骤 1.布局示例 代码如下&#xff08;示例&#xff09;&#xff1a; <androidx.appco…

Lightroom Classic 2023 v12.4

Lightroom Classic 2023是一款图像处理软件&#xff0c;是数字摄影后期制作的重要工具之一。与其他图像处理软件相比&#xff0c;Lightroom Classic具有以下特点&#xff1a; 高效的图像管理&#xff1a;Lightroom Classic提供了强大的图像管理功能&#xff0c;可以轻松导入、…

网易数帆:云原生向左,低代码向右

网易数帆&#xff0c;前身是网易杭州研究院于2016年孵化的网易云&#xff0c;历经7载探索与沉淀&#xff0c;如今已进化成为覆盖云原生、低代码、大数据和人工智能四大技术赛道的数智化服务提供商&#xff0c;服务于金融、央国企、能源、制造等领域300余家头部企业。 近日&…

怎么录制游戏视频?超简单步骤,一看就会!

随着游戏产业的不断发展&#xff0c;录制游戏视频成为许多玩家记录游戏过程、分享游戏体验的重要方式。但是很多人不知道怎么录制游戏视频&#xff0c;其实一款好的录屏软件可以使游戏视频的录制变得更加简单、高效。本文将介绍两种录制游戏视频的方法&#xff0c;这两种方法各…

VUE组件存活,异步组件

当使用 来在多个组件间作切换时&#xff0c;被切换掉的组件会被卸载。我们可以通过组件强制被切换掉的组件仍然保持“存活”的状态。 组件切换 <button click“changeComponentHandle”>切换 在大型项目中&#xff0c;我们可能需要拆分应用为更小的块&#xff0c;并…

【LeetCode:307. 区域和检索 - 数组可修改 | 树状数组 or 线段树】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

阿里云国际站:云备份

文章目录 一、阿里云云备份的概念 二、云备份的优势 三、云备份的功能 四、云备份的应用场景 一、阿里云云备份的概念 云备份作为阿里云统一灾备平台&#xff0c;是一种简单易用、敏捷高效、安全可靠的公共云数据管理服务&#xff0c;可以为阿里云ECS整机、ECS数据库、文件…