Object.defineproperty () is used to set the Object property to read-only, so let’s take a look at object.defineProperty ().

Object. DefineProperty () definition

Object.defineproperty () on MDN is defined as:

The object.defineProperty () method directly defines a new property on an Object, or modifies an existing property of an Object, and returns the Object.

Object data properties

The data properties of an object have four properties that describe their behavior:

  • configurable

Represents whether a property can be modified or deleted, such as redefining a property by deleting it by delete, or changing it to an accessor property. Properties defined directly on an Object. The default value for this property is true, and the default value is false when defining properties using Object.defineProperty().

  • enumerable

Indicates whether it appears in an enumerated property of an object, such as whether the property can be returned through a for-in loop. Properties defined directly on an Object. The default value for this property is true, and the default value is false when defining properties using Object.defineProperty().

  • writable

Indicates whether the assignment operator can modify the value of an attribute. Properties defined directly on an Object. The default value for this property is true, and the default value is false when defining properties using Object.defineProperty().

  • value

The value corresponding to this property. It can be any valid JavaScript value (numeric value, object, function, etc.). When reading property values, read from this position; When writing property values, store the new values in this location. The default value for this feature is undefined, and the default value is false when defining properties using Object.defineProperty().

Code sample

  • Define attributes directly on the object
Let obj = {text: "Hello World!" }Copy the code

The default text property of OBJ, enumerable and writable, is true, and the value of the 64x property is “Hello World! . If you attempt to obtain obj’s text property, you will get the value of the obJ property, which can be enumerated, modified using the assignment operator, and deleted.

Let obj = {text: "Hello World!" } console.log(obj.text); / / Hello World! for(let item in obj) { console.log(item); } // Hello World! obj.text = 'change'; console.log(obj.text); // change delete obj.text; console.log(obj.text); // undefinedCopy the code

Effect of the sample

  • useObject.defineProperty()Custom properties
let obj = {}
Object.defineProperty(obj, 'text', {});
Copy the code

The default text property of OBJ, enumerable and writable is false, and the value property is undefined. If you attempt to obtain obj’s text attribute, you will get the value of the obJ attribute, which cannot be enumerated, modified by the assignment operator, or deleted.

let obj = {} Object.defineProperty(obj, 'text', {}); Object.defineproperty (obj, 'text2', {value: 'Hello World! '}); console.log(obj.text); // undefined for(let item in obj) { console.log(item); } // undefined obj.text = 'change'; console.log(obj.text); // undefined delete obj.text2; console.log(obj.text2); / / 'Hello World! 'Copy the code

Effect of the sample

Set the object property to read-only

Read the above content must know how to set object properties read only.

Let obj = {text: 'Hello World! ' } Object.defineProperty(obj, 'text', { writable: false }); Object.defineproperty (obj, 'text2', {value: 'Hello World! '}); obj.text = 'change'; console.log(obj.text); / / Hello World! obj.text2 = 'change'; console.log(obj.text2); / / Hello World!Copy the code

Effect of the sample

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event