understand Object.defineProperty

Time:2020-11-20

understand Object.defineProperty

This article was written on October 13, 2020

Object.defineProperty Used to define a new property on an object or modify an existing property and return the object.

What do you mean? Don’t panic to understand, let’s take an example to see.

const obj1 = {};

Object.defineProperty(obj1, 'property1', {
  value: 42,
  writable: false,
});

obj1.property1 = 77;

console.log(obj1.property1); // 42

Students who have been in primary school for two years can understand this passage in English

  1. We are hereobj1Define a property (can be understood as a property or element) on the;
  2. This property is calledproperty1
  3. property1The value of is42
  4. She can’t be rewritten.

So we visitedobj1Of this empty objectproperty1However, if we want to modify the property, we can find the corresponding value.

grammar

Object.defineProperty(obj, prop, descriptor);

  • obj

    The object to operate on, that is, target.

  • prop

    The name of the attribute to be added or modified (can be a symbol).

  • descriptor

    An object that describes your addition or modification.

    The specific attributes are as follows:

    interface Descriptor {
      configurable?: boolean;
      enumerable?: boolean;
      value?: any;
      writable?: boolean;
      get?: () => any;
      set?: (value: any) => void;
    }

The above used the interface writing method of TS, do not understand the students can look at the document.

In general, if we simply useconst obj = { a: 1 };To define the property of an object, the property can be modified or many other operations can be done; however, if you use theObject.defineProperty(), without addingdescriptorProperty, which isImmutable

Descriptor

Descriptors have six attributes, which can be divided into two categories:Data descriptorandAccess descriptor

It’s easy to guess,getAndsetThe other four are data descriptors.

Let’s break them one by one.

configurable

As the name suggests, refers to the attributeCan I configure itIn other words, only this option istrueProperty values can be changed or deleted.

The property defaults tofalse

enumerable

The attribute is translated as “innumerable”, so we can guess that the attribute and theenumerationrelevant.

When it istrueThis property appears in the enumeration property of the object.

The default isfalse

value

Without much explanation, it can be any valid JavaScript data, which is the corresponding value of this property.

The default isundefined

writable

Describes whether the property can be modified, andconfigurableThe difference is, even ifwritableSet tofalseThis property can also be used for operations other than deletion or other modifications. This option is only available forAssignment Operators work.

The default isfalse

get

With this property configuredgetterFunction. Whenever we access this property, get is called. such asconsole.log(obj.a)。 The return value of the function configuration will be the value obtained by the access.

The function does not take any parameters, but existsthisObject (but not sure who to point to).

The default value isundefined

set

Configure thesetterFunction. This function is called when the property value is modified.

The function receives a parameter that is the new value that will be modified. Again, the function existsthis

The default value isundefined

(end)

Recommended Today

Explain module, import and export in JavaScript

Author: Tania rascia Crazy technology house Original text:https://www.taniarascia.com/j… In the era of the Internet, websites are mainly developed with HTML and CSS. If you load JavaScript into a page, it usually provides effects and interactions in the form of small fragments. Generally, all JavaScript code is written in a file and loaded into a filescriptTag. […]