资讯专栏INFORMATION COLUMN

defineProperty AND defineProperties

Shihira / 2804人阅读

摘要:返回值被传递给函数的对象。描述符必须是这两种形式之一不能同时是两者。默认为实现内部原理数据描述符同时具有以下可选键值与属性关联的值。一个没有定义的属性被称为通用的,并被键入为一个数据描述符。

Object.defineProperty(obj, prop, descriptor) 该方法允许精确添加或修改对象的属性。通过赋值来添加的普通属性会创建在属性枚举期间显示的属性(for...in Object.keys 方法), 这些值可以被改变,也可以被删除。这种方法允许这些额外的细节从默认值改变。默认情况下,使用Object.defineProperty()添加的属性值是不可变的。

</>复制代码

  1. `Object.defineProperties(obj, props)`` Object.defineProperties`本质上定义了`obj` 对象上`props``可枚举属性`相对应的所有属性。
  2. `Object.defineProperties(obj, props)`实现

</>复制代码

  1. function defineProperties(obj, properties) {
  2. function convertToDescriptor(desc) {
  3. function hasProperty(obj, prop) {
  4. return Object.prototype.hasOwnProperty.call(obj, prop);
  5. }
  6. function isCallable(v) {
  7. // NB: modify as necessary if other values than functions are callable.
  8. return typeof v === "function";
  9. }
  10. if (typeof desc !== "object" || desc === null)
  11. throw new TypeError("bad desc");
  12. var d = {};
  13. if (hasProperty(desc, "enumerable"))
  14. d.enumerable = !!desc.enumerable;
  15. if (hasProperty(desc, "configurable"))
  16. d.configurable = !!desc.configurable;
  17. if (hasProperty(desc, "value"))
  18. d.value = desc.value;
  19. if (hasProperty(desc, "writable"))
  20. d.writable = !!desc.writable;
  21. if (hasProperty(desc, "get")) {
  22. var g = desc.get;
  23. if (!isCallable(g) && typeof g !== "undefined")
  24. throw new TypeError("bad get");
  25. d.get = g;
  26. }
  27. if (hasProperty(desc, "set")) {
  28. var s = desc.set;
  29. if (!isCallable(s) && typeof s !== "undefined")
  30. throw new TypeError("bad set");
  31. d.set = s;
  32. }
  33. if (("get" in d || "set" in d) && ("value" in d || "writable" in d))
  34. throw new TypeError("identity-confused descriptor");
  35. return d;
  36. }
  37. if (typeof obj !== "object" || obj === null)
  38. throw new TypeError("bad obj");
  39. properties = Object(properties);
  40. var keys = Object.keys(properties);
  41. var descs = [];
  42. for (var i = 0; i < keys.length; i++)
  43. descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);
  44. for (var i = 0; i < descs.length; i++)
  45. Object.defineProperty(obj, descs[i][0], descs[i][1]);
  46. return obj;
  47. }

### 参数

</>复制代码

  1. `obj `在其上定义或修改属性的对象。
  2. `prop` 要定义或修改的属性的名称。
  3. `descriptor` 将被定义或修改的属性描述符。
  4. `返回值 ` `被传递给函数的对象`
  5. `props` 要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种:`数据描述符``访问器描述符`。描述符具有以下键:
  6. 数据描述符和存取描述符均具有以下可选键值:
  7. 对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符。数据描述符是一个具有值的属性,该值可能是可写的,也可能不是可写的。`存取描述符`是由`getter-setter`函数对描述的属性。描述符必须是这两种形式之一;不能同时是两者。
  8. `configurable` true 当且仅当该属性描述符的类型可以被改变并且该属性可以从对应对象中删除。`默认为 false`
  9. `enumerable` true 当且仅当在枚举相应对象上的属性时该属性显现。` 默认为 false` for ... in obj obj.keys() 实现内部原理
  10. 数据描述符同时具有以下可选键值:
  11. `value` 与属性关联的值。可以是任何有效的JavaScript值(数字,对象,函数等)。 ` 默认为 undefined`.
  12. `writable` true当且仅当与该属性相关联的值可以用assignment operator改变时。 `默认为 false` 当需要些一些不可以被更改的属性时可以使用
  13. 存取描述符同时具有以下可选键值:
  14. `get `作为该属性的 getter 函数,如果没有 getter 则为undefined。函数返回值将被用作属性的值。默认为 undefined
  15. `set `作为属性的 setter 函数,如果没有 setter 则为undefined。函数将仅接受参数赋值给该属性的新值。默认为 undefined
  16. 如果一个描述符不具有value,writable,getset 任意一个关键字,那么它将被认为是一个数据描述符。如果一个描述符同时有(value或writable)和(getset)关键字,将会产生一个异常。
  17. 记住,这些选项不一定是自身属性,如果是继承来的也要考虑。为了确认保留这些默认值,你可能要在这之前冻结 Object.prototype,明确指定所有的选项,或者将__proto__属性指向null

</>复制代码

  1. 使用 __proto__
  2. var obj = {};
  3. var descriptor = Object.create(null); // 没有继承的属性
  4. // 默认没有 enumerable,没有 configurable,没有 writable
  5. descriptor.value = "static";
  6. Object.defineProperty(obj, "key", descriptor);
  7. // 显式
  8. Object.defineProperty(obj, "key", {
  9. enumerable: false,
  10. configurable: false,
  11. writable: false,
  12. value: "static"
  13. });
  14. // 循环使用同一对象
  15. function withValue(value) {
  16. var d = withValue.d || (
  17. withValue.d = {
  18. enumerable: false,
  19. writable: false,
  20. configurable: false,
  21. value: null
  22. }
  23. );
  24. d.value = value;
  25. return d;
  26. }
  27. // ... 并且 ...
  28. Object.defineProperty(obj, "key", withValue("static"));
  29. // 如果 freeze 可用, 防止代码添加或删除对象原型的属性
  30. // (value, get, set, enumerable, writable, configurable)
  31. (Object.freeze||Object)(Object.prototype);

</>复制代码

  1. ###作用:
  2. ☆创建属性
  3. 当描述符中省略某些字段时,这些字段将使用它们的默认值。拥有布尔值的字段的默认值都是falsevaluegetset字段的默认值为undefined。一个没有get/set/value/writable定义的属性被称为“通用的”,并被“键入”为一个数据描述符。
  4. ```
  5. var o = {}; // 创建一个新对象
  6. 在对象中添加一个属性与数据描述符的示例
  7. Object.defineProperty(o, "a", {
  8. value : 37,
  9. writable : true,
  10. enumerable : true,
  11. configurable : true
  12. });
  13. // 对象o拥有了属性a,值为37
  14. // 在对象中添加一个属性与存取描述符的示例
  15. var bValue;
  16. Object.defineProperty(o, "b", {
  17. get : function(){
  18. return bValue;
  19. },
  20. set : function(newValue){
  21. bValue = newValue;
  22. },
  23. enumerable : true,
  24. configurable : true
  25. });
  26. o.b = 38;
  27. // 对象o拥有了属性b,值为38
  28. // 改变bValue也无法改变o.b
  29. console.log(bValue);
  30. // o.b的值现在总是与bValue相同,除非重新定义o.b
  31. // 数据描述符和存取描述符不能混合使用
  32. Object.defineProperty(o, "conflict", {
  33. value: 0x9f91102,
  34. get: function() {
  35. return 0xdeadbeef;
  36. }
  37. });
  38. throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
  39. ```
  40. ☆修改属性
  41. 如果属性已经存在,`Object.defineProperty()`将尝试根据描述符中的值以及对象当前的配置来修改这个属性。如果旧描述符将其`configurable` 属性设置为`false`,则该属性被认为是`“不可配置的”`,并且没有属性可以被改变(除了单向改变 `writable``false`)。当属性不可配置时,不能在数据和访问器属性类型之间切换。
  42. 当试图改变不可配置属性(除了writable 属性之外)的值时会抛出{jsxref("TypeError")}},除非当前值和新值相同。
  43. 1 `Writable` 属性 当writable属性设置为false时,该属性被称为“不可写”。它不能被重新分配。 试图写入非可写属性不会改变它,也不会引发错误。
  44. ```
  45. var o = {}; // Creates a new object
  46. Object.defineProperty(o, "a", {
  47. value: 37,
  48. writable: false
  49. });
  50. console.log(o.a); // logs 37
  51. o.a = 25; // No error thrown
  52. // (it would throw in strict mode,
  53. // even if the value had been the same)
  54. console.log(o.a); // logs 37. The assignment didn"t work.
  55. // strict mode
  56. (function() {
  57. "use strict";
  58. var o = {};
  59. Object.defineProperty(o, "b", {
  60. value: 2,
  61. writable: false
  62. });
  63. o.b = 3; // throws TypeError: "b" is read-only
  64. return o.b; // returns 2 without the line above
  65. }());

</>复制代码

  1. 2 `Enumerable `特性 enumerable定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举默认是true

</>复制代码

  1. var o = {};
  2. Object.defineProperty(o, "a", { value : 1, enumerable:true });
  3. Object.defineProperty(o, "b", { value : 2, enumerable:false });
  4. Object.defineProperty(o, "c", { value : 3 }); // enumerable defaults to false
  5. o.d = 4; // 如果使用直接赋值的方式创建对象的属性,则这个属性的enumerable为true
  6. for (var i in o) {
  7. console.log(i);
  8. }
  9. 打印 "a""d" (in undefined order)
  10. Object.keys(o); // ["a", "d"]
  11. o.propertyIsEnumerable("a"); // true
  12. o.propertyIsEnumerable("b"); // false
  13. o.propertyIsEnumerable("c"); // false
  14. ```
  15. 3 Configurable 特性 configurable特性表示对象的属性是否可以被删除,以及除writable特性外的其他特性是否可以被修改。
  16. 如果o.a的configurable属性为true,则不会抛出任何错误,并且该属性将在最后被删除。
  17. var o = {};
  18. Object.defineProperty(o, "a", { get : function(){return 1;}, configurable : false } ); //为true时,不会报错 结果为12 undefined(可以删除)
  19. // throws a TypeError Cannot redefine property: a
  20. Object.defineProperty(o, "a", {configurable : true});
  21. // // throws a TypeError
  22. Object.defineProperty(o, "a", {enumerable : true});
  23. // // throws a TypeError (set was undefined previously)
  24. Object.defineProperty(o, "a", {set : function(){}});
  25. // // throws a TypeError (even though the new get does exactly the same thing)
  26. Object.defineProperty(o, "a", {get : function(){return 1;}});
  27. // // throws a TypeError
  28. Object.defineProperty(o, "a", {value : 12});
  29. console.log(o.a); // logs 1
  30. delete o.a; // Nothing happens
  31. console.log(o.a); // logs 1
  32. ```
  33. ☆ 添加多个属性和默认值
  34. 考虑特性被赋予的默认特性值非常重要,通常,使用点运算符和Object.defineProperty()为对象的属性赋值时,数据描述符中的属性默认值是不同的,如下例所示。
  35. ```
  36. var o = {};
  37. o.a = 1;
  38. // 等同于 :
  39. Object.defineProperty(o, "a", {
  40. value : 1,
  41. writable : true,
  42. configurable : true,
  43. enumerable : true
  44. });
  45. // 另一方面,
  46. Object.defineProperty(o, "a", { value : 1 });
  47. // 等同于 :
  48. Object.defineProperty(o, "a", {
  49. value : 1,
  50. writable : false,
  51. configurable : false,
  52. enumerable : false
  53. });
  54. ```
  55. ☆ 一般的 `Setter``Getters`
  56. 下面的例子展示了如何实现一个自存档对象。 当设置temperature 属性时,archive 数组会获取日志条目。
  57. ```
  58. function Archiver() {
  59. var temperature = null;
  60. var archive = [];
  61. Object.defineProperty(this, "temperature", {
  62. get: function() {
  63. console.log("get!");
  64. return temperature;
  65. },
  66. set: function(value) {
  67. temperature = value;
  68. archive.push({ val: temperature });
  69. }
  70. });
  71. this.getArchive = function() { return archive; };
  72. }
  73. var arc = new Archiver();
  74. arc.temperature; // "get!"
  75. arc.temperature = 11;
  76. arc.temperature = 13;
  77. arc.getArchive(); // [{ val: 11 }, { val: 13 }]
  78. ```
  79. // 或
  80. ```
  81. var pattern = {
  82. get: function () {
  83. return "I alway return this string,whatever you have assigned";
  84. },
  85. set: function () {
  86. this.myname = "this is my name string";
  87. }
  88. };
  89. function TestDefineSetAndGet() {
  90. Object.defineProperty(this, "myproperty", pattern);
  91. }
  92. var instance = new TestDefineSetAndGet();
  93. instance.myproperty = "test";
  94. // "I alway return this string,whatever you have assigned"
  95. console.log(instance.myproperty);
  96. // "this is my name string"
  97. console.log(instance.myname);
  98. ```
  99. ☆ ☆兼容性问题
  100. 1 数组的 length 属性重定义是可能的,但是会受到一般的重定义限制。(length 属性初始为 non-configurable,non-enumerable 以及 writable。对于一个内容不变的数组,改变其 length 属性的值或者使它变为 non-writable 是可能的。但是改变其可枚举性和可配置性或者当它是 non-writable 时尝试改变它的值或是可写性,这两者都是不允许的。)然而,并不是所有的浏览器都允许 Array.length 的重定义。
  101. 在 Firefox 422 版本中尝试去重定义数组的 length 属性都会抛出一个 TypeError 异常。
  102. 有些版本的Chrome中,Object.defineProperty() 在某些情况下会忽略不同于数组当前length属性的length值。有些情况下改变可写性并不起作用(也不抛出异常)。同时,比如Array.prototype.push的一些数组操作方法也不会考虑不可读的length属性。
  103. 有些版本的Safari中,Object.defineProperty() 在某些情况下会忽略不同于数组当前length属性的length值。尝试改变可写性的操作会正常执行而不抛出错误,但事实上并未改变属性的可写性。
  104. 只在Internet Explorer 9及以后版本和Firefox 23及以后版本中,才完整地正确地支持数组length属性的重新定义。目前不要依赖于重定义数组length 属性能够起作用,或在特定情形下起作用。与此同时,即使你能够依赖于它,你也没有合适的理由这样做。
  105. 2 Internet Explorer 8 具体案例
  106. Internet Explorer 8 实现了 Object.defineProperty() 方法,但 只能在 DOM 对象上使用。 需要注意的一些事情:
  107. 尝试在原生对象上使用 Object.defineProperty()会报错。
  108. 属性特性必须设置一些特定的值。对于数据属性描述符,configurable, enumerable 和 writable 特性必须全部设置为 true;对于访问器属性描述符,configurable 必须设置为 true,enumerable 必须设置为 false。(?) 任何试图提供其他值(?)将导致一个错误抛出。
  109. 重新配置一个属性首先需要删除该属性。如果属性没有删除,就如同重新配置前的尝试。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96101.html

相关文章

  • 详解JavaScript之神奇的Object.defineProperty

    摘要:与当与同时为时,属性不能重新使用定义,严格模式下会报错示例云麒报错当或者为时,属性可以重新使用定义,这一点读者不妨自行测试。 摘要: JavaScript有个很神奇的Object.defineProperty(),了解一下? =与Object.defineProperty 为JavaScript对象新增或者修改属性,有两种不同方式:直接使用=赋值或者使用Object.definePro...

    baishancloud 评论0 收藏0
  • JS属性特性(属性描述符)

    摘要:概念中定义了一个名叫属性描述符的对象,用于描述了的各种特征。只指定则表示属性为只读属性。使用属性描述符对象只能在或中使用。修改已有的属性会抛出类型错误异常添加属性会抛出类型错误异常不能修属性结语我对属性描述符很不熟悉,主要是因为平时用得少。 概念 ECMAScript 5 中定义了一个名叫属性描述符的对象,用于描述了的各种特征。属性描述符对象有4个属性: configurable:可...

    yeyan1996 评论0 收藏0
  • JavaScript深入理解对象方法——Object.defineProperty()

    摘要:返回值被传递给函数的对象。描述该方法允许精确添加或修改对象的属性。描述符必须是两种形式之一不能同时是两者。可以是任何有效的值数值,对象,函数等。该方法返回值被用作属性值。该方法将接受唯一参数,并将该参数的新值分配给该属性。 Object.defineProperties() Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性...

    woshicixide 评论0 收藏0
  • JS进阶篇--JS apply的巧妙用法以及扩展到Object.defineProperty的使用

    摘要:的使用对象是由多个名值对组成的无序的集合。目标属性所拥有的特性返回值传入函数的对象。是一种获得属性值的方法是一种设置属性值的方法。参考相关阅读链接基础篇中的可枚举属性与不可枚举属性以及扩展 Math.max 实现得到数组中最大的一项 var array = [1,2,3,4,5]; var max = Math.max.apply(null, array); console.log(m...

    jasperyang 评论0 收藏0
  • 属性描述对象

    摘要:可枚举性属性是一个布尔值,表示目标属性是否可枚举。可配置性返回一个布尔值,决定了是否可以修改属性描述对象。其中,存值函数称为,使用属性描述对象的属性取值函数称为,使用属性描述对象的属性。 JavaScript 提供了一个内部数据结构,用来描述对象的属性,控制它的行为,比如该属性是否可写、可枚举等等。这个内部数据结构称为属性描述对象(attributes object)。每个属性都有自己...

    developerworks 评论0 收藏0

发表评论

0条评论

Shihira

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<