JS对象属性中get/set与getter/setter是什么

2019-01-18 15:07:44 CHENKAI188 阅读数 686更多

分类专栏: JS修仙系列
 
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。

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

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

get/set和getter/setter

[[Get]]和[[Set]]:当属性拥有这两个特性时,属性就是访问器属性。代表着在访问属性或者写入属性值时,对返回值做附加的操作。而这个操作就是getter/setter函数。
它们只能应用到单个属性上,无法应用在整个对象上。getter/setter是隐藏函数,是访问器属性默认拥有的隐藏函数。在读取访问器属性时调用getter,返回有效的值;在写入访问器属性时调用setter函数并传入新值。

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

var myObject = {
//给a定义一个getter
get a(){
return this._a_;
},
//给a定义一个setter
set a(val){
this._a_=val *2;
}
}
myObject.a=2;
myObject.a;//4
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

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

总结

属性是拥有自己的特性的,主要用来描述属性是否可以进行修改枚举配置的。我们访问对象的属性时就是[[Get]]操作,写入就是[[Put]],根据算法找到
对应的属性。如果要对属性值进行附加操作时,就需要设置get/set特性,此时属性也就会变成访问器属性,然后调用默认的隐藏的getter/setter函数对属性
进行操作。然后返回属性值。

set,get,setter的更多相关文章

  1. 基于 getter 和 setter 撸一个简易的MVVM

    Angular 和 Vue 在对Angular的学习中,了解到AngularJS 的两个主要缺点: 对于每一次界面时间,Ajax 或者 timeout,都会进行一个脏检查,而每一次脏检查又会在内部循环 ...

  2. 【原】iOS 同时重写setter和getter时候报错:Use of undeclared identifier '_name';did you mean 'name'

    写了那么多的代码了,平时也没有怎么注意会报这个错误,因为平时都很少同时重写setter和getter方法,一般的话,我们大概都是使用懒加载方法,然后重写getter方法,做一个非空判断.然后有时候根据 ...

  3. 懒加载(getter\setter理解)

    为什么要用懒加载 1.首先看一下程序启动过程:(如图) 会有一个mian的设置,程序一启动会加载main.storyboard main.storyboard又会加载箭头所指的控制器 控制器一旦加载, ...

  4. iOS getter setter

    getter setter 给成员变量起名字用的 setter方法 设置成员变量值 1. setter 方法一定是对象方法 不可能是类方法 2.一定没有返回值 3. 以set开头,并且set后面跟上需 ...

  5. Objective-c的@property(atomic,nonatomic,readonly,readwrite,assign,retain,copy,getter,setter) 属性特性

    assign:指定setter方法用简单的赋值,这是默认操作.你可以对标量类型(如int)使用这个属性.你可以想象一个float,它不是一个对象,所以它不能retain.copy. retain:指定 ...

  6. jQuery 3.0 的 setter/getter 模式

    jQuery 的 setter/getter 共用一个函数,通过是否传参来表明它是何种意义.简单说传参它是 setter,不传它是 getter. 一个函数具有多种意义在编程语言中并不罕见,比如函数重 ...

  7. ES5 的 setter 和 getter

    有两种方式使用 setter 和 getter 1. set/get var person = { _name: '', get name() { return this._name }, set n ...

  8. Intellij Idea中定制getter setter的模板

    Alt + Ins, 调出快捷菜单后选择 Getter and Setter, 在对话框里, 选择对应的template, 右侧点开后, 可以新建自己的模板并编辑 将getter和setter都生成到 ...

  9. getter & setter

    ECMAScript 5: setter和getter的使用方式: 1.set/get: var person = { _name: '', get name() { return this._nam ...

  10. couldn't find setter for xxxxx

    springmvc hibernate框架,在执行普通的插入操作时报错,仔细检查实体类文件,确认该属性的getter setter方法都是有的,哭哭(´;︵;`)jpa策略生成的当然有.可是老是报这个 ...

随机推荐

  1. mssql格式化工具——SQL PRETTY PRINTER

    1.mssql版本 mssql格式化工具有4个版本 1.桌面版 2.mssql插件 3.vs插件 4.api 2.下载地址 下载地址:http://www.dpriver.com/dlaction.p ...

  2. commons-dbutils实现增删改查

    1.maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

  3. IO流学习之File类

    File类 Java文件类以抽象的方式代表文件名和目录路径名.该类主要用于文件和目录的创建.文件的查找和文件的删除等. File对象代表磁盘中实际存在的文件和目录.就是把文件和目录转换成对象,读取到内 ...

  4. Linux网络课程学习第二天

    第二天学习日志: 今天的课程主要内容: 详细介绍了如何安装红帽RHEL7的系统,并对RPM,Yum,Systemd和bash进行了简单介绍.

  5. tsocks代理git wget

    使用clash时, 命令行的wget和git操作可能没有被代理 安装tsocks: apt-get install tsocks 修改配置文件: vi /etc/tsocks.conf 找到: ser ...

  6. html行内元素、块级元素及空元素有哪些?区别是什么?

    一. html标签有哪些? 1)行内元素有哪些? 行内元素:行内大多为描述性标记 <span>...</span> <a>...</a>  链接. 锚点 ...

  7. Go-结构体,结构体指针和方法

    https://cloud.tencent.com/developer/article/1482382 4.1.结构体 结构体:讲一个或多个变量组合到一起形成新的类型,这个类型就是结构体,结构体是值类 ...

  8. 在阿里云IIS服务器上安装证书

    在IIS服务器上安装证书 您可将下载的阿里云SSL证书安装到IIS服务器上,使您的IIS服务器支持HTTPS安全访问. 一.前提条件 申请证书时需要选择 系统自动创建CSR. 申请证书时如果选择手动创 ...

  9. thinkphp5.x全版本任意代码执行getshell

    ThinkPHP官方2018年12月9日发布重要的安全更新,修复了一个严重的远程代码执行漏洞.该更新主要涉及一个安全更新,由于框架对控制器名没有进行足够的检测会导致在没有开启强制路由的情况下可能的ge ...

  10. P1002 过河卒【dp】

    P1002 过河卒 题目描述 棋盘上AAA点有一个过河卒,需要走到目标BBB点.卒行走的规则:可以向下.或者向右.同时在棋盘上CCC点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制 ...