Deep understanding of js objects

This article mainly shares with you an in-depth understanding of js objects. It mainly uses code combined with text to share with you. I hope it can help everyone.

Object creation

直接量：let obj={x:1};
//具有prototype属性new方式：let obj=new Array();
//具有protope属性Object方法：Object.create(原型);

Query and setting of object attributes

let obj={x:1,y:2};
obj.x//1obj["y"]//2

ps: Querying an object’s non-existent attributes will not report an error. If the object’s own attributes or inherited The target attribute is not found in the attributes, and the attribute access expression returns undefined. However, if you query a non-existent object, an error will be reported.

Delete object attributes

let book={name:"黑洞",author:"nd"};delete book.name;
//对象不存在name属性delete book[author];
//对象不存在author属性

delete: Just disconnect the attribute The connection with the object can only delete its own properties on the prototype object.

Detect object properties

//继承const inherit=p=>{    if(p==null)throw TypeError();//p是一个对象但不能是null
    if(Object.create)return Object.create(p);//如果Object.create()存在直接使用它
    let t=typeof p;//进一步检验
    if(t!="object"&&t!=="function")throw TypeError();//检验
    function f(){};//定义一个空的构造函数
    f.prototype=p;//将其原型属性设置为p
    return new f();//}//in运算符(对象的自有属性和继承属性)let o={x:1}
console.log("x" in o)
console.log("y" in o)
console.log("toString" in o)//hasOwnProperty()(对象的自有属性(包含不可枚举属性))console.log(o.hasOwnProperty("x"))
console.log(o.hasOwnProperty("y"))
console.log(o.hasOwnProperty("toString"))//propertyIsEnumerable()(对象的自有属性且可枚举)let obj=inherit({y:2})
obj.x=1;
console.log(obj.propertyIsEnumerable("x"));
console.log(obj.propertyIsEnumerable("y")

Enumerate object properties

let obj=Object.create({x:1});//for/in
//(所有可枚举的自有属性与继承属性)for(item in obj){   
 //属性名赋值给循环变量}//Object.keys()
 //(对象的可枚举自有属性)Object.keys(obj)
 //返回一个数组,数组是由对象的属性组成的
 //Object.getOwnPropertyName()
 //(所有对象的自有属性,包括不可枚举属性)Object.getOwnPropertyName(obj)

Data properties and access in Js Device properties

In javaScript, object properties are divided into two types: data properties and accessor properties.

1. Data attribute

1. Data attribute: It contains the location of a data value, where the data value can be read and written.

2. Data attributes include four characteristics, which are:

configurable: Indicates whether the attribute can be redefined by deleting the attribute through delete, whether the characteristics of the attribute can be modified, or whether the attribute can be Modify to accessor attribute, default is true

enumerable: Indicates whether the attribute can be returned through a for-in loop

writable: Indicates whether the value of the attribute can be modified

value: Contains the data value for this property. The default is undefined

As in the following example: Create an object person and print out the default value of the name attribute property

let person={name:"johe",age:12};
console.log(Object.getOwnPropertyDescriptor(person,"name"))

3. Modify the default properties of the data attribute

Modify The default characteristics of a property attribute use a method: the Object.defineProperty() method. This method has three parameters: the object where the property is located, the property name, and a descriptor object.

Through this method, we can modify these four characteristics of an attribute.

For example, if we modify the characteristics of the name attribute in the penson object just above:

    //修改数据属性
    let person={name:"johe",age:12};
    Object.defineProperty(person,"name",{value:"aa",writable:false,enumerable:false,configurable:false})

2. Accessor attribute

1. Accessor attribute: This attribute does not Contains data values, including a pair of get and set methods. When reading and writing accessor properties, operations are performed through these two methods.

2. The accessor attribute contains four characteristics:

configurable: indicates whether the attribute can be redefined by deleting the attribute through delete, whether the characteristics of the attribute can be modified, or whether the attribute can be modified. It is the accessor attribute, the default is false

enumerable: Indicates whether the attribute can be returned through a for-in loop, the default is false

Get: The function called when reading the attribute, the default value is undefined

Set: The function called when writing properties, the default value is undefined

It should be noted here that accessor properties cannot be defined directly, but must be defined through the Object.defineProperty() method. definition.

The following is an example, create an accessor object book, then print out the characteristic description of its year accessor attribute and test print its method:

Execution results:

The other two features, configurable and enumerable, can be tested according to the data attributes. However, in this special explanation, regarding the configurable feature, because the default value of the

feature in the accessor attribute is false, if the program needs to delete the attribute later, etc., then when defining the accessor attribute , set this feature to true, otherwise this will cause some error problems later.

Three attributes of the object

1. Prototype attribute
Object.getPrototypeOf() can view the prototype of the object (not recommended)
i'sPrototyOf()(recommended) )
2. Class attributes
Adapt to classof() to determine the class attributes of objects
3. Extensibility
Object.esExtensible()

Serialized objects

let o={x:1,y:{z:[false,null,'']}};let s=JSON.stringfy(o);let p=JSON.parse(s);

     

Object Creation

直接量：let obj={x:1};//具有prototype属性new方式：let obj=new Array();//具有protope属性Object方法：Object.create(原型);//

Query and Setting of Object Properties

let obj={x:1,y:2};
obj.x//1obj["y"]//2

ps: Querying for non-existent properties of an object will not report an error. If the properties of the object itself are The target attribute is not found in the or inherited attributes, and the attribute access expression returns undefined. However, if you query a non-existent object, an error will be reported.

Delete object attributes

let book={name:"黑洞",author:"nd"};delete book.name;//对象不存在name属性delete book[author];//对象不存在author属性

delete: Just To disconnect the properties from the object, you can only delete the own properties on the prototype object.

Detect object properties

//继承const inherit=p=>{    if(p==null)throw TypeError();//p是一个对象但不能是null
    if(Object.create)return Object.create(p);//如果Object.create()存在直接使用它
    let t=typeof p;//进一步检验
    if(t!="object"&&t!=="function")throw TypeError();//检验
    function f(){};//定义一个空的构造函数
    f.prototype=p;//将其原型属性设置为p
    return new f();//}//in运算符(对象的自有属性和继承属性)let o={x:1}
console.log("x" in o)
console.log("y" in o)
console.log("toString" in o)//hasOwnProperty()(对象的自有属性(包含不可枚举属性))console.log(o.hasOwnProperty("x"))
console.log(o.hasOwnProperty("y"))
console.log(o.hasOwnProperty("toString"))//propertyIsEnumerable()(对象的自有属性且可枚举)let obj=inherit({y:2})
obj.x=1;
console.log(obj.propertyIsEnumerable("x"));
console.log(obj.propertyIsEnumerable("y")

Enumerate object properties

let obj=Object.create({x:1});//for/in//(所有可枚举的自有属性与继承属性)for(item in obj){    //属性名赋值给循环变量}//Object.keys()//(对象的可枚举自有属性)Object.keys(obj)//返回一个数组,数组是由对象的属性组成的//Object.getOwnPropertyName()//(所有对象的自有属性,包括不可枚举属性)Object.getOwnPropertyName(obj)

Data in Js Properties and accessor properties

In javaScript, object properties are divided into two types: data properties and accessor properties.

1. Data attribute

1. Data attribute: It contains the location of a data value, where the data value can be read and written.

2. Data attributes include four characteristics, which are:

configurable: Indicates whether the attribute can be redefined by deleting the attribute through delete, whether the characteristics of the attribute can be modified, or whether the attribute can be Modify to accessor attribute, default is true

enumerable: Indicates whether the attribute can be returned through a for-in loop

writable: Indicates whether the value of the attribute can be modified

value: Contains the data value for this property. Default is undefined

如下面这个例子：创建一个对象person，打印出name属性的特性的默认值

let person={name:"johe",age:12};
console.log(Object.getOwnPropertyDescriptor(person,"name"))

3.修改数据属性的默认特性

修改属性属性的默认特性要用到一个方法：Object.defineProperty()方法，这个方法有三个参数：属性所在的对象，属性名，一个描述符对象。

通过这个方法，我们可以来修改一个属性的这4个特性。

如我们对刚刚上面的penson对象里面的name属性的特性进行修改：

    //修改数据属性
    let person={name:"johe",age:12};
    Object.defineProperty(person,"name",{value:"aa",writable:false,enumerable:false,configurable:false})

2.访问器属性

1.访问器属性：这个属性不包含数据值，包含的是一对get和set方法，在读写访问器属性时，就是通过这两个方法来进行操作处理的。

2.访问器属性包含的四个特性：

configurable：表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性，默认为false

enumerable:表示能否通过for-in循环返回属性,默认为false

Get：在读取属性时调用的函数,默认值为undefined

Set：在写入属性时调用的函数,默认值为undefined

这里要注意下，访问器属性不能直接定义，要通过Object.defineProperty()这个方法来定义。

下面来个例子，创建一个访问器对象book，接着打印出其year访问器属性的特性描述并对其方法进行测试打印：

执行结果：

其他两个特性configurable，enumerable的测试方式可以参照数据属性的。不过在这特别说明下，关于configurable这个特性，因为访问器属性里面这个

特性默认值为false，如果程序后面需要对该属性进行delete操作等，那就在定义访问器属性时，将这个特性设置为true，不然这个会导致后面一些报错的问题。

对象的三个属性

1.原型属性
Object.getPrototypeOf()可以查看对象的原型 (不推荐使用)
i’sPrototyOf()(推荐使用)
2.类属性
适应classof()来判断对象的类属性
3.可拓展性
Object.esExtensible()

序列化对象

let o={x:1,y:{z:[false,null,'']}};let s=JSON.stringfy(o);let p=JSON.parse(s);

The above is the detailed content of Deep understanding of js objects. For more information, please follow other related articles on the PHP Chinese website!