Home > Web Front-end > JS Tutorial > 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

不言
Release: 2018-08-15 14:37:10
Original
2924 people have browsed it

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
}
Copy after login

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)
Copy after login
  • 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'));
Copy after login

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);
Copy after login
  • 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)
Copy after login
  • 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);
Copy after login

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);
Copy after login

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});
Copy after login

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));
Copy after login

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;
Copy after login

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;
Copy after login

防篡改

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

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

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

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

Object.isExtensible(sealed);
Copy after login

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

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

Object.isSealed(frozen);
Object.isExtensible(frozen);
Copy after login

相关推荐:

JS中Object对象的原型的使用方法

js如何打印object对象_javascript技巧

详解JavaScript中的Object对象 的示例代码

浅谈Javascript中Object与Function对象_javascript技巧

The above is the detailed content of What are the Object objects in js? Summary of how to use object objects in js. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template