Home > Article > Web Front-end > What are the Object objects in js? Summary of how to use object objects in js

What are the Object objects in js? Summary of how to use object objects in js

不言Original: 2018-08-15 14:37:102861browse

This article brings you what are the Object objects in js? This summary of how to use object objects in js has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Property Descriptor

JavaScript provides an internal data structure used to describe the value of an object and control its behavior, such as whether the property is writable, configurable, modifiable and whether Enumerable etc. This internal data structure is called an 'attribute descriptor'.
Each attribute has its own corresponding attribute descriptor, which saves the meta-information of the attribute.

{
    value:'前端',
    writable:false,
    enumerable:true,
    configurable:false,
    get:undefined,
    set:undefined
}

There are two main forms of attribute descriptors currently existing in the object: data descriptor and access descriptor

Data descriptor

The data descriptor is a Properties of a value that may or may not be writable. The data descriptor has the following optional key values:

value: The value corresponding to this attribute can be any valid JavaScript value (numeric value, object, function, etc.). The default is undefined
writable: When the writable of the property is true, the value can be changed by the assignment operator. The default is false
configurable: When the configurable of the attribute is true, the attribute descriptor can be changed, and the attribute can also be deleted from the corresponding object. The default is false
enumerable: When the enumerable of the property is true, the property can appear in the enumeration property of the object. The default is false

Access descriptor

The access descriptor is an attribute described by a getter-setter function pair. The access descriptor has the following optional key values:

get: Provides a getter method for the property. If there is no getter, it is undefined. When accessing the property, the method will be executed. No parameters are passed in when the method is executed, but this object will be passed in.
set: Provides a setter method for the property, if there is no setter It is undefined. This method is triggered when the property value is modified. This method will accept the only parameter, which is the new parameter value of the property.
configurable: When the configurable of the attribute is true, the attribute descriptor can be changed, and the attribute can also be deleted from the corresponding object. The default is false
enumerable: When the enumerable of the attribute is true, the attribute can appear in the enumeration attribute of the object. The default is false.

Get the property descriptor

The Object.getOwnPropertyDescriptor() method returns the property descriptor corresponding to an own property on the specified object.

Object.getOwnPropertyDescriptor(obj,prop)

obj: The target object to be found
prop: The name of the property in the target object (String type)
Return value: If the specified property exists on the object, return its property descriptor object, otherwise return undefined

var obj={}
obj.attr='前端';

console.log(Object.getOwnPropertyDescriptor(obj,'attr'));

Set property descriptor

1.Object.defineProperty() method defines new properties or modifies existing properties for the object, and returns the object

Object.defineProperty(obj,prop,descriptor);

obj: the object on which the property is to be defined
prop: The name of the property to be defined or modified
descriptor: The object that will be passed to the function
Return value: the object passed to the function

2. The Object.defineProperties() method defines one or more new properties or modifies existing properties for the object, and returns the object

Object.defineProperties(obj,props)

obj: The object on which the properties are to be defined
props: The object whose enumerable properties or modified property descriptors are to be defined Object
Return value: The object passed to the function

Optional key value of the property descriptor

1. value: Indicates the value corresponding to the target attribute. Can be any valid JavaScript value (numeric value, object, function, etc.). The default is undefined

var obj={};
obj.name='张三';

var attr=Object.getOwnPropertyDescriptor(obj,'name');
console.log(attr.value);

Object.defineProperty(obj,'name',{value:'李四'});
console.log(obj.name);

2.writable:Boolean value, indicating whether the value of the target attribute can be modified. When the attribute's writable is true, the value can be changed by the assignment operator. The default is false

var obj={};
Object.defineProperty(obj,'attr',{
       value:'前端',
       writable:false
});
console.log(obj.attr);
obj.attr=100;
console.log(obj.attr);

3.configurable:Boolean value, indicating whether the descriptor of the target attribute can be modified. When the attribute's configurable is true, the attribute descriptor can be changed, and the attribute can also be deleted from the corresponding object. The default is false

var obj=Object.definePropety({},'attr',{
    value:'大前端',
    configurable:false
});

Object.definePropety(obj,'attr',{value:100});
Object.definePropety(obj,'attr',{writable:true});
Object.definePropety(obj,'attr',{enumerable:true});
Object.definePropety(obj,'attr',{configurable:true});

4.enumerable:Boolean value, indicating whether the target attribute can be traversed. When the enumerable of the property is true, the property can appear in the enumeration property of the object. The default is false
If the enumerable value of the object's attribute is false, the following three operations cannot get the attribute:

for...in statement
Object.keys() method
JSON.stringify() method

var obj={};
Object.defineProperty(obj,'attr',{value:'前端',enumerable:false});
for(var key in obj){console.log(key);}
console.log(Object.keys(obj));
console.log(JSON.stringify(obj));

Access to attribute descriptors In addition to being directly defined, the properties of the

object can also be defined using accessors. Among them, setter is a value-saving function, use set in the attribute descriptor; getter is a value function, use get

var obj=Object.defineProperty({},'attr',{
    get:function(){
        return '前端';
    },
    set:function(){
        console.log('setter:'+value);
    }
});

console.log(obj.attr);
obj.attr=100;

In addition to the above accessor writing method, JavaScript also provides The following writing method:

var obj={
    get attr(){
        return '前端';
    },
    set attr(value){
        console.log('setter:'+value);
    }
}

console.log(obj.attr);
obj.attr=100;

防篡改

定义的对象默认在任何时候、任何位置，无论有意义的还是无意义的都可以修改对象的属性或方法。
而这些篡改可能会影响对象的内置属性或方法，从而导致对象的正常功能可能无法使用。
1.禁止扩展：禁止为对象扩展新的属性或方法

var obj={};
Object.preventExtensions(obj);
obj.attr='前端';
console.log(Object.isExtensible(obj));
console.log(obj.attr);

2.密封对象：禁止扩展新的属性或方法，禁止配置现有的属性或方法的描述符，仅允许读写属性的值

var sealed={};
Object.seal(sealed);
Object.isSealed(sealed);

Object.isExtensible(sealed);

3.冻结对象：禁止对对象执行任何修改操作

var frozen={1:81};
Object.isFrozen(frozen);
Object.freeze(frozen);
Object.isFrozen(frozen);

Object.isSealed(frozen);
Object.isExtensible(frozen);