属性形貌对象

JavaScript 供应了一个内部数据结构,用来形貌对象的属性,掌握它的行动,比方该属性是不是可写、可罗列等等。这个内部数据结构称为“属性形貌对象”(attributes object)。每一个属性都有本身对应的属性形貌对象,保留该属性的一些元信息。

元属性

属性形貌对象的各个属性称为“元属性”,由于它们能够看做是掌握属性的属性。

value

value 属性是目的属性的值。

var obj = { p : 123 };

Object.getOwnPropertyDescriptor(obj, 'p').value   // 123

Object.defineProperty(obj, 'p', { value: 246 });
obj.p     // 246

改写 value 属性时,只需 writableconfigurable 有一个为 true,就许可修正。只要 writableconfigurable 两个都为 false 时,value 属性才不可改写。

var obj = Object.defineProperty({}, 'p', {
  value: 1,
  writable: false,
  configurable: false
});

Object.defineProperty(obj, 'p', {value: 2})
// TypeError: Cannot redefine property: p

obj.p = 4
obj.p       // 1

value 属性不可改写时,直接属性赋值,不报错,但不会胜利。在严厉形式下会报错,纵然对属性从新给予一个一样的值。

writable

writable 属性是一个布尔值,决议了目的属性的值 value 是不是能够被转变。

var obj = {};

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

obj.a         // 37
obj.a = 25;
obj.a         // 37

假如原型对象的某个属性的 writablefalse,那末子对象将没法自定义这个属性。

var proto = Object.defineProperty({}, 'foo', {
  value: 'a',
  writable: false
});

var obj = Object.create(proto);

obj.foo = 'b';
obj.foo    // 'a'

然则,有一个躲避要领,就是经由过程掩盖属性形貌对象,绕过这个限定。原因是这类情况下,原型链会被完整无视。

Object.defineProperty(obj, 'foo', {
  value: 'b'
});

obj.foo   // "b"

enumerable

enumerable (可罗列性)属性是一个布尔值,示意目的属性是不是可罗列。

假如一个属性的 enumerablefalse 时,下面四个操纵将不会取到该属性。

  • for..in 轮回
  • Object.keys() 要领
  • JSON.stringify() 要领
  • Object.assign():只拷贝对象本身的可罗列的属性。
var obj = {};

Object.defineProperty(obj, 'x', {
  value: 123,
  enumerable: false
});

obj.x                   // 123
for (var key in obj) {console.log(key);}  // undefined
Object.keys(obj)        // []
JSON.stringify(obj)     // "{}"

JSON.stringify 要领会消除 enumerablefalse 的属性,假如对象的 JSON 花样输出要消除某些属性,就能够应用这一点把这些属性的 enumerable 设为 false

configurable

configurable (可设置性)返回一个布尔值,决议了是不是能够修正属性形貌对象。也就是说,configurablefalse 时,valuewritableenumerableconfigurable 都不能被修正了。

var obj = Object.defineProperty({}, 'p', {
  value: 1,
  writable: false,
  enumerable: false,
  configurable: false
});

Object.defineProperty(obj, 'p', {value: 2})
// TypeError: Cannot redefine property: p

Object.defineProperty(obj, 'p', {writable: true})
// TypeError: Cannot redefine property: p

Object.defineProperty(obj, 'p', {enumerable: true})
// TypeError: Cannot redefine property: p

Object.defineProperty(obj, 'p', {configurable: true})
// TypeError: Cannot redefine property: p

注重,writable 只要在 false 改成 true 时会报错,true 改成 false 是许可的。

var obj = Object.defineProperty({}, 'p', {
  writable: true,
  configurable: false
});

Object.defineProperty(obj, 'p', {writable: false})  // 修正胜利

可设置性决议了目的属性是不是能够被删除(delete)。configurabletrue 时,属性能够被删除,为 false 时,属性不可被删除。

var obj = Object.defineProperties({}, {
  p1: { value: 1, configurable: true },
  p2: { value: 2, configurable: false }
});

delete obj.p1    // true
delete obj.p2    // false

obj.p1    // undefined
obj.p2    // 2

存取器

除了直接定义之外,属性还能够用存取器(accessor)定义。个中,存值函数称为 setter,运用属性形貌对象的 set 属性;取值函数称为 getter,运用属性形貌对象的 get 属性。

一旦对目的属性定义了存取器,那末存取的时刻,都将实行对应的函数。应用这个功用,能够完成很多高等特征,比方某个属性制止赋值。

var obj = Object.defineProperty({}, 'p', {
  get: function () { return 'getter'; },
  set: function (value) { console.log('setter: ' + value); }
});

obj.p          // "getter"
obj.p = 123    // "setter: 123"

一旦定义了取值函数 get 或存值函数 set,就不能同时定义 writable 属性或 value 属性,不然会报错。假如经由过程 Object.defineProperty() 重定义 writable 属性或 value 属性,那末取值函数 get 和存值函数 set 将会被 valuewritable 掩盖。

var obj = Object.defineProperty({}, 'p', {
  get: function () { return 'getter'; },
  set: function (value) { console.log('setter: ' + value); },
  configurable: true
});
    
Object.getOwnPropertyDescriptor(obj,'p')
// { get: ƒ (),
//   set: ƒ (value),
//   enumerable: false,
//   configurable: true
// }

// 重定义
Object.defineProperty(obj, 'p', { writable:true });
Object.getOwnPropertyDescriptor(obj,'p')
// {value: undefined, writable: true, enumerable: false, configurable: true}

JavaScript 还供应了存取器的另一种写法。与定义属性形貌对象是等价的,而且运用更普遍。

var obj = {
  get p() {
    return 'getter';
  },
  set p(value) {
    console.log('setter: ' + value);
  }
};

注重,取值函数 get 不能接收参数,存值函数 set 只能接收一个参数(即属性的值)。

存取器每每用于,属性的值依靠对象内部数据的场所。

var obj ={
  $n : 5,
  get next() { return this.$n },
  set next(n) {
    if (n >= this.$n) this.$n = n;
    else throw new Error('新的值必需大于当前值');
  }
};

obj.next         // 5

obj.next = 10;
obj.next         // 10

obj.next = 5;    // Uncaught Error: 新的值必需大于当前值

与属性形貌对象相干的要领

1. Object.getOwnPropertyDescriptor()

Object.getOwnPropertyDescriptor() 能够猎取某个属性的属性形貌对象。它的第一个参数是对象,第二个参数是对象的某个属性名。返回的是该属性的属性形貌对象。

var obj = { p1: 'a',  p2: 'b'};

Object.getOwnPropertyDescriptor(obj, 'p1')
// { value: "a",
//   writable: true,
//   enumerable: true,
//   configurable: true
// }
    

只能用于对象本身的(非继续的)属性。继续的或不存在的属性返回 undefined

Object.getOwnPropertyDescriptor(obj, 'toString')   // undefined

2. Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors() 能够猎取参数对象的一切属性的属性形貌对象。ES2017 引入规范。

Object.getOwnPropertyDescriptors(obj)
// { p1: {value: "a", writable: true, enumerable: true, configurable: true}
//   p2: {value: "b", writable: true, enumerable: true, configurable: true}
// }

3. Object.defineProperty()

Object.defineProperty() 要领许可经由过程属性形貌对象,定义或修正一个属性,然后返回修正后的形貌对象。

Object.defineProperty(object, propertyName, attributesObject)

Object.defineProperty() 要领接收三个参数,顺次以下。

  • object:属性地点的对象
  • propertyName:字符串,示意属性名
  • attributesObject:属性形貌对象
var obj = Object.defineProperty({}, 'p', {
  value: 123,
  writable: false,
  enumerable: true,
  configurable: false
});
obj.p         // 123
obj.p = 246;
obj.p         // 123

注重,上例中第一个参数是{ }(一个新建的空对象),p属性直接定义在这个空对象上面,然后返回这个对象,这是 Object.defineProperty() 的罕见用法。

假如属性已存在,Object.defineProperty() 要领相当于更新该属性的属性形貌对象。

4. Object.defineProperties()

Object.defineProperties() 要领能够定义或修正多个属性。接收两个参数。

var obj = Object.defineProperties({}, {
  p1: { value: 123, enumerable: true },
  p2: { value: 'abc', enumerable: true },
  p3: { get: function () { return this.p1 + this.p2 },
    enumerable:true,
    configurable:true
  }
});

obj.p1  // 123
obj.p2  // "abc"
obj.p3  // "123abc"

元属性默认值

Object.defineProperty()Object.defineProperties() 参数内里的属性形貌对象,writableconfigurableenumerable 这三个属性的默认值都为 false

var obj = {};
Object.defineProperty(obj, 'foo', {});
Object.getOwnPropertyDescriptor(obj, 'foo')
// {
//   value: undefined,
//   writable: false,
//   enumerable: false,
//   configurable: false
// }

5. Object.prototype.propertyIsEnumerable()

实例对象的 propertyIsEnumerable() 要领返回一个布尔值,用来推断某个属性是不是可罗列。

var obj = {};
obj.p = 123;

obj.propertyIsEnumerable('p')           // true
obj.propertyIsEnumerable('toString')    // false

注重,这个要领只能用于推断对象本身的属性,关于继续的属性一概返回 false

参考链接:JavaScript 教程 属性形貌对象

    原文作者:Dora36
    原文地址: https://segmentfault.com/a/1190000017231733
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞