新用户注册入口 老用户登录入口

[转载]数据属性和访问器属性

文章作者:转载 更新时间:2023-06-09 18:12:44 阅读数量:115
文章标签:数据属性访问器属性`value``get``set`计算属性
本文摘要:在JavaScript面向对象编程中,数据属性和访问器属性是两种核心的属性类型。数据属性通过`configurable`、`enumerable`、`writable`及`value`四个特性来定义其可配置性、是否可枚举、是否可写以及具体的值。而访问器属性除了具有相同的`configurable`和`enumerable`特性外,还包含`get`和`set`函数,用于实现对属性存取行为的自定义逻辑,如计算属性值等。利用`Object.defineProperty()`或`Object.defineProperties()`方法可以灵活地创建和修改这两种类型的属性,以满足复杂的数据操作需求。
转载文章

本篇文章为转载内容。原文链接:https://blog.csdn.net/weixin_30920597/article/details/99806994。

该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。

作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据属性和访问器属性</title>
<script src="js/jquery.min.js"></script>
<script>
模板

var obj ={

get 空格  属性名(){

return 属性值;
},
set 空格  属性名(value){

//需要接收到的value作处理
实例      //访问器属性     // 看起来像函数但是调用起来像是属性,

     // 并未真正存储数据,只是用来操作数据
var circle={
r:10, //数据属性(半径)
get size(){//size属性的getter访问器(只有get访问器属性时是只读的,即只能调用获取值但是不能设置新值)
return Math.PI*this.r*this.r;//知道半径求面积
},
set size(value){//size属性的setter访问器,可读也可以写
this.r=Math.sqrt(value/Math.PI) ;//知道面积求半径(平方根)
}
};
alert(circle.size);//调用属性的getter访问器
circle.size=31400;//调用属性的setter访问器
alert(circle.r);

注意:1、访问器属性的本质是两个函数,若想要读取访问器属性的值,会自动调用get访问器;
2、若想为访问器属性赋值,会自动调用set
访问器,并把等号右边的值传递给set访问器的形参,
3、访问器属性不能存储数据,所以访问器属性往往依赖于其他的数据属性,
4、访问器属性一般用于两个场合:冗余属性(某些不能定义死的属性值(面积、周长等))有意控制属性的只读(get访问器)或者只写(set访问器)


</script>

</head>
<body></body>
</html>

转载于:https://www.cnblogs.com/LindaBlog/p/9294803.html

本篇文章为转载内容。原文链接:https://blog.csdn.net/weixin_30920597/article/details/99806994。

该文由互联网用户投稿提供,文中观点代表作者本人意见,并不代表本站的立场。

作为信息平台,本站仅提供文章转载服务,并不拥有其所有权,也不对文章内容的真实性、准确性和合法性承担责任。

如发现本文存在侵权、违法、违规或事实不符的情况,请及时联系我们,我们将第一时间进行核实并删除相应内容。

相关阅读
文章标题:[转载][洛谷P1082]同余方程

更新时间:2023-02-18
[转载][洛谷P1082]同余方程
文章标题:[转载]webpack优化之HappyPack实战

更新时间:2023-08-07
[转载]webpack优化之HappyPack实战
文章标题:[转载]oracle 同时更新多表,在Oracle数据库中同时更新两张表的简单方法

更新时间:2023-09-10
[转载]oracle 同时更新多表,在Oracle数据库中同时更新两张表的简单方法
文章标题:[转载][Unity] 包括场景互动与射击要素的俯视角闯关游戏Demo

更新时间:2024-03-11
[转载][Unity] 包括场景互动与射击要素的俯视角闯关游戏Demo
文章标题:[转载]程序员也分三六九等?等级差异,一个看不起一个!

更新时间:2024-05-10
[转载]程序员也分三六九等?等级差异,一个看不起一个!
文章标题:[转载]海贼王 动漫 全集目录 分章节 精彩打斗剧集

更新时间:2024-01-12
[转载]海贼王 动漫 全集目录 分章节 精彩打斗剧集
名词解释
作为当前文章的名词解释,仅对当前文章有效。
数据属性在JavaScript中,数据属性是对象的一种基本属性类型,它直接存储了一个特定的值。数据属性具有四个可配置的特性。
访问器属性访问器属性同样是JavaScript对象中的另一种属性类型,但它并不直接存储值,而是定义了获取和设置属性值的方法(即`getter`和`setter`)。访问器属性同样拥有`configurable`和`enumerable`两个特性,但没有`writable`,取而代之的是`get`和`set`两个特性。当读取访问器属性时,会调用`get`函数并返回其结果作为属性值;而在尝试设置属性值时,则会调用`set`函数并将新值传入。这种属性类型常用于实现数据验证、计算属性以及复杂逻辑控制等功能。
`Object.defineProperty()`这是一个JavaScript内置方法,用于直接在一个对象上定义一个新的属性,或者修改一个已存在的属性,并为其提供详细的属性描述符,包括数据属性的`configurable`、`enumerable`、`writable`和`value`等特性,以及访问器属性的`get`和`set`方法。通过此方法,开发者能够精确地控制对象属性的行为和状态,从而实现更灵活和精细的对象属性管理。
延伸阅读
作为当前文章的延伸阅读,仅对当前文章有效。
在深入理解了JavaScript中数据属性和访问器属性的概念及其重要特性后,我们还可以进一步探索这些属性在现代前端开发中的实际应用。例如,在Vue.js等流行的MVVM框架中,访问器属性被广泛应用以实现数据的双向绑定机制。框架通过getter和setter来监听对象属性的变化,并实时更新视图,这一设计极大地提高了前端开发效率与代码可维护性。
另外,随着ECMAScript规范的不断演进,Reflect API作为对Object操作的补充,提供了更加强大且一致的方法来处理属性,包括访问器属性。利用`Reflect.defineProperty()`、`Reflect.get()`、`Reflect.set()`等方法,开发者能够更加灵活地操控对象属性,这不仅增强了代码的简洁性和一致性,也为未来的异步编程模型提供了更多可能。
此外,TypeScript作为一种强类型的语言,也对访问器属性提供了良好的支持。开发者可以为访问器属性定义明确的类型签名,使得编译器能在编译阶段就进行类型检查,从而有效预防运行时错误,提升代码质量。
近期,JavaScript社区的一些讨论热点也聚焦于如何更好地运用数据属性和访问器属性优化性能、改善内存管理以及实现更复杂的业务逻辑。例如,通过自定义访问器属性实现自动化的资源懒加载、状态管理等功能,成为许多库和框架设计的新趋势。
总之,理解并掌握数据属性和访问器属性是每一位JavaScript开发者必备的基础知识,而关注其在前沿技术领域及最新实践案例中的应用,则有助于我们不断提升技术水平,适应快速发展的前端开发环境。
知识学习
实践的时候请根据实际情况谨慎操作。
随机学习一条linux命令:
ln -s source destination - 创建软链接(符号链接)。
随便看看
拉到页底了吧,随便看看还有哪些文章你可能感兴趣。
纯js实用T恤衫花纹图案预览特效 01-26 基于Bootstrap仿Github样式下拉列表框插件 08-08 jQuery电子邮件地址填写自动完成插件 04-30 Superset 数据源连接配置:精细化自定义SQLAlchemy URI实现数据分析与可视化,含SSL加密连接实例 03-19 jquery可任意拖动排序的导航图片效果 02-23 侧边栏个人图文简历HTML模板 12-09 Beego框架升级中的Bee工具版本兼容性问题与迁移策略:结构变更、功能接口变动及社区解决方案 12-07 Kibana无法启动:针对服务器内部错误的Elasticsearch连接、配置文件、端口冲突与资源排查解决(注:由于字数限制,未能完全包含所有关键词,但包含了核心问题描述及几个关键排查点) 11-01 ClickHouse外部表使用中文件权限与不存在问题的解决方案:错误提示、查询操作与文件路径管理实务 09-29 本次刷新还10个文章未展示,点击 更多查看。
Apache Atlas UI无法正常加载与样式丢失问题排查及解决方案:关注网络连接、浏览器缓存与开发者工具应用 09-25 Greenplum数据库中数据插入操作详解:单行多行插入与gpfdist实现大批量导入 08-02 [转载]html5 footer header,html-5 --html5教程article、footer、header、nav、section使用 07-16 [转载][GCC for C]编译选项---IDE掩盖下的天空 06-29 简洁大方珠宝钻石收藏网站模板下载 06-20 黑色高端精致汽车4s店美容html5模板下载 06-01 蓝色互联网项目融资管理平台网站模板 05-16 响应式游戏开发类企业前端cms模板下载 05-02 Beego框架动态路由实现:重定向与命令行参数驱动的路由设计实践 04-05 .NET 中字典操作避免 KeyNotFoundException:TryGetValue、ContainsKey 与 GetOrAdd 实践详解 04-04 [转载]2021/4/23爬虫第五次课(爬虫网络请求模块下下) 03-01
时光飞逝
"流光容易把人抛,红了樱桃,绿了芭蕉。"