Explication détaillée des objets JS
Quel est l'objet de js ? Quels sont les types d'objets de js ? Quels sont les exemples concrets ?
1. Définition ECMA-262 des objets JS :
Une collection non ordonnée d'attributs, dont chacun stocke une valeur primitive, un objet ou une fonction ;
un objet est un tableau de valeurs sans ordre particulier ;
un objet est un type de données spécial qui peut contenir plusieurs membres.
Membres d'objet : Propriété, Méthode. (Objet=Propriété+Méthode)
Propriété (Propriété) : nom de l'objet, nom de la propriété. Encapsuler les données de l'objet, représentant la valeur liée à l'objet ;
méthode (Method) : nom de l'objet, nom de la méthode. Encapsuler le comportement de l'objet, en indiquant le comportement que l'objet peut effectuer ou la fonction qui peut être complétée ;
2. Le type d'objet de JS :
1. Objets internes : objets natifs/objets intégrés
1) Objets natifs, objets fournis par ECMAScript qui doivent être instanciés (nouveaux) avant de pouvoir être utilisés
Objet objet, objet Function, objet Array, objet booléen, objet Date, objet Number, objet String, objet RegExp, opérateur, erreur, objet Set, objet Map, objet Proxy
原生对象常用方法：
①、Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
②、Object.create() 方法用于创建一个新对象。被创建的对象会继承另一个对象的原型，在创建新对象时还可以指定一些属性。
③、Object.defineProperties() 直接在一个对象上定义新的属性或修改现有属性，并返回该对象。
④、Object.keys() 遍历对象，返回一个数组，包含了该对象自身的所有可枚举属性名
⑤、Object.getOwnPropertyNames() 遍历对象，返回一个数组，包含了该对象自身的可枚举和不可枚举属性名
⑥、Object.is() 方法用于判断两个值是否是相同的值
⑦、Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用
for...in循环遍历该对象时返回的顺序一致
⑧、Object.freeze()
方法可以冻结一个对象。一个被冻结的对象再也不能被修改；冻结了一个对象则不能向这个对象添加新的属性，不能删除已有属性，不能修改该对象已有属性的可枚举性、可配置性、可写性，以及不能修改已有属性的值。
此外，冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。
2) Objets intégrés, objets fournis par ECMAScript pouvant être utilisés sans instanciation
Global (objet global) et objet Math
2. Objet hôte
L'objet hôte est un objet fourni par l'environnement pour l'exécution des scripts JS, et est un objet fourni par le navigateur, qui est utilisé pour améliorer l'environnement d'exécution ECMAScript. Il y avait de gros problèmes de compatibilité au début, et certains des principaux objets sont actuellement compatibles avec la plupart des navigateurs, qui sont divisés en deux catégories : 1)
Objets BOM (Browser Object Model)
Fenêtre、Navigateur、Écran、Historique、Emplacement
2) Objet DOM (Document Object Model)
Document, ancre, zone, base, corps, bouton, canevas, événement, cadre, jeu de cadres, IFrame, image, lien, méta, style, formulaire, bouton d'entrée, case à cocher d'entrée, fichier d'entrée, entrée masquée, mot de passe d'entrée, radio d'entrée, Réinitialisation d'entrée、Input Submit、Input Text、Option、Select、Textare、Table、TableCell、TableRow
3. Objets personnalisés
Objets définis par les développeurs eux-mêmes. La méthode de l'objet personnalisé est la suivante :
(1) Méthode littérale d'objet (créer des objets via JSON)
var obj1 = {
}；var obj2 = {
x:0，y:0}；var obj3 = {
name：‘Mary’，age：18}
Inconvénients : Utiliser la même interface pour créer de nombreux objets générera beaucoup de code en double.
(2) Mode usine.
function createPerson(name,age,actor){
var person = new Object();
person.name = "rose";
person.age = 18;
person.job = "actor";
person.sayName = function () {
console.log(this.name);
};
return person
}
console.log(p1 instanceof Object);//true
console.log(p1 instanceof createPerson);//false
①Le mode usine consiste à mettre l'instruction de création d'un objet dans une fonction, à créer un objet spécifique en passant des paramètres, et enfin à renvoyer l'objet créé.
La fonction createPerson() peut construire un objet Person contenant toutes les informations nécessaires selon les paramètres reçus.
Cette fonction peut être appelée un nombre infini de fois, et à chaque fois elle retourne un objet avec 2 propriétés et une méthode.
② Inconvénients : bien que le modèle d'usine puisse créer plusieurs objets similaires, il ne peut pas résoudre le problème d'identification d'objet, c'est-à-dire comment connaître le type d'un objet.
(3) Créer une instance d'objet
var person = new Object();
person.name = "rose";
person.age = 18;
person.job = "actor";
person.sayName = function () {
console.log(this.name);
};
console.log(person);
(4) Mode constructeur
var obj1 = new Array；var obj2 = new Date();
① Inconvénients : Le principal problème avec l'utilisation des constructeurs est que chaque méthode doit être créée sur chaque instance.
②Dans ECMAScript, les fonctions sont des objets, donc chaque fois qu'une fonction est définie, un objet est instancié.
③ C'est-à-dire que les méthodes de plusieurs objets instanciés via le constructeur sont plusieurs méthodes différentes, mais leurs codes internes et fonctions implémentées sont les mêmes, ce qui entraîne un certain gaspillage de ressources.
(5) Mode prototype
function Student() {
}
Person.prototype.name = "rose";
Person.prototype.age = 18;
Person.prototype.sayName = function () {
console.log(this.name);
};
var p = new Student();
console.log(p);
①En js, chaque fonction a un attribut prototype, qui est un pointeur vers un objet appelé objet prototype.
②L'utilisation du mode prototype permet à toutes les instances de partager les propriétés et les méthodes de l'objet prototype, c'est-à-dire qu'il n'est pas nécessaire de définir les informations de l'instance d'objet dans le constructeur.
③ Inconvénient : le lien de transmission des paramètres d'initialisation pour le constructeur est omis et, par conséquent, toutes les instances obtiendront la même valeur d'attribut par défaut.
Le plus gros problème avec le modèle Prototype est causé par la nature partagée. Toutes les propriétés du prototype sont partagées par de nombreuses instances.
Ce type de partage est très approprié pour les fonctions. Le problème est plus prononcé pour les propriétés qui contiennent des types de référence. Par conséquent, le modèle prototype est rarement utilisé seul.
(6) Utilisation combinée du mode constructeur et du mode prototype
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayName = function () {
console.log(this.name);
};
var p = new Person("rose", 18);
console.log(p);
① La combinaison du mode constructeur et du mode prototype est le moyen le plus courant de créer des types personnalisés. Lorsqu'un objet se réfère à ses propriétés, il recherchera selon la chaîne de prototypes jusqu'à ce que le prototype d'Objet soit trouvé.
②Le mode constructeur est utilisé pour définir les propriétés d'instance, tandis que le mode prototype est utilisé pour définir les méthodes et les propriétés partagées.
③ En conséquence, chaque instance aura sa propre copie des attributs d'instance, mais partagera en même temps la référence à la méthode, économisant ainsi la mémoire au maximum.
(7) Autres modes
①Mode prototype dynamique : uniquement lorsque le constructeur est appelé pour la première fois, la méthode est affectée à la propriété correspondante de l'objet prototype et les autres exemples sont traités de la même manière que le mode constructeur
②Mode constructeur parasite : n'encapsulez que le code qui crée l'objet, puis renvoyez l'objet nouvellement créé, utilisez toujours le nouvel opérateur pour appeler
③ Mode constructeur sécurisé : il n'y a pas de propriétés publiques, seulement des variables et des méthodes privées, et quelques méthodes get/set pour traiter les variables privées.