热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入解析JavaScript对象属性中的访问器方法:get/set与getter/setter详解

篇首语:本文由编程笔记#小编为大家整理,主要介绍了JS对象属性中get/set与getter/setter是什么相关的知识,希望对你有一定的参考价值。 在js属性描述符这部分有几个较难理解的名词概念,

篇首语:本文由编程笔记#小编为大家整理,主要介绍了JS对象属性中get/set与getter/setter是什么相关的知识,希望对你有一定的参考价值。



在js属性描述符这部分有几个较难理解的名词概念,本文旨在描述对它们的理解,主要包括:[[Get]]/[[Put]]get/setgetter/setter几个概念的阐述,数据属性访问器属性


属性

首先我们要搞清楚属性的概念,属性是存储在特定命名位置的值,是对象的内容,属性并不直接存储在对象容器内部。属性有两种类型:数据属性和访问器属性。属性具备了属性描述符,用来描述属性拥有的特性。


属性描述符

属性描述符用来描述属性特性的(只有在内部才能用的特性),配置属性是否可读,是否可写,是否可枚举,值是多少,读写。


属性描述符对象

Object.definePrOperty(obj, ‘a‘, { value:2, writable:true, configurable:true })

第三个参数就是属性描述符对象 ,首先它是个对象,它有自己的属性,其次它是属性a的属性描述符,用来配置属性。

定义这些特性为了实现Javascript引擎用的,因此再Javascript中不能直接访问它们。为了表示特征是内部值,ES规范把它们放在了两对方括号中,例如[[Enumerable]]。

访问器属性不能直接定义,必须使用Object.defineProperty()来定义。


数据属性



  • 数据属性包含一个数据值的位置。在这个位置可以读取和写入值。共有四个描述其行为的特征:

    • [[Configurable]]:配置,表示能否删除修改属性的特性,或者把属性修改为访问器属性。默认true

    • [[Enumerable]]:枚举,表示能否通过for-in循环返回属性。默认true

    • [[Writable]]:可写,表示能否修改属性值。默认true

    • [[Value]]:属性的数据值。读写属性值从该位置。默认undefined




访问器属性



  • 访问器属性不包含数据值;它们包含一对getter和setter函数。共有四个描述其行为的特征:

    • [[Configurable]]:配置,表示能否删除修改属性的特性,或者把属性修改为访问器属性。默认true

    • [[Enumerable]]:枚举,表示能否通过for-in循环返回属性。默认true

    • [[Get]]:在读取属性值时调用的函数。默认undefined

    • [[Set]]:在写入属性值时调用的函数。默认undefined



当个一个属性定义getter、setter或者两者都有时,这个属性就成了访问器属性


知道属性分类之后,下面我们逐一解答开头的几个问题:


[[Get]]/[[Put]]是什么

首先要明确一点,[[Get]]和[[Put]]是对象默认的内置操作,可以理解为算法函数。它是在访问属性时的操作,例如通过obj.a访问a属性时就是实现了[[Get]]操作,它会先找到相同的属性名,找到才要返回属性值。

没有找到就会按照[[Get]]算法的设计,沿着原型链找,找不到会返回undefined。

[[Put]]被触发时,取决于许多因素,最重要的有对象中是否已经存在这个属性。如果已经存在,算法大致会检查下面这些内容:

属性是否是访问描述符?如果是并且存在setter就调用setter
属性的数据描述符中writable是否是false?如果是,在非严格模式下静默失败,在严格模式下抛出TypeError异常。
如果都不是,将该值设置为属性的值。


get/set和getter/setter

[[Get]]和[[Set]]:当属性拥有这两个特性时,属性就是访问器属性。代表着在访问属性或者写入属性值时,对返回值做附加的操作。而这个操作就是getter/setter函数。

它们只能应用到单个属性上,无法应用在整个对象上。getter/setter是隐藏函数,是访问器属性默认拥有的隐藏函数。在读取访问器属性时调用getter,返回有效的值;在写入访问器属性时调用setter函数并传入新值。

不管是对象文字语法中的get a(){...},还是的defineProperty(..)中的显式定义,二者都会在对象中创造一个不包含值得属性,对于这个属性的访问会自动调用一个隐藏函数,它的返回值会被当做属性访问的返回值:

Javascript
var myObject = {
//给a定义一个getter
get a(){
return this._a_;
},
//给a定义一个setter
set a(val){
this._a_=val *2;
}
}
myObject.a=2;
myObject.a;//4

设置getter会覆盖默认的[[Get]]操作,setter会覆盖默认得[[Put]],也被称为赋值操作

实际上我们赋值([[Put]])操作中的值2存储到了另一个变量_a_中。名称_a_只是一种惯例,没有任何特殊行为。


总结

属性是拥有自己的特性的,主要用来描述属性是否可以进行修改枚举配置的。我们访问对象的属性时就是[[Get]]操作,写入就是[[Put]]操作,根据算法找到对应的属性。如果要对属性值进行附加操作时,就需要设置get/set特性,此时属性也就会变成访问器属性,然后调用默认的隐藏的getter/setter函数对属性进行操作。然后返回属性值。这就是整个流程,vue框架中双向绑定就是用到了这些概念来完成数据监听的,对象属性可以说是js中一个很核心的概念了。

本文是陈少棠原创,收录在《齐云札记》,转载请标明原作。

参加博客:https://baijiahao.baidu.com/s?id=1623144714605018773&wfr=spider&for=pc


推荐阅读
  • HTML 页面中调用 JavaScript 函数生成随机数值并自动展示
    在HTML页面中,通过调用JavaScript函数生成随机数值,并将其自动展示在页面上。具体实现包括构建HTML页面结构,定义JavaScript函数以生成随机数,以及在页面加载时自动调用该函数并将结果呈现给用户。 ... [详细]
  • 本文详细介绍了如何安全地手动卸载Exchange Server 2003,以确保系统的稳定性和数据的完整性。根据微软官方支持文档(https://support.microsoft.com/kb833396/zh-cn),在进行卸载操作前,需要特别注意备份重要数据,并遵循一系列严格的步骤,以避免对现有网络环境造成不利影响。此外,文章还提供了详细的故障排除指南,帮助管理员在遇到问题时能够迅速解决,确保整个卸载过程顺利进行。 ... [详细]
  • 在处理大数相加的问题时,有许多方法可以借鉴。本文介绍了两种不同的函数式编程方法:一种是从网络上找到的经典实现,另一种是作者自行设计的创新方案。通过函数式编程的方式重新实现了这两种方法,其中经典实现简洁明了,而创新方案则在性能和可读性方面有所提升。这些方法不仅适用于大数相加,还可以扩展应用于其他数值计算场景。 ... [详细]
  • CentOS 7环境下Jenkins的安装与前后端应用部署详解
    CentOS 7环境下Jenkins的安装与前后端应用部署详解 ... [详细]
  • 2012年9月12日优酷土豆校园招聘笔试题目解析与备考指南
    2012年9月12日,优酷土豆校园招聘笔试题目解析与备考指南。在选择题部分,有一道题目涉及中国人的血型分布情况,具体为A型30%、B型20%、O型40%、AB型10%。若需确保在随机选取的样本中,至少有一人为B型血的概率不低于90%,则需要选取的最少人数是多少?该问题不仅考察了概率统计的基本知识,还要求考生具备一定的逻辑推理能力。 ... [详细]
  • 在前文探讨了Spring如何为特定的bean选择合适的通知器后,本文将进一步深入分析Spring AOP框架中代理对象的生成机制。具体而言,我们将详细解析如何通过代理技术将通知器(Advisor)中包含的通知(Advice)应用到目标bean上,以实现切面编程的核心功能。 ... [详细]
  • Vue 实战基础教程第9讲:深入理解计算属性与侦听器的高效使用
    Vue 实战基础教程第9讲:深入理解计算属性与侦听器的高效使用 ... [详细]
  • 本文介绍了UUID(通用唯一标识符)的概念及其在JavaScript中生成Java兼容UUID的代码实现与优化技巧。UUID是一个128位的唯一标识符,广泛应用于分布式系统中以确保唯一性。文章详细探讨了如何利用JavaScript生成符合Java标准的UUID,并提供了多种优化方法,以提高生成效率和兼容性。 ... [详细]
  • HBase Java API 进阶:过滤器详解与应用实例
    本文详细探讨了HBase 1.2.6版本中Java API的高级应用,重点介绍了过滤器的使用方法和实际案例。首先,文章对几种常见的HBase过滤器进行了概述,包括列前缀过滤器(ColumnPrefixFilter)和时间戳过滤器(TimestampsFilter)。此外,还详细讲解了分页过滤器(PageFilter)的实现原理及其在大数据查询中的应用场景。通过具体的代码示例,读者可以更好地理解和掌握这些过滤器的使用技巧,从而提高数据处理的效率和灵活性。 ... [详细]
  • 设计实战 | 10个Kotlin项目深度解析:首页模块开发详解
    设计实战 | 10个Kotlin项目深度解析:首页模块开发详解 ... [详细]
  • Redis哈希数据结构入门指南
    Redis的哈希数据结构与Java中的HashMap类似,采用数组加链表的方式实现。数组用于存储哈希值的位置,而链表则用于处理哈希冲突的情况。此外,Redis的哈希数据结构还支持高效的字段操作和内存优化,适用于多种应用场景,如缓存和会话管理。 ... [详细]
  • Python 实战:异步爬虫(协程技术)与分布式爬虫(多进程应用)深入解析
    本文将深入探讨 Python 异步爬虫和分布式爬虫的技术细节,重点介绍协程技术和多进程应用在爬虫开发中的实际应用。通过对比多进程和协程的工作原理,帮助读者理解两者在性能和资源利用上的差异,从而在实际项目中做出更合适的选择。文章还将结合具体案例,展示如何高效地实现异步和分布式爬虫,以提升数据抓取的效率和稳定性。 ... [详细]
  • 在Python中,是否可以通过使用Tkinter或ttk库创建一个具有自动换行功能的多行标签,并使其宽度能够随着父容器的变化而动态调整?例如,在调整NotePad窗口宽度时,实现类似记事本的自动换行效果。这种功能在设计需要显示长文本的对话框时非常有用,确保文本内容能够完整且美观地展示。 ... [详细]
  • 本文深入探讨了在Spring Boot中处理RESTful风格的表单请求的方法,包括请求参数处理、请求映射以及RESTful设计原则的应用。文章详细介绍了如何利用HTTP动词(如GET、POST、PUT、DELETE)来操作资源,并结合Spring Boot的注解(如@GetMapping、@PostMapping等)实现高效、清晰的请求处理逻辑。通过实例分析,展示了如何在实际项目中应用这些技术,提高开发效率和代码可维护性。 ... [详细]
  • 掌握PHP编程必备知识与技巧——全面教程在当今的PHP开发中,了解并运用最新的技术和最佳实践至关重要。本教程将详细介绍PHP编程的核心知识与实用技巧。首先,确保你正在使用PHP 5.3或更高版本,最好是最新版本,以充分利用其性能优化和新特性。此外,我们还将探讨代码结构、安全性和性能优化等方面的内容,帮助你成为一名更高效的PHP开发者。 ... [详细]
author-avatar
铥铥宇900
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有