Objects and Properties

In JS, an object is a collection of key-value pairs. These values are attributes of an object, which can be a primitive type or object, or a method.

Such as:

const obj = {
  name: 'Brynn'.sayName() {
    console.log('Brynn! ')}},console.log(obj)
console.log(obj.sayName.name) // sayName
Copy the code

This object has a name base type and a greet method.

Literals define properties

The easiest way to do this is called literal definition. Write the properties and methods of an object directly into the object.

const obj = {
  name: 'Brynn'.sayName() {
    console.log('Brynn! ')},greet: function () {
    console.log('Hello! ')}},console.log(obj.sayName.name) // sayName
console.log(obj.greet.name) // greet
Copy the code

There are two ways to define a method. Both of these functions have names.

DefineProperty Configuration attribute

Besides, still can use Object. DefineProperty () to configure an attribute, with the Object. GetOwnPropertyDescripter () query configuration details.

const obj = {}
Object.defineProperty(obj, 'name', {
  value: 'Brynn'.writable: true.enumerable: true.configurable: true,})Object.defineProperty(obj, 'sayName', {
  value: function sayName() {
    console.log('Brynn! ')},writable: true.enumerable: true.configurable: true,})console.log(obj)
console.log(obj.sayName.name) // sayName
Copy the code

propertyDescriptor

In Object.defineProperty, there are a number of property attributes, which are as follows:

  • Value: Indicates the value of the attribute
  • Writable: indicates whether the value of an attribute can be modified
  • Set: function called when writing property (set is called using brynn.name = ‘Boolean’)
  • Get: The function that is called to get the property (the get function is called using console.log(brynn.name))
  • Different: Specifies whether the attribute can be modified, and only configurable attributes can be deleted by delete
  • Enumerable: Whether it is enumerable

Can be enumerated attribute can through Object. Keys (target), and the for/of acquisition, in an enumerable and an enumeration can be through the Object. The getOwnPropertyNames (target) to obtain)

These features have default values,

  1. Defined by a literal:Writable, Different, EnumerableAre all true
  2. Configured via definePropertyWritable, Different, EnumerableAll is false
const obj = { name: 'Brynn' }

Object.defineProperty(obj, 'sayName', {
  value: function sayName() {
    console.log('Brynn! ')}})let descriptors = Object.getOwnPropertyDescriptors(obj)
console.log(descriptors) // {name:{value: "Brynn", writable: true, enumerable: true, configurable: true}, sayName: {writable: false, enumerable: False, different: false, value: ƒ}}
Copy the code

These properties cannot all exist in one property at the same time, and according to this, properties are divided into data properties and accessor properties

  • Data attributes: there arevalue/writable/enumerable/configurableFour features
  • Accessor properties: there areset/get/enumerable/configurableFour features

Accessor properties and getters/setters (store functions/value functions)

Accessor properties are two properties of object properties, and setters/getters are defining object methods

Use accessor properties

const obj = {}
Object.defineProperty(obj, 'foo', {
  get() {
    return 'brynn'
  },
  set(x) {
    this.foo = x
  },
  enumerable: true.configurable: true,})let descriptors = Object.getOwnPropertyDescriptors(obj)
console.log(descriptors)
console.log(obj)
Copy the code

Use the setter/getter

const obj = {
  get foo() {
    return 'brynn'
  },
  set foo(x) {
    this.foo = x
  },
}
let descriptors = Object.getOwnPropertyDescriptors(obj)
console.log(descriptors)
console.log(obj)
Copy the code

The difference is that

  1. Adding attributes using defineProperty is more flexible and can be added dynamically
  2. The default value of the defineProperty is false and the default value of setter/getter is true

As the prototype

Both methods construct an object that is the prototype of another object, so that the other object has a corresponding property at the console output, but it is not really a property (getOwnDescriptors does not have one)

const obj = {}
Object.defineProperty(obj, 'foo', {
  get() {
    return 'brynn'
  },
  set(x) {
    this.foo = x
  },
  enumerable: true.configurable: true,})let upObj = {
  value: 'test',
}
upObj.__proto__ = obj
let descriptors = Object.getOwnPropertyDescriptors(upObj)
console.log(upObj)
console.log(descriptors)
Copy the code