JS est un langage basé sur des objets qui peut simuler des langages orientés objet tels que Java | C ++ à l'aide d'idées orientées objet.
• orienté vers le processus
◦ Suivre les étapes pour résoudre le problème
• orienté objet
◦ Faire face aux objets (contenu et rôles) nécessaires pour résoudre le problème, puis appeler des méthodes pertinentes en fonction de certaines règles en fonction de la logique métier.
Les objets sont divisés en objets système et objets personnalisés. Nous pouvons créer des objets système en appelant le constructeur système, tels que Array | Date, etc. Les objets personnalisés doivent être créés par eux-mêmes et ne peuvent pas être créés à l'aide de fonctions système.
JavaScript Créer un objet
1. Créez directement
// Créer directement // js Créer un objet // 1: Créer un objet vide var person1 = new Object (); // 2: Ajouter les propriétés et méthodes requises de l'objet dans Person1.name = "Ailer"; console .log (Person1.name); personne1.gender = "mâle"; // 3: Méthode ajoutée à cet objet | (fonction) Person1. manager = function () {console .log ("Ailer est mon nom anglais"); } // 4: Méthode de l'objet d'appel: objet. Nom de la méthode (); Person1.Manager (); // Fonction | Méthode? Lorsqu'une fonction appartient à un objet, la fonction appartient à la méthode sous cet objet; La fonction est appelée via le nom de la méthode; // variable | attribut? Lorsqu'une variable appartient à un certain objet, la variable est la méthode sous cet objet. Variables d'appel par des noms d'attribut. // augmenter Person1.age = "6"; // Change Person1.name = "Lemon"; // Vérifiez la console .log (personne1.name); // Supprimer Person1.age; console .log (Person1.age); ==> UNDEFINED // Type de référence, Adresse du magasin // Type de base: Valeur du magasin Bit bit / * var Arr1 = [1,2,3,4] var Arr2 = [5, 6, 7,9]; var arr2 = arr1; // arr2 [0] = 10; // modifier la valeur dans arr2, arr1 change également alert (arr1 [0]); // ===> 10 type de référence * / var per2 = nouveau objet (); per2.Name = "relia"; per2.age = "18"; Per2.Gender = "Femal"; per2.hobby = "citrons"; // 1: Propriétés d'accès à. (syntaxe ponctuelle) // 2: accéder aux propriétés de l'objet via [] (crochets); Les crochets doivent être des chaînes d'attribut ou des variables qui sauvent la chaîne d'attribut | Utilisez des crochets var n = "name" //console.log(per2="name" pour (Var Property dans Per2) {// Console.log (Per2 [Property]); }Bien que intuitif, le code est redondant lors de la création de plusieurs objets
2. Créer des fonctions à l'aide de fonctions (mode d'usine)
Pour résoudre le problème de plusieurs déclarations d'objets similaires, nous pouvons utiliser une méthode appelée Modèle d'usine, qui consiste à résoudre le problème de l'instanciation d'objets avec un grand nombre de duplications.
// Définissez la fonction du constructeur createSerson (nom, âge) {// Créer un nouvel objet vide var personne = nouvel objet; // ajouter l'attribut | méthode personne.name = name; Person.age = âge; personne. manager = function () {console .log ("ai"); } // retour de retour personne; } var per1 = createSerson ("Aier", 12); console .log (Per1.name); var per2 = CreatePerson ("citron", 23); Console .log (Per2.age); Console.log (objet Per2 instance Of); // true console.log (Per2 instanceof CreatePerson); // false // ne peut pas distinguer le type d'objet console.log (per2.Manager == Per1.Manager); // false, il peut être obtenu que Per1 et Per2 ouverts et fermés sont respectivementExcellent: création en vrac d'instances similaires
Manquant: l'instance utilise des attributs similaires, ce qui rend le gaspillage de mémoire et le type de l'objet ne peut pas être distingué.
3. Création littérale
Excellent: simple et direct
Missing: Impossible de construire des objets similaires en lots
// L'objet créé par les littéraux ne pointe pas vers l'instance, mais pour objet // créer var per1 = {nom: "Ailer", constructeur: Per1, âge: 12, genre: "femelle", hobby: "play", manger: function () {console.log (this.name); }} per1.eat (); // Ailer per1.name = "citron"; per1.eat (); // citron console.log (typeof per1); // objet console.log (per1.constructor == objet); // true4. Nouveau constructeur
// Le constructeur crée un objet, et ses objets enfants ne sont pas reconnus par l'instance. Tous créés avec de nouveaux objets + obj // sont reconnus, mais une zone de code est toujours gaspillée; ==> Produce Prototype Creation // Create JS Object New + Constructor // 1: Create Constructor | Habituellement, la première lettre est capitalisée Fonction CreatePerson (nom, âge) {// 2: Affichez les attributs | Méthode de l'objet sur ce pointeur. Lorsque la fonction est appelée pour créer un objet, ce pointeur pointe vers ce nouvel objet; // Ceci est ajouté à cet objet this.name = name; this.age = âge; /*this.speak = function () {// Ici, cela pointe également vers l'objet de création console.log (this.name + "bonjour"); }} / * CreatePerson.prototype.gender = "20"; CreatePerson.prototype. ea = function () {console .log (this.name + "sfd"); } * /// __proto__: est: l'attribut prototype dans l'objet d'instance, pointant vers l'objet prototype correspondant au constructeur correspondant // [[prototype]] // appel var per1 = new CreateSerson ("Ailer", "20"); var per2 = new CreateSerson ("relia", "18"); console .log (instance Per1 de CreateSerson); // == True Console .log (Per2 instanceof CreateSerson); // ==> True Console .log (per1.speak == Per2.Speak); // == false signifie que le système a ouvert deux zones de code différentes, provoquant des déchets de mémoire.Il est plus pratique de créer un littéral, donc il génère un constructeur, un constructeur normal (modèle d'usine), et l'instance de sous-objet n'est pas reconnue et la mémoire est gaspillée. Utilisez un nouveau constructeur + et le sous-objet est reconnu, mais un code est toujours dupliqué, la mémoire est gaspillée et le code prototype est généré pour le résoudre.
5. Mode prototype
Fonction CreateAnImal (Name, Age) {//1.2: Bind Paramètres externes à l'attribut d'instance this.name = name; this.age = âge; } //1.3 Bonnez-vous le même attribut sur le prototype (attribut prototype, méthode prototype) createAnimal.prototype.gender = "mâle"; CreateEnimal.prototype.style = function () {console.log (this.name + "Ailers"); }; // 2: Appelez le constructeur pour créer un objet var cat1 = new CreateEnImal ("xiaoHua", "2"); var cat2 = new CreateAnimal ("xiaohua", "2"); Cat1.style (); Console.log (cat1.style == cat2.style); // La méthode fait référence à la même adresse, mettez l'attribut dans l'objet prototype pour enregistrer l'adresse // instanceof peut déterminer quel objet appartient à [fonction] // constructeur de constructeurs peut également l'utiliser pour déterminer l'objet appartenant à [constructeur] [constante] // l'objet d'instance est un constructeur de constructeurs de constructeurs de constructeurs de constructs pour sa fonction de constructeur // instance. La différence entre console.log (Cat1 instanceof CreateAnimal); // true console.log (objet Cat1 instanceof); // true console.log (objet Cat1 instanceof); // true console.log (cat1.constructor == objet); // == false // Le prototype du constructeur a également un attribut de constructeur qui fait référence à la fonction du constructeur console.log (createanimal.prototype.constructor == CreateAnimal); // true // détermine si la propriété existe dans cet objet. Cet attribut est un attribut d'instance ou un prototype // alert ("name" dans Cat1) // true // alert ("Gender" dans Cat1); // true // HasownProperty: Pour déterminer si une certaine propriété est un attribut d'instance ou hérité de l'attribut prototype s'il est vrai, sinon n'existe pas | ne revient pas faux; console.log (cat1.hasownproperty ("aaa")); // false la propriété inexistante renvoie false console.log (cat1.hasownproperty ("name")); // true property console.log (cat1.hasownproperty ("style")); // False la propriété prototype renvoie false // voyage la propriété pour trouver le prototype des biens // juge du prototype est faux // Prototype Property Tool Class Console.log (isPrototype ("Gender", Cat1)); // True Fonction isPrototype (Prostring, Obj) {if (Prostring in Obj) {if (! obj.hasownproperty (Prostring)) {return true; } else {return false; }} else {return false; }} / * Fonction isProperty (objet, propriété) {// juger s'il y a une propriété dans le prototype return!Mode prototype dynamique
// Initialisez la fonction prototype par (nom, âge, genre) {this.name = name; this.age = âge; this.gender = genre; // Exécuter une seule fois lors de l'initialisation du prototype if (typeof this.sayName! = "Function") {personne.prototype.sayName = function () {alert (this.name); }}}Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.