JS属性特性（属性描述符）

概念

创新互联拥有网站维护技术和项目管理团队，建立的售前、实施和售后服务体系，为客户提供定制化的成都网站制作、成都网站建设、网站维护、香港机房服务器托管解决方案。为客户网站安全和日常运维提供整体管家式外包优质服务。我们的网站维护服务覆盖集团企业、上市公司、外企网站、商城网站定制开发、政府网站等各类型客户群体，为全球成百上千家企业提供全方位网站维护、服务器维护解决方案。

ECMAScript 5 中定义了一个名叫“属性描述符”的对象，用于描述了的各种特征。属性描述符对象有4个属性：

  • configurable：可配置性，控制着其描述的属性的修改，表示能否修改属性的特性，能否把属性修改为访问器属性，或者能否通过delete删除属性从而重新定义属性。默认值为true。
  • enumerable：可枚举性，表示能否通过for-in遍历得到属性。默认值为true。
  • writable：可写性，表示能否修改属性的值。默认值为true。
  • value：数据属性，表示属性的值。默认值为undefined。

除了上面的属性，还有两个存取器属性，分别是get和set，可以代替value和writable。

  • get：在读取属性时调用的函数。只指定get则表示属性为只读属性。默认值为undefined。
  • set：在写入属性时调用的函数。只指定set则表示属性为只写属性。默认值为undefined。

使用

“属性描述符”对象只能在Object.defineProperty或Object.defineProperties中使用。

API 用法

Object.defineProperty：https://developer.mozilla.org...

Object.defineProperties： https://developer.mozilla.org...

 
 
    
  
  
  1. var hello = {}
    2. 
  
  
  2. 
  
  
  3. Object.defineProperty(hello, 'girl', {
    4. 
  
  
  4.     configurable: false,
    5. 
  
  
  5.     enumberable: false,
    6. 
  
  
  6.     writable: true,
    7. 
  
  
  7.     value: 'sexy'
    8. 
  
  
  8. })
    9. 
  
  
  9. 
  
  
  10. // 存取器
    11. 
  
  
  11. Object.defineProperty(hello, 'woman', {
    12. 
  
  
  12.     configurable: false,
    13. 
  
  
  13.     enumberable: false,
    14. 
  
  
  14.     get: function() {
    15. 
  
  
  15.         return this.girl
    16. 
  
  
  16.     },
    17. 
  
  
  17.     set: function(val) {
    18. 
  
  
  18.         this.girl = val
    19. 
  
  
  19.     }
    20. 
  
  
  20. })
    21. 
  
  
  21. 
  
  
  22. // 定义多个属性
    23. 
  
  
  23. Object.defineProperties(hello, {
    24. 
  
  
  24.     boy: {
    25. 
  
  
  25.         configurable: false,
    26. 
  
  
  26.         enumberable: false,
    27. 
  
  
  27.         writable: false,
    28. 
  
  
  28.         value: 'handsome'
    29. 
  
  
  29.     },
    30. 
  
  
  30.     man: {
    31. 
  
  
  31.         configurable: false,
    32. 
  
  
  32.         enumberable: false,
    33. 
  
  
  33.         writable: true,
    34. 
  
  
  34.         get: function() {
    35. 
  
  
  35.             return this.boy
    36. 
  
  
  36.         }
    37. 
  
  
  37.     }
    38. 
  
  
  38. }) 
    39.

当用Object.defineProperty或Object.defineProperties操作(新建或者修改)那些不允许创建或修改的属性时，会抛出类型错误异常。

 
 
    
  
  
  1. // 此例子运行在前面的例子的基础上
    2. 
  
  
  2. Object.defineProperty(hello, 'boy', {
    3. 
  
  
  3.     writable: true
    4. 
  
  
  4. })    // Uncaught TypeError: Cannot redefine property: boy 
    5.

因为前面boy属性已经被设置为不可配置，所以这里修改writable会抛出类型错误异常。

通过Object.getOwnPropertyDescriptor或者Object.getOwnPropertyDescriptors可以得到属性描述符。

API 用法

Object.getOwnPropertyDscriptor：https://developer.mozilla.org...

Object.getOwnPropertyDescriptors：https://developer.mozilla.org...

规则

 
 
    
  
  
  1. var rules = {
    2. 
  
  
  2.     common: 'test'
    3. 
  
  
  3. } 
    4.

如果属性是不可配置的，则不能修改它的可配置性和可枚举性。

 
 
    
  
  
  1. Object.defineProperty(rules, 'rule1', {
    2. 
  
  
  2.     configurable: false,
    3. 
  
  
  3.     enumberable: false
    4. 
  
  
  4. })
    5. 
  
  
  5. 
  
  
  6. // 修改configurable会抛出类型错误异常
    7. 
  
  
  7. Object.defineProperty(rules, 'rule1', {
    8. 
  
  
  8.     configurable: true
    9. 
  
  
  9. })    // Uncaught TypeError: Cannot redefine property: rule1
    10. 
  
  
  10. 
  
  
  11. // 修改enumberable不会抛出异常，但enmuberable没有被修改
    12. 
  
  
  12. Object.defineProperty(rules, 'rule1', {
    13. 
  
  
  13.     enumberable: true
    14. 
  
  
  14. })
    15. 
  
  
  15. Object.getOwnPropertyDescriptor(rules, 'rule1')    // Object {value: undefined, writable: false, enumerable: false, configurable: false} 
    16.

如果存取器属性是不可配置的，则不能修改get和set方法，也不能将它转换为数据属性。

 
 
    
  
  
  1. Object.defineProperty(rules, 'rule2', {
    2. 
  
  
  2.     configurable: false,
    3. 
  
  
  3.     enumberable: false,
    4. 
  
  
  4.     get: function() {
    5. 
  
  
  5.         return this.common
    6. 
  
  
  6.     },
    7. 
  
  
  7.     set: function(val) {
    8. 
  
  
  8.         this.common = val
    9. 
  
  
  9.     }
    10. 
  
  
  10. })
    11. 
  
  
  11. 
  
  
  12. // 修改get或者set方法会抛出类型错误异常
    13. 
  
  
  13. Object.defineProperty(rules, 'rule2', {
    14. 
  
  
  14.     get: function() {
    15. 
  
  
  15.         return this.common + 'rule2'
    16. 
  
  
  16.     }
    17. 
  
  
  17. })    // Uncaught TypeError: Cannot redefine property: rule2
    18. 
  
  
  18. 
  
  
  19. Object.defineProperty(rules, 'rule2', {
    20. 
  
  
  20.     set: function(val) {
    21. 
  
  
  21.         this.common = 'rule2'
    22. 
  
  
  22.     }
    23. 
  
  
  23. })    // Uncaught TypeError: Cannot redefine property: rule2
    24. 
  
  
  24. 
  
  
  25. // 将它转换为数据属性同样会抛出类型错误异常
    26. 
  
  
  26. Object.defineProperty(rules, 'rule2', {
    27. 
  
  
  27.     value: 'rule2'
    28. 
  
  
  28. })    // Uncaught TypeError: Cannot redefine property: rule2 
    29.

如果数据属性是不可配置的，则不能将它转换为存取器属性;同时，也不能将它的可写性从false修改为true，但可以从true修改为false。

 
 
    
  
  
  1. Object.defineProperty(rules, 'rule3', {
    2. 
  
  
  2.     configurable: false,
    3. 
  
  
  3.     writable: false,
    4. 
  
  
  4.     value: 'rule3'
    5. 
  
  
  5. })
    6. 
  
  
  6. 
  
  
  7. // 修改writable为true会抛出类型错误异常
    8. 
  
  
  8. Object.defineProperty(rules, 'rule3', {
    9. 
  
  
  9.     writable: true
    10. 
  
  
  10. })
    11. 
  
  
  11. 
  
  
  12. 
  
  
  13. Object.defineProperty(rules, 'rule4', {
    14. 
  
  
  14.     configurable: false,
    15. 
  
  
  15.     writable: true,
    16. 
  
  
  16.     value: 'rule4'
    17. 
  
  
  17. })
    18. 
  
  
  18. 
  
  
  19. // 可以修改writable为false
    20. 
  
  
  20. Object.defineProperty(rules, 'rule4', {
    21. 
  
  
  21.     writable: false
    22. 
  
  
  22. })
    23. 
  
  
  23. Object.getOwnPropertyDescriptor(rules, 'rule4')    //   Object {value: "rule4", writable: false, enumerable: false, configurable: false} 
    24.

如果数据属性是不可配置且不可写的，则不能修改他的值;如果是可配置但不可写，则可以修改他的值(实际上是先将它标记为可写的，然后修改它的值，***再将它标记回不可写)。

其实这里所说的修改值，是通过Object.defineProperty或Object.defineProperties方法修改。通过直接赋值的方法在数据属性不可配置的情况下是不能修改属性值的。

 
 
    
  
  
  1. Object.defineProperty(rules, 'rule5', {
    2. 
  
  
  2.     configurable: false,
    3. 
  
  
  3.     writable: false,
    4. 
  
  
  4.     value: 'rule5'
    5. 
  
  
  5. })
    6. 
  
  
  6. 
  
  
  7. // 修改属性值会抛出类型错误异常
    8. 
  
  
  8. Object.defineProperty(rules, 'rule5', {
    9. 
  
  
  9.     value: 'rule55'
    10. 
  
  
  10. })    // Uncaught TypeError: Cannot redefine property: rule5
    11. 
  
  
  11. 
  
  
  12. rules.rule5 = 'rule55'
    13. 
  
  
  13. // 值没有被修改，也不会抛出异常
    14. 
  
  
  14. rules.rule5            // 'rule5'
    15. 
  
  
  15. 
  
  
  16. 
  
  
  17. Object.defineProperty(rules, 'rule6', {
    18. 
  
  
  18.     configurable: true,
    19. 
  
  
  19.     writable: false,
    20. 
  
  
  20.     value: 'rule6'
    21. 
  
  
  21. })
    22. 
  
  
  22. 
  
  
  23. // 修改属性值
    24. 
  
  
  24. Object.defineProperty(rules, 'rule6', {
    25. 
  
  
  25.     value: 'rule66'
    26. 
  
  
  26. })
    27. 
  
  
  27. rules.rule6            // 'rule66'
    28. 
  
  
  28. 
  
  
  29. rules.rule6 = 'rule6'
    30. 
  
  
  30. // 值没有被修改，也不会修改
    31. 
  
  
  31. rules.rule6            // 'rule6' 
    32.

只指定set不能读，如果尝试读取该属性值，返回undefined。(红宝书上说在严格模式下才抛出异常，但没有)

 
 
    
  
  
  1. Object.defineProperty(rules, 'rule7', {
    2. 
  
  
  2.     get: function() {
    3. 
  
  
  3.         return this.common
    4. 
  
  
  4.     }
    5. 
  
  
  5. })
    6. 
  
  
  6. rules.rule7 = 'rule7'    // Uncaught TypeError: Cannot redefine property: rule7 
    7.

如果对象是不可扩展的，则可以编辑已有的自有属性，但不能给它添加新属性。

操作对象可扩展性的API有三个：Object.preventExtensions、Object.seal、Object.freeze。

API 用法

Object.preventExtensions：https://developer.mozilla.org...

Object.seal：https://developer.mozilla.org...

Object.freeze：https://developer.mozilla.org...

Object.isExtensions：https://developer.mozilla.org...

Object.isSealed：https://developer.mozilla.org...

Object.isFrozen：https://developer.mozilla.org...

使用Object.preventExtensions可以将对象转换为不可扩展。

使用Object.isExtensions来判断对象是否可扩展。

 
 
    
  
  
  1. var ex = {}
    2. 
  
  
  2. Object.defineProperty(ex, 'ex1', {
    3. 
  
  
  3.     configurable: true,
    4. 
  
  
  4.     writable: true,
    5. 
  
  
  5.     value: 'ex1'
    6. 
  
  
  6. })
    7. 
  
  
  7. Object.isExtensible(ex)        // true
    8. 
  
  
  8. Object.preventExtensions(ex)
    9. 
  
  
  9. Object.isExtensible(ex)        // false
    10. 
  
  
  10. 
  
  
  11. // 可以修改已有的属性
    12. 
  
  
  12. Object.defineProperty(ex, 'ex1', {
    13. 
  
  
  13.     writable: false,
    14. 
  
  
  14.     value: 'ex11'
    15. 
  
  
  15. })
    16. 
  
  
  16. Object.getOwnPropertyDescriptor(ex, 'ex1')    // Object {value: "ex11", writable: false, enumerable: false, configurable: true}
    17. 
  
  
  17. 
  
  
  18. // 添加属性会抛出类型错误异常
    19. 
  
  
  19. Object.defineProperty(ex, 'ex2', {
    20. 
  
  
  20.     value: 'ex2'
    21. 
  
  
  21. })    // Uncaught TypeError: Cannot define property:ex2, object is not extensible. 
    22.

使用Object.seal除了可以将对象转换为不可扩展的，还可以将对象的所有自有属性都转换为不可配置的。即不能给对象添加新属性，而且它已有的属性也不能删除或者配置(这里同样会遵循前面的规则)。

使用Object.isSealed来判断对象是否封闭(sealed)。

 
 
    
  
  
  1. var se = {}
    2. 
  
  
  2. Object.defineProperty(se, 'se1', {
    3. 
  
  
  3.     configurable: true,
    4. 
  
  
  4.     writable: false,
    5. 
  
  
  5.     value: 'se1'
    6. 
  
  
  6. })
    7. 
  
  
  7. Object.isSealed(se)        // false
    8. 
  
  
  8. Object.seal(se)
    9. 
  
  
  9. Object.isSealed(se)        // true
    10. 
  
  
  10. 
  
  
  11. // 修改已有的属性会抛出类型错误异常
    12. 
  
  
  12. Object.defineProperty(se, 'se1', {
    13. 
  
  
  13.     writable: true,
    14. 
  
  
  14.     value: 'se11'
    15. 
  
  
  15. })    // Uncaught TypeError: Cannot redefine property: se1
    16. 
  
  
  16. 
  
  
  17. // 添加属性会抛出类型错误异常
    18. 
  
  
  18. Object.defineProperty(se, 'se2', {
    19. 
  
  
  19.     value: 'se2'
    20. 
  
  
  20. })    // Uncaught TypeError: Cannot define property:se2, object is not extensible. 
    21.

使用Object.freeze除了将对象转换为不可扩展的和将其属性转换为不可配置的之外，还可以将自有属性转换为只读。(如果对象设置了set，存取器属性将不会受影响，仍可以调用set方法,而且不会抛出异常，但如果set方法是改变该对象的属性，则不能修改成功)

使用Object.isFrozen来检测对象是否冻结(frozen)。

 
 
    
  
  
  1. var fr = {}
    2. 
  
  
  2. Object.defineProperty(fr, 'fr1', {
    3. 
  
  
  3.     configurable: true,
    4. 
  
  
  4.     writable: false,
    5. 
  
  
  5.     value: 'fr1'
    6. 
  
  
  6. })
    7. 
  
  
  7. Object.isFrozen(fr)        // false
    8. 
  
  
  8. Object.freeze(fr)
    9. 
  
  
  9. Object.isFrozen(fr)        // true
    10. 
  
  
  10. 
  
  
  11. // 修改已有的属性会抛出类型错误异常
    12. 
  
  
  12. Object.defineProperty(fr, 'fr1', {
    13. 
  
  
  13.     writable: true,
    14. 
  
  
  14.     value: 'fr11'
    15. 
  
  
  15. })    // Uncaught TypeError: Cannot redefine property: fr1
    16. 
  
  
  16. 
  
  
  17. // 添加属性会抛出类型错误异常
    18. 
  
  
  18. Object.defineProperty(fr, 'fr2', {
    19. 
  
  
  19.     value: 'fr2'
    20. 
  
  
  20. })    // Uncaught TypeError: Cannot define property:fr2, object is not extensible.
    21. 
  
  
  21. 
  
  
  22. fr.fr1 = 'fr11'
    23. 
  
  
  23. // 不能修fr1属性
    24. 
  
  
  24. fr.fr1            // 'fr1'
    25. 
  
  
  25. var set = {}
    26. 
  
  
  26. Object.defineProperty(set, 'set1', {
    27. 
  
  
  27.     configurable: true,
    28. 
  
  
  28.     value: 'set1'
    29. 
  
  
  29. })
    30. 
  
  
  30. Object.defineProperty(set, 'set2', {
    31. 
  
  
  31.     configurable: true,
    32. 
  
  
  32.     set: function(val) {
    33. 
  
  
  33.         this.set1 = val
    34. 
  
  
  34.     }
    35. 
  
  
  35. })
    36. 
  
  
  36. Object.isFrozen(set)        // false
    37. 
  
  
  37. Object.freeze(set)
    38. 
  
  
  38. Object.isFrozen(set)        // true
    39. 
  
  
  39. 
  
  
  40. set.set2 = 'set2'
    41. 
  
  
  41. set.set1                    // 'set1' 
    42.

结语

我对属性描述符很不熟悉，主要是因为平时用得少。不过最近，开始学写一些小的库(虽然很挫)，就感觉属性描述符有使用的场景了。我暂时能想到的就是将库对象的一些属性设置为只读，以防止对象的一些属性被用户重写覆盖了。还有一个用法是在知乎和学vue的时候知道的，就是通过getter和setter实现“监听”对象属性的数据更新(在这里挖一个坑。后面学习一下这种方法，再写一篇“监听”对象属性的数据更新的文章)。

***，如果大家知道更多属性描述符的使用后场景，希望大家能在评论区留下你们的高见。

当前名称：JS属性特性（属性描述符）
URL网址：http://www.gawzjz.com/qtweb2/news5/29655.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

App开发知识

分类信息网站

成都服务器托管　　 　蜀锦在线　　 　成都网站制作　　 　网站空间　　 　成都光华电信机房　　 　官网SEO排名　　 　网站优化排名　　 　自适应网页设计　　 　快照排名　　 　眉山电信机房托管　　 　和正兴机械　　 　wap网站建设　　 　成都小程序开发　　 　网络推广公司　　 　香港虚拟主机　　 　微博营销　　 　微信网站开发　　 　手机网站建设　　 　金羊影视传媒　　 　装饰公司网站建设方案