Propriedades do objeto JavaScript – 03

Resumo : neste tutorial, você aprenderá sobre as propriedades e atributos do objeto JavaScript, como configurável, enumerável, gravável, get, set e valor.

Tipos de propriedade de objeto

JavaScript especifica as características das propriedades dos objetos por meio de atributos internos cercados por dois pares de colchetes, por exemplo, [[Enumerable]].

Os objetos têm dois tipos de propriedades: propriedades de dados e propriedades de acesso.

1) Propriedades de dados

Uma propriedade de dados contém um único local para um valor de dados. Uma propriedade de dados possui quatro atributos:

•  [[Configurarable]]– determina se uma propriedade pode ser redefinida ou removida via deleteoperador.
•  [[Enumerable]]– indica se uma propriedade pode ser retornada no for...inloop.
•  [[Writable]]– especifica que o valor de uma propriedade pode ser alterado.
•  [[Value]]– contém o valor real de uma propriedade.

Por padrão, os atributos [[Configurable]], [[Enumerable]]And são definidos como para todas as propriedades definidas diretamente em um objeto. O valor padrão do atributo é .[[Writable]]true[[Value]]undefined

Por exemplo, o seguinte cria um personobjeto com duas propriedades firstNamee lastNamecom os atributos configuráveis, enumeráveis ​​e graváveis ​​definidos como truee seus valores são definidos como 'John'e 'Doe'respectivamente:

let person = {
    firstName: 'John',
    lastName: 'Doe'
};Linguagem de código:  JavaScript  ( javascript )

Para alterar qualquer atributo de uma propriedade, você usa o Object.defineProperty()método.

O Object.defineProperty()método aceita três argumentos:

• Um objeto.
• Um nome de propriedade do objeto.
• Um objeto descritor de propriedade que possui quatro propriedades: configurable, enumerable, writablee value.

Se você usar o Object.defineProperty()método para definir uma propriedade do objeto, os valores padrão de [[Configurable]], [[Enumerable]]e [[Writable]]serão definidos como , falsea menos que especificado de outra forma.

O exemplo a seguir cria um personobjeto com a agepropriedade:

let person = {};
person.age = 25;Linguagem de código:  JavaScript  ( javascript )

Como o valor padrão do [[Configurable]]atributo é definido como true, você pode removê-lo por meio do deleteoperador:

delete person.age;
console.log(person.age);Linguagem de código:  CSS  ( css )

Saída:

undefinedLinguagem de código:  JavaScript  ( javascript )

O exemplo a seguir cria um personobjeto e adiciona a ssnpropriedade a ele usando o Object.defineProperty()método:

'use strict';

let person = {};

Object.defineProperty(person, 'ssn', {
    configurable: false,
    value: '012-38-9119'
});

delete person.ssn;Linguagem de código:  JavaScript  ( javascript )

Saída:

TypeError: Cannot delete property 'ssn' of #<Object>Linguagem de código:  PHP  ( php )

Neste exemplo, o configurableatributo está definido como false. Portanto, excluir a ssnpropriedade causa um erro.

Além disso, depois de definir uma propriedade como não configurável, você não poderá alterá-la para configurável.

Se você usar o Object.defineProperty()método para alterar qualquer atributo diferente do gravável, receberá um erro. ou exemplo:

'use strict';

let person = {};

Object.defineProperty(person, 'ssn', {
    configurable: false,
    value: '012-38-9119'
});


Object.defineProperty(person, 'ssn', {
    configurable: true
});Linguagem de código:  JavaScript  ( javascript )

Saída:

TypeError: Cannot redefine property: ssnLinguagem de código:  JavaScript  ( javascript )

Por padrão, o enumerableatributo de todas as propriedades definidas em um objeto é true. Isso significa que você pode iterar todas as propriedades do objeto usando o for...in loop assim:

let person = {};
person.age = 25;
person.ssn = '012-38-9119';

for (let property in person) {
    console.log(property);
}Linguagem de código:  JavaScript  ( javascript )

Saída:

age
ssn

O seguinte torna a ssnpropriedade não enumerável, definindo o enumerableatributo como false.

let person = {};
person.age = 25;
person.ssn = '012-38-9119';

Object.defineProperty(person, 'ssn', {
    enumerable: false
});

for (let prop in person) {
    console.log(prop);
}Linguagem de código:  JavaScript  ( javascript )

Saída

age

2) Propriedades do acessador

Semelhante às propriedades de dados, as propriedades do acessador também possuem atributos [[Configurable]]e [[Enumerable]].

Mas as propriedades do acessador possuem os atributos [[Get]]and [[Set]]em vez de [[Value]]and [[Writable]].

Quando você lê dados de uma propriedade do acessador, a [[Get]]função é chamada automaticamente para retornar um valor. O valor de retorno padrão da [[Get]]função é undefined.

Se você atribuir um valor a uma propriedade do acessador, a [[Set]]função será chamada automaticamente.

Para definir uma propriedade do acessador, você deve usar o Object.defineProperty()método. Por exemplo:

let person = {
    firstName: 'John',
    lastName: 'Doe'
}

Object.defineProperty(person, 'fullName', {
    get: function () {
        return this.firstName + ' ' + this.lastName;
    },
    set: function (value) {
        let parts = value.split(' ');
        if (parts.length == 2) {
            this.firstName = parts[0];
            this.lastName = parts[1];
        } else {
            throw 'Invalid name format';
        }
    }
});

console.log(person.fullName);Linguagem de código:  JavaScript  ( javascript )

Saída:

'John Doe'Linguagem de código:  JavaScript  ( javascript )

Neste exemplo:

• Primeiro, defina o personobjeto que contém duas propriedades: firstNamee lastName.
• Em seguida, adicione a fullNamepropriedade ao personobjeto como uma propriedade do acessador.

Na fullnamepropriedade do acessador:

• O [[Get]]retorna o nome completo que é o resultado da concatenação de firstName, space, e lastName.
• O [[Set]]método divide o argumento pelo espaço e atribui as propriedades firstNamee lastName das partes correspondentes do nome.
• Se o nome completo não estiver no formato correto, ou seja, nome, espaço e sobrenome, ocorrerá um erro .

Defina múltiplas propriedades: Object.defineProperties()

No ES5, você pode definir múltiplas propriedades em uma única instrução usando o Object.defineProperties()método. ou exemplo:

var product = {};

Object.defineProperties(product, {
    name: {
        value: 'Smartphone'
    },
    price: {
        value: 799
    },
    tax: {
        value: 0.1
    },
    netPrice: {
        get: function () {
            return this.price * (1 + this.tax);
        }
    }
});

console.log('The net price of a ' + product.name + ' is ' + product.netPrice.toFixed(2) + ' USD');Linguagem de código:  JavaScript  ( javascript )

Saída:

The net price of a Smartphone is 878.90 USDLinguagem de código:  CSS  ( css )

Neste exemplo, definimos três propriedades de dados: name, price, e tax, e uma propriedade de acesso netPricepara o productobjeto.

Descritor de propriedade de objeto JavaScript

O  Object.getOwnPropertyDescriptor()método permite obter o objeto descritor de uma propriedade. O Object.getOwnPropertyDescriptor()método leva dois argumentos:

1. Um objeto
2. Uma propriedade do objeto

Ele retorna um objeto descritor que descreve uma propriedade. O objeto descritor possui quatro propriedades: configurável, enumerável, gravável e valor.

O exemplo a seguir obtém o objeto descritor da namepropriedade do productobjeto no exemplo anterior.

let person = {
    firstName: 'John',
    lastName: 'Doe'
};


let descriptor = Object.getOwnPropertyDescriptor(person, 'firstName');

console.log(descriptor);Linguagem de código:  JavaScript  ( javascript )

Saída:

{ value: 'John',
  writable: true,
  enumerable: true,
  configurable: true }Linguagem de código:  CSS  ( css )

Resumo

• Os objetos JavaScript possuem dois tipos de propriedades: propriedades de dados e propriedades de acessador.
• JavaScript usa atributos internos denotados [[...]]para descrever as características de propriedades como [[Configurable]], [[Enumerable]], [[Writable]], e  [[Value]], [[Get]], e [[Set]].
• O método Object.getOwnPropertyDescriptor()retorna um descritor de propriedade de uma propriedade em um objeto.
• Uma propriedade pode ser definida diretamente em um objeto ou indiretamente por meio dos métodos Object.defineProperty() ou Object.defineProperties(). Esses métodos podem ser usados ​​para alterar os atributos de uma propriedade.