Maison > interface Web > js tutoriel > Compréhension approfondie des objets js

Compréhension approfondie des objets js

小云云
Libérer: 2018-03-28 16:57:39
original
1423 Les gens l'ont consulté


Cet article partage principalement avec vous une compréhension approfondie des objets js. Il utilise principalement du code combiné avec du texte à partager avec vous. J'espère qu'il pourra aider tout le monde.

Création d'objet

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

Requête et paramétrage des attributs d'objet

let obj={x:1,y:2};
obj.x//1obj["y"]//2
Copier après la connexion

ps : La requête d'attributs qui n'existent pas dans un objet ne signalera pas d'erreur. Si c'est dans l'objet lui-même, l'attribut cible n'est pas trouvé dans les attributs ou les attributs hérités, et l'expression d'accès à l'attribut renvoie undéfini. Cependant, si vous interrogez un objet inexistant, une erreur sera signalée. >Supprimer les attributs de l'objet

supprimer : déconnectez simplement l'attribut de l'objet et ne pouvez supprimer que ses propres attributs sur l'objet prototype
let book={name:"黑洞",author:"nd"};delete book.name;
//对象不存在name属性delete book[author];
//对象不存在author属性
Copier après la connexion

Détecter les attributs de l'objet

.

Énumérer les attributs des objets
//继承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")
Copier après la connexion
Copier après la connexion

Propriétés des données et propriétés des accesseurs en Js
let obj=Object.create({x:1});//for/in
//(所有可枚举的自有属性与继承属性)for(item in obj){   
 //属性名赋值给循环变量}//Object.keys()
 //(对象的可枚举自有属性)Object.keys(obj)
 //返回一个数组,数组是由对象的属性组成的
 //Object.getOwnPropertyName()
 //(所有对象的自有属性,包括不可枚举属性)Object.getOwnPropertyName(obj)
Copier après la connexion

En JavaScript, les propriétés des objets sont divisées en deux types : les propriétés des données et les propriétés des accesseurs.

1. Attribut de données

1. Attribut de données : il contient l'emplacement d'une valeur de données, où la valeur de données peut être lue et écrite.

2. Les attributs de données comprennent quatre caractéristiques, à savoir :

configurable : indique si l'attribut peut être redéfini en supprimant l'attribut par suppression, si les caractéristiques de l'attribut peuvent être modifiées, ou si l'attribut peut être Modifier en attribut accesseur, la valeur par défaut est vraie

enumerable : indique si l'attribut peut être renvoyé via une boucle for-in

writable : indique si la valeur de l'attribut peut être modifié

valeur : Contient la valeur des données pour cette propriété. La valeur par défaut est indéfinie

Comme le montre l'exemple suivant : Créez un objet personne et imprimez la valeur par défaut de l'attribut nom d'attribut

Modifiez l'attribut par défaut des données. attribut
let person={name:"johe",age:12};
console.log(Object.getOwnPropertyDescriptor(person,"name"))
Copier après la connexion
Copier après la connexion

Pour modifier les caractéristiques par défaut d'un attribut, vous devez utiliser une méthode : la méthode Object.defineProperty(). Cette méthode a trois paramètres : l'objet où se trouve l'attribut, le nom de l'attribut et. un objet descripteur.

Grâce à cette méthode, nous pouvons modifier ces quatre caractéristiques d'un attribut.

Par exemple, si on modifie les caractéristiques de l'attribut name dans l'objet penson juste au dessus :

2 Attribut Accesseur
    //修改数据属性
    let person={name:"johe",age:12};
    Object.defineProperty(person,"name",{value:"aa",writable:false,enumerable:false,configurable:false})
Copier après la connexion
Copier après la connexion

1. La propriété ne contient pas de valeurs de données, mais contient une paire de méthodes get et set Lors de la lecture et de l'écriture des propriétés d'accesseur, ces deux méthodes sont utilisées pour effectuer des opérations.

2. Les attributs d'accesseur comprennent quatre caractéristiques :

configurable : indique si l'attribut peut être redéfini en supprimant l'attribut par suppression, si les caractéristiques de l'attribut peuvent être modifiées, ou si l'attribut peut être modifié. C'est un attribut d'accesseur, la valeur par défaut est false

enumerable : Indique si l'attribut peut être renvoyé via une boucle for-in, la valeur par défaut est false

Get : La fonction appelée lors de la lecture de l'attribut, la valeur par défaut est indéfinie

Set : La fonction appelée lors de l'écriture des propriétés, la valeur par défaut est indéfinie

Veuillez noter ici que la propriété accesseur ne peut pas être définie directement, elle doit être défini via la définition de la méthode Object.defineProperty().

Ce qui suit est un exemple de création d'un livre d'objets accesseurs, puis d'impression de la description caractéristique de son attribut accesseur année et de test de sa méthode :


Résultat de l'exécution : Compréhension approfondie des objets js

Les deux autres fonctionnalités sont configurables et énumérables. Les méthodes de test peuvent faire référence aux attributs des données. Cependant, dans cette explication spéciale, concernant la fonctionnalité configurable, parce que la valeur par défaut de la fonctionnalité Compréhension approfondie des objets js
dans l'attribut accesseur est fausse, si le programme doit supprimer l'attribut ultérieurement, alors lors de la définition de l'attribut accesseur, définissez cette fonctionnalité sur true, sinon cela entraînera des problèmes d'erreur plus tard.

Trois attributs de l'objet

1. Attribut de prototype

Object.getPrototypeOf() permet de visualiser le prototype de l'objet (non recommandé)

i'sPrototyOf() (recommandé )
2. Attributs de classe
Adapter classof() pour déterminer les attributs de classe des objets
3 Extensibilité
Object.esExtensible()

Objets sérialisés

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

Création d'objet

Requête et paramétrage des attributs d'objet
直接量:let obj={x:1};//具有prototype属性new方式:let obj=new Array();//具有protope属性Object方法:Object.create(原型);//
Copier après la connexion

ps : La requête d'attributs inexistants d'un objet ne signalera pas de erreur, si l'attribut cible n'est pas trouvé dans les propres attributs de l'objet ou dans les attributs hérités, l'expression d'accès à l'attribut renvoie undéfini. Cependant, si un objet inexistant est interrogé, une erreur sera signalée. attributs
let obj={x:1,y:2};
obj.x//1obj["y"]//2
Copier après la connexion

supprimer : il déconnecte simplement l'attribut de l'objet et ne peut supprimer que ses propres attributs sur l'objet prototype.

Détecter les attributs de l'objet
let book={name:"黑洞",author:"nd"};delete book.name;//对象不存在name属性delete book[author];//对象不存在author属性
Copier après la connexion

Énumérer les attributs des objets

//继承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")
Copier après la connexion
Copier après la connexion
Propriétés des données et propriétés des accesseurs en Js

En javaScript, les propriétés d'un objet sont divisées en deux types : les propriétés des données et les propriétés des accesseurs.
let obj=Object.create({x:1});//for/in//(所有可枚举的自有属性与继承属性)for(item in obj){    //属性名赋值给循环变量}//Object.keys()//(对象的可枚举自有属性)Object.keys(obj)//返回一个数组,数组是由对象的属性组成的//Object.getOwnPropertyName()//(所有对象的自有属性,包括不可枚举属性)Object.getOwnPropertyName(obj)
Copier après la connexion

1. Attribut de données

1. Attribut de données : il contient l'emplacement d'une valeur de données, où la valeur de données peut être lue et écrite.

2. Les attributs de données comprennent quatre caractéristiques, à savoir :

configurable : indique si l'attribut peut être redéfini en supprimant l'attribut par suppression, si les caractéristiques de l'attribut peuvent être modifiées, ou si l'attribut peut être Modifier en attribut accesseur, la valeur par défaut est vraie

enumerable : indique si l'attribut peut être renvoyé via une boucle for-in

writable : indique si la valeur de l'attribut peut être modifié

valeur : Contient la valeur des données pour cette propriété. La valeur par défaut n'est pas définie

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

let person={name:"johe",age:12};
console.log(Object.getOwnPropertyDescriptor(person,"name"))
Copier après la connexion
Copier après la connexion

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

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

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

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

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

2.访问器属性

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

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

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

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

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

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

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

下面来个例子,创建一个访问器对象book,接着打印出其year访问器属性的特性描述并对其方法进行测试打印:
Compréhension approfondie des objets js
执行结果:
Compréhension approfondie des objets js
其他两个特性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);
Copier après la connexion
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal