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

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

在js属性描述符这部分有几个较难理解的名词概念，本文旨在描述对它们的理解，主要包括:[[Get]]/[[Put]]、get/set、getter/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