可能很多人都知道最近很火的MVVM(model-view-virtualModel)框架,如Vue/Angular/React,如果你不知道的话,就要抓紧学习了,它能够把你从高频复杂的DOM解析中解脱出来。
MVVM框架的最主要的特性就是双向数据绑定,其中使用了ES5的getter/setter函数,而他们就是对象的访问器属性,如果你不清楚它们的具体用法,那就不算是真正了解Javascript的基础知识对象的属性,现在让我们一起回顾和总结下对象的属性。

对象

让我们先看下对象的定义:

无序属性的集合,其属性可以包含基本值,对象或者函数。   ------ ECMA-262

也就是我们可以定义的对象属性只能是下面三种:

var person = {// 属性name: 'Nicholas',// 对象job: {name: 'teacher',salary: 10000},// 函数greet: function () {alert('hello');}
};

对象的属性

JavaScript中只包含有两种属性:数据属性和访问器属性,并包含不同的特征。

数据属性包含数据值的位置,可以在该位置对其进行读写。其包含4个特征:

   configurable: 布尔值,表示能否通过delete属性来删除属性或修改属性的特性。enumerable: 布尔值,是否能通过`for-in`循环或`Object.keys()`返回属性。writable: 布尔值,属性值是否可以修改。value: 属性的数据值,实质指向的是读写数据的位置。默认为undefined。

数据属性可以通过属性访问器(即点运算符和方括号计算表达式)来设置属性,也可以通过Object.defineProperty() 或 Object.defineProperties()设置(下面统一用defineProperty代指两者)。而区别在于为布尔值的特征的默认值,通过属性访问器设置的默认都是true,而通过定义属性设置的默认都是false。

访问器属性不包含数据值,包含一对儿getter/setter函数(非必须),在读取访问器属性时,调用getter函数,负责返回有效的值;在写入属性时,调用setter函数并传入新值,负责决定如何处理数据。其包含4个特征:

    configurable: 布尔值,表示能否通过delete属性来删除属性或修改属性的特性,默认为false。enumerable: 布尔值,是否能通过`for-in`循环或`Object.keys()`返回属性,默认为false。get: 读取属性时调用的函数,默认为undefined。set: 写入属性时调用的函数,接收唯一参数,默认为undefined。

访问器属性只能通过defineProperty来定义。

如果属性已经存在,我们可以用defineProperty再次修改该属性的特征,也可以通过Object.getOwnpropertyDescriptor() 或 Object.getOwnpropertyDescriptors()来查看其特征列表。对于configurable = true的属性我们也可以使用delete操作符进行删除,如果设置成了不可配置的,我们就再也不能把它变回可配置的了。

属性访问器

有时我们会通过getter/setter来代理一个属性的读取操作,即实现一个伪属性,但是这个属性不能与真实属性重名,否则会覆盖真实属性的值,变成动态获取,这可能不是你想要的结果。

// 实例:保存当前值变化的日志记录
var o = {set current (str) {this.log[this.log.length] = str;},get current () {return this.log.join(',');},log: []
};

这样我们就代理current,用于保存实时日志,每次对log的更新也变成了一个操作历史档案,方便实时查看我们的所有改动。
同样我们可以在configurable配置为true的时候删除该属性的代理:delete o.current

关于delete,如果我们删除了一个var/let/const属性,在其声明的作用域下会返回false,如果是严格模式,则会抛出语法错误。删除一个不可配置的属性同理会失败或报错。
删除数组的下标时,length并不会变小,遍历到该下标时会跳过执行。

影响configurable的方法

另外,存在一些Object的方法会影响到对象属性的可配置性:

  1. Object.freeze()
    该方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说,这个对象永远是不可变的。该方法返回被冻结的对象。
    冻结指的是表层属性的浅冻结,如果需要冻结嵌套的属性,则需要遍历并递归冻结子属性。
  2. Object.preventExtensions()
    该方法让一个对象变的不可扩展,也就是永远不能再添加新的属性。需要注意的是不可扩展的对象的属性通常仍然可以被删除,同时会阻止一个对象将__proto__属性重新指向另一个对象。
  3. Object.seal()
    该方法可以让一个对象密封,并返回被密封后的对象。密封对象将会阻止向对象添加新的属性,并且会将所有已有属性的可配置性(configurable)置为不可配置(false),即不可修改属性的描述或删除属性。但是可写性描述(writable)为可写(true)的属性的值仍然被修改。

参考资料

  1. MDN - Object: https://developer.mozilla.org...
  2. JavaScript高级编程 - 对象类型

深入浅出JS的对象属性相关推荐

  1. 遍历对象属性_细说JS遍历对象属性的N种方法

    本人详细介绍了JS遍历对象N种方法,欢迎关注收藏. 遍历对象属性有五种方法,下图为一个场景对比图. 可以注意到两点: 只有for ... in 才可以遍历原型链属性,且只能遍历可枚举属性. Objec ...

  2. js入门·对象属性方法大总结

    数组(Array):系列元素的有序集合: 详细演示请看:[js入门系列演示·数组 ] http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.ht ...

  3. js判断对象属性是否存在之深入理解

    js判断多层对象属性是否存在 比如 判断 err.response.data.message 的存在 //如果不想这样写 if(err && err.response &&am ...

  4. js 中对象--属性相关操作

    查询属性: 可以用 对象.属性 来查询属性和属性方法               或者                    对象["属性"]  来查询属性和属性方法 演示代码: ...

  5. JS获取对象属性的各种方式和区别(自身/原型属性、可枚举/不可枚举)

    对象的属性有自身属性和原型属性之分,自身属性是对象自己的属性,原型属性是存在于原型链上的属性. 可以用Object.prototype.hasOwnProperty()判断是自身属性还是原型属性.(i ...

  6. js 遍历对象属性,赋值/添加进另一个对象中

    1. 遍历对象属性,相同属性赋值到另一个对象中 var dataA = {'name':'张三','age':20,'sex':'男' } var dataB = {'name':'李四','age' ...

  7. js删除对象属性最简单快速的方法之一

    var a={"id":1,"name":"xiaocai"}; //添加属性 a.age=18; console.log(a); //结果 ...

  8. js 中对象属性的特性

    数据属性: 数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 4个描述的行为特性: writable  表示能否修改属性的值.默认为true Enumerable 表示能否过过for in循 ...

  9. php js 循环对象属性,js 遍历对象的属性的代码_javascript技巧

    如: Function.prototype.addMethod=function(methodName,func){ if(!this.prototype[methodName]){ this.pro ...

最新文章

  1. python fsolve_Python-optimize.leastsq()和optimize.fsolve()
  2. java表驱动法索引访问_表驱动法 - SegmentFault 思否
  3. 【数学建模】MATLAB应用实战系列(七十九)-因子分析法(附MATLAB 和Python代码实现)
  4. LINUX系统管理员技术(Admin)-------第二天
  5. java数据库编程——Insert and Retrieve Images from MySql Table Using Java
  6. [书籍推荐]《软件设计精要与模式(第2版)》-张逸——提高设计模式及软件设计的方法...
  7. 终于学会上传图片了\( ̄︶ ̄*\))
  8. Linux中fdisk对应的c函数,linux下fdisk命令实战案例之详解
  9. mmap函数_Linux内存映射mmap原理分析
  10. [杂记]Ubuntu 常用解压与压缩命令
  11. 古筝d调变降e调怎么办_问:古筝k是什么意思
  12. Angularjs-项目搭建
  13. IO OutputStreamWriter和InputStreamReader
  14. 极点五笔常用操作及快捷键功能描述(v6.5)
  15. 【科普】有趣“小学”数学题,做出一道即可成名(持续补充)
  16. 好心情患者故事:节食暴食反复横跳,我确诊了重度抑郁
  17. 质量功能配置(QFD)矩阵
  18. 《Head First 设计模式》例子的C++实现(4 单件模式)
  19. 从键盘输入一个三位整数n,分别求出n的个位数字、十位数字和百位数字
  20. Surface Pro4 分辨率1分2 调整为1368*912

热门文章

  1. 异常已存在具有相同键的条目。_灵敏度高,却已停产——山进PR-D3Plus DX收音机评测...
  2. halcon窗体的移动和缩放_halcon与C#联合编程之鼠标控制图片缩放,拖动,roi
  3. 【5】测试用例设计-状态迁移图
  4. 21天Jenkins打卡Day17-查看Jenkins服务器上的目录结构
  5. linux下搭建博客Day8
  6. 做了十年的功能测试,下一步该晋升测试开发还是转行软件开发?
  7. 编译原理第三版清华pdf_清华网络科学与网络空间研究院考研经验分享
  8. android怎么做版本检测,android 实现检测版本,下载apk更新(附源码)
  9. java ide排名_Java程序员的困惑,Java IDE到底怎么选
  10. QTCreator快捷键