双向数据绑定中重要属性-Object.defineProperty()详解

用户10106350

发布于 2022-10-28 11:03:37

5290

发布于 2022-10-28 11:03:37

文章被收录于专栏：WflynnWebWflynnWeb

Object.defineProperty(obj, prop, descriptor)：

会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
obj：要在其上定义属性的对象。
prop：要定义或修改的属性的名称。
descriptor：将被定义或修改的属性描述符
返回值：被传递给函数的对象。
通过赋值操作添加的普通属性是可枚举的，能够在属性枚举期间呈现出来（for...in 或 Object.keys 方法），这些属性的值可以被改变，也可以被删除。
默认情况下，使用 Object.defineProperty() 添加的属性值是不可修改的。

举例：首先定义一个对象

const obj = {
    firstName: 'A',
    lastName: 'B'
}

给这个对象添加一个fullName属性，fullName的值为obj.firstName-obj.lastName

Object.defineProperty(obj, 'fullName', {
    // 访问描述符
    // 当读取对象此属性值时自动调用, 将函数返回的值作为属性值, this为obj
    get () {
        return this.firstName + '-' + this.lastName
    },
    // 当修改了对象的当前属性值时自动调用, 监视当前属性值的变化, 修改相关的属性, this为obj
    set (value) {
        const names = value.split('-')
        this.firstName = names[0]
        this.lastName = names[1]
    }
})
console.log(obj.fullName) // A-B

属性描述符

对象里目前存在的属性描述符有两种主要形式：数据描述符和存取描述符。 数据描述符：是一个具有值的属性，该值可能是可写的，也可能不是可写的。 存取描述符：是由getter-setter函数对描述的属性。描述符必须是这两种形式之一；不能同时是两者。

数据描述符和存取描述符均具有以下可选键值

configurable：当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
enumerable：当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。

数据描述符同时具有以下可选键值：

value：该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
writable：当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。

存取描述符同时具有以下可选键值：

get：一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。默认为 undefined。
set：一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。默认为 undefined。

描述符可同时具有的键值

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

创建属性

如果对象中不存在指定的属性，Object.defineProperty()就创建这个属性。
当描述符中省略某些字段时，这些字段将使用它们的默认值。
拥有布尔值的字段的默认值都是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

// 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）。
当属性不可配置时，不能在数据和访问器属性类型之间切换。
当试图改变不可配置属性（除了value和writable 属性之外）的值时会抛出TypeError，除非当前值和新值相同。
Writable 属性：当writable属性设置为false时，该属性被称为“不可写”。它不能被重新分配。

如示例所示，试图写入非可写属性不会改变它，也不会引发错误。

var o = {}; // Creates a new object

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

console.log(o.a); // 37
o.a = 25; // 不会报错，但是修改不会生效
console.log(o.a); // logs 37

// 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
}());

Enumerable 特性： enumerable定义了对象的属性是否可以在 for...in 循环和 Object.keys() 中被枚举。

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

Configurable 特性：configurable特性表示对象的属性是否可以被删除，以及除value和writable特性外的其他特性是否可以被修改。如果o.a的configurable属性为true，则不会抛出任何错误，并且该属性将在最后被删除。

var o = {}
Object.defineProperty(o, 'a', {
    get: function () {
        return 1
    },
    configurable: false
})
// throws a TypeError
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) // 1
delete o.a // false
console.log(o.a) // 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
});

一般的 Setters 和 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';


console.log(instance.myproperty); // 'I alway return this string,whatever you have assigned'
console.log(instance.myname); // 'this is my name string'

继承属性：如果访问者的属性是被继承的，它的 get 和set 方法会在子对象的属性被访问或者修改时被调用。如果这些方法用一个变量存值，该值会被所有对象共享。

function myclass() {
}

var value;
Object.defineProperty(myclass.prototype, "x", {
  get() {
    return value;
  },
  set(x) {
    value = x;
  }
});

var a = new myclass();
var b = new myclass();
a.x = 1;
console.log(b.x); // 1

这可以通过将值存储在另一个属性中解决。在 get 和 set 方法中，this 指向某个被访问和修改属性的对象。

function myclass() {
}

Object.defineProperty(myclass.prototype, "x", {
  get() {
    return this.stored_x;
  },
  set(x) {
    this.stored_x = x;
  }
});

var a = new myclass();
var b = new myclass();
a.x = 1;
console.log(b.x); // undefined

不像访问者属性，值属性始终在对象自身上设置，而不是一个原型。然而，如果一个不可写的属性被继承，它仍然可以防止修改对象的属性。

function myclass() {
}

myclass.prototype.x = 1;
Object.defineProperty(myclass.prototype, "y", {
  writable: false,
  value: 1
});

var a = new myclass();
a.x = 2;
console.log(a.x); // 2
console.log(myclass.prototype.x); // 1
a.y = 2; // Ignored, throws in strict mode
console.log(a.y); // 1
console.log(myclass.prototype.y); // 1

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-06-01，如有侵权请联系 cloudcommunity@tencent.com 删除

getter