defineProperty AND defineProperties

时间 2019-11-09

标签 defineproperty defineproperties 繁體版

原文原文链接

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

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

function defineProperties(obj, properties) {
  function convertToDescriptor(desc) {
    function hasProperty(obj, prop) {
      return Object.prototype.hasOwnProperty.call(obj, prop);
    }

    function isCallable(v) {
      // NB: modify as necessary if other values than functions are callable.
      return typeof v === 'function';
    }

    if (typeof desc !== 'object' || desc === null)
      throw new TypeError('bad desc');

    var d = {};

    if (hasProperty(desc, 'enumerable'))
      d.enumerable = !!desc.enumerable;
    if (hasProperty(desc, 'configurable'))
      d.configurable = !!desc.configurable;
    if (hasProperty(desc, 'value'))
      d.value = desc.value;
    if (hasProperty(desc, 'writable'))
      d.writable = !!desc.writable;
    if (hasProperty(desc, 'get')) {
      var g = desc.get;

      if (!isCallable(g) && typeof g !== 'undefined')
        throw new TypeError('bad get');
      d.get = g;
    }
    if (hasProperty(desc, 'set')) {
      var s = desc.set;
      if (!isCallable(s) && typeof s !== 'undefined')
        throw new TypeError('bad set');
      d.set = s;
    }

    if (('get' in d || 'set' in d) && ('value' in d || 'writable' in d))
      throw new TypeError('identity-confused descriptor');

    return d;
  }

  if (typeof obj !== 'object' || obj === null)
    throw new TypeError('bad obj');

  properties = Object(properties);

  var keys = Object.keys(properties);
  var descs = [];

  for (var i = 0; i < keys.length; i++)
    descs.push([keys[i], convertToDescriptor(properties[keys[i]])]);

  for (var i = 0; i < descs.length; i++)
    Object.defineProperty(obj, descs[i][0], descs[i][1]);

  return obj;
}

### 参数浏览器

`obj `在其上定义或修改属性的对象。
`prop` 要定义或修改的属性的名称。
`descriptor` 将被定义或修改的属性描述符。
`返回值 ` `被传递给函数的对象`。
`props` 要定义其可枚举属性或修改的属性描述符的对象。对象中存在的属性描述符主要有两种：`数据描述符`和`访问器描述符`。描述符具备如下键：
数据描述符和存取描述符均具备如下可选键值：
对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。数据描述符是一个具备值的属性，该值多是可写的，也可能不是可写的。`存取描述符`是由`getter-setter`函数对描述的属性。描述符必须是这两种形式之一；不能同时是二者。
  `configurable` true 当且仅当该属性描述符的类型能够被改变而且该属性能够从对应对象中删除。`默认为 false`
  `enumerable` true 当且仅当在枚举相应对象上的属性时该属性显现。` 默认为 false`  for ... in obj  obj.keys() 实现内部原理
数据描述符同时具备如下可选键值：
  `value` 与属性关联的值。能够是任何有效的JavaScript值（数字，对象，函数等）。 ` 默认为 undefined`.
  `writable` true当且仅当与该属性相关联的值能够用assignment operator改变时。 `默认为 false`  当须要些一些不能够被更改的属性时可使用
存取描述符同时具备如下可选键值：
  `get `做为该属性的 getter 函数，若是没有 getter 则为undefined。函数返回值将被用做属性的值。默认为 undefined
  `set `做为属性的 setter 函数，若是没有 setter 则为undefined。函数将仅接受参数赋值给该属性的新值。默认为 undefined

若是一个描述符不具备value,writable,get 和 set 任意一个关键字，那么它将被认为是一个数据描述符。若是一个描述符同时有(value或writable)和(get或set)关键字，将会产生一个异常。


记住，这些选项不必定是自身属性，若是是继承来的也要考虑。为了确认保留这些默认值，你可能要在这以前冻结 Object.prototype，明确指定全部的选项，或者将__proto__属性指向null。

使用 __proto__
   var obj = {};
   var descriptor = Object.create(null); // 没有继承的属性
   // 默认没有 enumerable，没有 configurable，没有 writable
   descriptor.value = 'static';
   Object.defineProperty(obj, 'key', descriptor);

   // 显式
   Object.defineProperty(obj, "key", {
     enumerable: false,
     configurable: false,
     writable: false,
     value: "static"
   });

   // 循环使用同一对象
   function withValue(value) {
     var d = withValue.d || (
       withValue.d = {
         enumerable: false,
         writable: false,
         configurable: false,
         value: null
       }
     );
     d.value = value;
     return d;
   }
   // ... 而且 ...
   Object.defineProperty(obj, "key", withValue("static")); 
   // 若是 freeze 可用, 防止代码添加或删除对象原型的属性
   // （value, get, set, enumerable, writable, configurable）
   (Object.freeze||Object)(Object.prototype);

###做用：
☆建立属性
当描述符中省略某些字段时，这些字段将使用它们的默认值。拥有布尔值的字段的默认值都是false。value，get和set字段的默认值为undefined。一个没有get/set/value/writable定义的属性被称为“通用的”，并被“键入”为一个数据描述符。
```
var o = {}; // 建立一个新对象

在对象中添加一个属性与数据描述符的示例
Object.defineProperty(o, "a", {
  value : 37,
  writable : true,
  enumerable : true,
  configurable : true
});

// 对象o拥有了属性a，值为37

// 在对象中添加一个属性与存取描述符的示例
var bValue;
Object.defineProperty(o, "b", {
  get : function(){
    return bValue;
  },
  set : function(newValue){
    bValue = newValue;
  },
  enumerable : true,
  configurable : true
});
o.b = 38;
// 对象o拥有了属性b，值为38
// 改变bValue也没法改变o.b
console.log(bValue);
  
// o.b的值如今老是与bValue相同，除非从新定义o.b

// 数据描述符和存取描述符不能混合使用
Object.defineProperty(o, "conflict", {
  value: 0x9f91102, 
  get: function() { 
    return 0xdeadbeef; 
  } 
});
throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
```
☆修改属性
若是属性已经存在，`Object.defineProperty()`将尝试根据描述符中的值以及对象当前的配置来修改这个属性。若是旧描述符将其`configurable` 属性设置为`false`，则该属性被认为是`“不可配置的”`，而且没有属性能够被改变（除了单向改变 `writable` 为 `false`）。当属性不可配置时，不能在数据和访问器属性类型之间切换。
当试图改变不可配置属性（除了writable 属性以外）的值时会抛出{jsxref("TypeError")}}，除非当前值和新值相同。
1 `Writable` 属性 当writable属性设置为false时，该属性被称为“不可写”。它不能被从新分配。 试图写入非可写属性不会改变它，也不会引起错误。
```
var o = {}; // Creates a new object

Object.defineProperty(o, 'a', {
  value: 37,
  writable: false
});

console.log(o.a); // logs 37
o.a = 25; // No error thrown
// (it would throw in strict mode,
// even if the value had been the same)
console.log(o.a); // logs 37. The assignment didn't work.

// strict mode
(function() {
  'use strict';
  var o = {};
  Object.defineProperty(o, 'b', {
    value: 2,
    writable: false
  });
  o.b = 3; // throws TypeError: "b" is read-only
  return o.b; // returns 2 without the line above
}());

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

var o = {};
  Object.defineProperty(o, "a", { value : 1, enumerable:true });
  Object.defineProperty(o, "b", { value : 2, enumerable:false });
  Object.defineProperty(o, "c", { value : 3 }); // enumerable defaults to false
  o.d = 4; // 若是使用直接赋值的方式建立对象的属性，则这个属性的enumerable为true

  for (var i in o) {    
    console.log(i);  
  }
  打印 'a' 和 'd' (in undefined order)

  Object.keys(o); // ["a", "d"]

  o.propertyIsEnumerable('a'); // true
  o.propertyIsEnumerable('b'); // false
  o.propertyIsEnumerable('c'); // false
  ```
  3 Configurable 特性 configurable特性表示对象的属性是否能够被删除，以及除writable特性外的其余特性是否能够被修改。
  若是o.a的configurable属性为true，则不会抛出任何错误，而且该属性将在最后被删除。
    var o = {};
    Object.defineProperty(o, "a", { get : function(){return 1;},  configurable : false } ); //为true时，不会报错 结果为12  undefined（能够删除）

    // throws a TypeError Cannot redefine property: a
    Object.defineProperty(o, "a", {configurable : true}); 
    // // throws a TypeError
    Object.defineProperty(o, "a", {enumerable : true}); 
    // // throws a TypeError (set was undefined previously) 
    Object.defineProperty(o, "a", {set : function(){}}); 
    // // throws a TypeError (even though the new get does exactly the same thing) 
    Object.defineProperty(o, "a", {get : function(){return 1;}});
    // // throws a TypeError
    Object.defineProperty(o, "a", {value : 12});

    console.log(o.a); // logs 1
    delete o.a; // Nothing happens
    console.log(o.a); // logs 1
```
  ☆  添加多个属性和默认值
  考虑特性被赋予的默认特性值很是重要，一般，使用点运算符和Object.defineProperty()为对象的属性赋值时，数据描述符中的属性默认值是不一样的，以下例所示。
  
  ```
  var o = {};

  o.a = 1;
  // 等同于 :
  Object.defineProperty(o, "a", {
    value : 1,
    writable : true,
    configurable : true,
    enumerable : true
  });


  // 另外一方面，
  Object.defineProperty(o, "a", { value : 1 });
  // 等同于 :
  Object.defineProperty(o, "a", {
    value : 1,
    writable : false,
    configurable : false,
    enumerable : false
  });
  ```
  ☆ 通常的 `Setter` 和 `Getters`
  下面的例子展现了如何实现一个自存档对象。 当设置temperature 属性时，archive 数组会获取日志条目。
  ```
  function Archiver() {
    var temperature = null;
    var archive = [];

    Object.defineProperty(this, 'temperature', {
      get: function() {
        console.log('get!');
        return temperature;
      },
      set: function(value) {
        temperature = value;
        archive.push({ val: temperature });
      }
    });

    this.getArchive = function() { return archive; };
  }

  var arc = new Archiver();
  arc.temperature; // 'get!'
  arc.temperature = 11;
  arc.temperature = 13;
  arc.getArchive(); // [{ val: 11 }, { val: 13 }]
  ```
  // 或
  
  ```
  var pattern = {
      get: function () {
          return 'I alway return this string,whatever you have assigned';
      },
      set: function () {
          this.myname = 'this is my name string';
      }
  };


  function TestDefineSetAndGet() {
      Object.defineProperty(this, 'myproperty', pattern);
  }


  var instance = new TestDefineSetAndGet();
  instance.myproperty = 'test';

  // 'I alway return this string,whatever you have assigned'
  console.log(instance.myproperty);
  // 'this is my name string'
  console.log(instance.myname);
  ```
  
  ☆ ☆兼容性问题
  1 数组的 length 属性重定义是可能的，可是会受到通常的重定义限制。（length 属性初始为 non-configurable，non-enumerable 以及 writable。对于一个内容不变的数组，改变其 length 属性的值或者使它变为 non-writable 是可能的。可是改变其可枚举性和可配置性或者当它是 non-writable 时尝试改变它的值或是可写性，这二者都是不容许的。）然而，并非全部的浏览器都容许 Array.length 的重定义。

  在 Firefox 4 至 22 版本中尝试去重定义数组的 length 属性都会抛出一个 TypeError 异常。

  有些版本的Chrome中，Object.defineProperty() 在某些状况下会忽略不一样于数组当前length属性的length值。有些状况下改变可写性并不起做用（也不抛出异常）。同时，好比Array.prototype.push的一些数组操做方法也不会考虑不可读的length属性。

  有些版本的Safari中，Object.defineProperty()  在某些状况下会忽略不一样于数组当前length属性的length值。尝试改变可写性的操做会正常执行而不抛出错误，但事实上并未改变属性的可写性。

  只在Internet Explorer 9及之后版本和Firefox 23及之后版本中，才完整地正确地支持数组length属性的从新定义。目前不要依赖于重定义数组length 属性可以起做用，或在特定情形下起做用。与此同时，即便你可以依赖于它，你也没有合适的理由这样作。
  2 Internet Explorer 8 具体案例
  Internet Explorer 8 实现了 Object.defineProperty() 方法，但 只能在 DOM 对象上使用。 须要注意的一些事情：

  尝试在原生对象上使用 Object.defineProperty()会报错。
  属性特性必须设置一些特定的值。对于数据属性描述符，configurable, enumerable 和 writable 特性必须所有设置为 true；对于访问器属性描述符，configurable 必须设置为 true，enumerable 必须设置为 false。(?) 任何试图提供其余值(?)将致使一个错误抛出。
  从新配置一个属性首先须要删除该属性。若是属性没有删除，就如同从新配置前的尝试。