Skip to content

对象属性标志(数据描述符


对象属性(properties),除 value 外,还有三个特殊的特性(attributes),也就是所谓的“标志”:

  • writable — 如果为 true,则值可以被修改,否则它是只可读的。
  • enumerable — 如果为 true,则会被在循环中列出,否则不会被列出。
  • configurable — 如果为 true,则此属性可以被删除,这些特性也可以被修改,否则不可以。

查看属性标志:

javascript
const obj = {
    name: 'dano',
    age: 21,
    food:'orange',
}

let descriptor = Object.getOwnPropertyDescriptors(obj);
console.log(descriptor);

{//返回值
  name: {
    value: 'dano',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: { value: 21, writable: true, enumerable: true, configurable: true },
  food: {
    value: 'orange',
    writable: true,
    enumerable: true,
    configurable: true
  }
}

修改属性标志:使用修改属性标志的方法来创建的属性的标志均为false

javascript
const obj = {
    name: 'dano',
    age: 21,
    food:'orange',
}

Object.defineProperty(obj, 'name', { value: 'daozhu' });
let descriptor = Object.getOwnPropertyDescriptors(obj);
console.log(obj.name);//daozhu

Object.defineProperty(obj, 'time', { value: 34 });
//time: {value: 34,writable: false,enumerable: false,configurable: false
  }

只读、枚举和可配置:只在严格模式下会出现 Errors

javascript
const obj = {
    name: 'dano',
    age: 21,
    food:'orange',
}

Object.defineProperty(obj, 'name', { writable: false });
obj.name = 'daozhu';//不会报错
console.log(obj.name);//dano

通常,对象中内建的 toString 是不可枚举的,它不会显示在 for..in 中。但是如果我们添加我们自己的 toString,那么默认情况下它将显示在 for..in 中,如下所示.可以设置 enumerable:false。之后它就不会出现在 for..in 循环中了,就像内建的 toString 一样

javascript
let user = {
    name: "John",
    toString() {
        return this.name;
    }
};

// 默认情况下,我们的两个属性都会被列出:
for (let key in user) console.log(key); // name, toString
Object.defineProperty(user, 'toString', { enumerable: false });
for (let key in user) console.log(key); // name

不可配置标志(configurable:false)有时会预设在内建对象和属性中。 不可配置的属性不能被删除,它的标志(attribute)不能被修改

javascript
let descriptor = Object.getOwnPropertyDescriptor(Math, 'PI');
alert(JSON.stringify(descriptor, null, 2));
/*
{
  "value": 3.141592653589793,
  "writable": false,
  "enumerable": false,
  "configurable": false
}
*/

属性变成不可配置是一条单行道。我们无法通过 defineProperty 再把它改回来。 请注意:configurable: false 防止更改和删除属性标志,但是允许更改对象的值。 这里的 user.name 是不可配置的,但是我们仍然可以更改它,因为它是可写的:

javascript
let user = {
    name: "John"
};

Object.defineProperty(user, "name", {
    configurable: false
});

user.name = "Pete"; // 正常工作
delete user.name; // 不能删除

console.log(JSON.stringify(user,null,2));//{"name": "Pete"}

对于更改标志,有一个小例外: 对于不可配置的属性,我们可以将 writable: true 更改为 false,从而防止其值被修改(以添加另一层保护)。但无法反向行之。

属性描述符在单个属性的级别上工作。 还有一些限制访问 整个 对象的方法: Object.preventExtensions(obj) 禁止向对象添加新属性。 Object.seal(obj) 禁止添加/删除属性。为所有现有的属性设置 configurable: falseObject.freeze(obj) 禁止添加/删除/更改属性。为所有现有的属性设置 configurable: false, writable: false。 还有针对它们的测试: Object.isExtensible(obj) 如果添加属性被禁止,则返回 false,否则返回 trueObject.isSealed(obj) 如果添加/删除属性被禁止,并且所有现有的属性都具有 configurable: false则返回 trueObject.isFrozen(obj) 如果添加/删除/更改属性被禁止,并且所有当前属性都是 configurable: false, writable: false,则返回 true。 这些方法在实际中很少使用

属性的访问器属性(存取描述符


对象属性:

  • 数据属性
  • 访问器属性:本质上是用于获取和设置值的函数,但从外部代码来看就像常规属性。
javascript
let user = {
    name: 'Dano',
    surname: 'Day',
    get fullName() {
        return `${this.name} ${this.surname}`;
    },
    set fullName(fullname) {
        [this.name, this.surname] = fullname.split(" ")
    },
}

console.log(user.fullName);//Dano Day
user.fullName = "Jungle Dog";
console.log(user.fullName);//Jungle Dog

现在,我们就有一个“虚拟”属性。它是可读且可写的。

对于访问器属性,没有 value 和 writable,但是有 get 和 set 函数。 所以访问器描述符可能有:

  • get —— 一个没有参数的函数,在读取属性时工作,
  • set —— 带有一个参数的函数,当属性被设置时调用,
  • enumerable —— 与数据属性的相同,
  • configurable —— 与数据属性的相同。
javascript
let user = {
    name: "Dano",
    surname: "Day"
};

Object.defineProperty(user, 'fullName', {
    get() {
        return `${this.name} ${this.surname}`;
    },

    set(value) {
        [this.name, this.surname] = value.split(" ");
    }
});

console.log(user.fullName); // Dano Day
console.log(Object.getOwnPropertyDescriptors(user));
/**
 * {
  name: {
    value: 'Dano',
    writable: true,
    enumerable: true,
    configurable: true
  },

  surname: {
    value: 'Day',
    writable: true,
    enumerable: true,
    configurable: true
  },
  fullName: {
    get: [Function: get],
    set: [Function: set],
    enumerable: false,
    configurable: false
  }
}
 */
for (let key in user) console.log(key); // name, surname

一个属性要么是访问器(具有 get/set 方法),要么是数据属性(具有 value),但不能两者都是

使用getter和setter来构建一个看似真实,但是可以具有更多控制的属性:

javascript
let user = {
    get name() {
        return this._name;
    },
    set name (value) {
        if (value.length < 4) {
            console.log("too short");
            return
        }
        this._name = value;
    },
};

user.name = "dano";
console.log(user.name);//dano
console.log(user._name);

所以,name 被存储在 _name 属性中,并通过 getter 和 setter 进行访问。

从技术上讲,外部代码可以使用 user._name 直接访问 name。但是,这儿有一个众所周知的约定,即以下划线 "_" 开头的属性是内部属性,不应该从对象外部进行访问。