Javascript oop objet orienté

La programmation orientée objet (POO) est un paradigme de programmation et également une méthode de développement de programmes. Un objet fait référence à une instance d'une classe. Il utilise des objets comme unité de base du programme, encapsulant les programmes et les données pour améliorer la réutilisabilité, la flexibilité et l'évolutivité du logiciel. - Wikipedia

Généralement, orienté objet comprend: l'héritage, l'encapsulation, le polymorphisme, l'abstraction

Héritage de la forme d'objet

Copie légère

 var person = {name: 'allin', Âge: 18, adresse: {home: 'home', bureau: 'office',} scleols: ['x', 'z'],}; var programmeur = {language: 'js',}; fonction prolong (p, c) {var c = c || {}; pour (var prop dans p) {c [prop] = p [prop]; }} extension (personne, programme); programmeur.Name; // allinprogrammer.address.home; // homeprogrammer.address.home = 'house'; //houseperson.address.home; // maison

D'après les résultats ci-dessus, la faille de la copie peu profonde est que la modification de la valeur du type de référence dans l'objet enfant affectera la valeur dans l'objet parent, car dans la copie peu profonde du type de référence ne copie que l'adresse et pointe vers la même copie en mémoire.

Copie profonde

 fonction extenddeeply (p, c) {var c = c || {}; for (var prop dans p) {if (typeof p [prop] === "objet") {c [prop] = (p [prop] .Constructor === array)? []: {}; extenddeeply (p [prop], c [prop]); } else {c [prop] = p [prop]; }}}

Utilisez la récursivité pour une copie profonde, afin que la modification des sous-objets n'affecte pas l'objet parent.

 Extenddeeply (personne, programmeur); programmeur.address.home = 'allin'; personne.address.home; // Home utilise l'appel et s'appliquer à Hériter la fonction parent () {this.name = "ABC"; this.address = {home: "home"};} function child () {parent.call (this); this.Language = "js"; } Object.create () dans es5 var p = {name: 'allin'}; var obj = object.create (o); obj.name; // ALLIN

Object.create () en tant qu'alternative au nouvel opérateur n'est libéré qu'après ES5. Nous pouvons également simuler cette méthode nous-mêmes:

 // simule la fonction object.create () Méthode myCreate (o) {function f () {}; F.prototype = o; o = nouveau f (); return o;} var p = {name: 'allin'}; var obj = mycreate (o); obj.name; // ALLIN

Actuellement, les dernières versions des principaux navigateurs (y compris IE9) ont déployé cette méthode. Si vous rencontrez un ancien navigateur, vous pouvez utiliser le code suivant pour le déployer vous-même.

 if (! object.create) {object.create = function (o) {function f () {} f.prototype = o; retourner nouveau f (); }; }

Héritage des classes

 Object.create () function Person (nom, âge) {} personne.prototype.HeadCount = 1; personne.prototype.eat = function () {console.log ('alimentaire ...');} Function Programmer (nom, âge, titre) {} Programmer.Prototype = object.create (personne.prototype); // Créer une relation héritée Programmer.prototype.Constructor = Programmer; // modifie le pointage du constructeur

Appelez la méthode de la classe parent

 Fonction Person (nom, âge) {this.name = name; this.age = Âge;} personne.prototype.headCount = 1; personne.prototype.eat = function () {console.log ('alimentaire ...');} Function Programmer (nom, âge, titre) {personne.Apply (this, arguments); // appelle le constructeur de la classe parent} programmeur.prototype = object.create (personne.prototype); programmeur.prototype.constructor = programmeur; programme Personne.prototype.eat.apply (ceci, arguments); // appelle la méthode sur la classe parent}

Emballer

Espace de noms

JS n'a pas d'espace de noms, il peut donc être simulé avec des objets.

 var app = {}; // module d'espace de noms // module 1App.module1 = {name: 'allin', f: function () {console.log ('hi robot'); }}; app.module1.name; // "allin" app.module1.f (); // Salut robot

Membres statiques

 Personne de fonction (nom) {var age = 100; this.name = name;} // membre statique. // statique

Privé et public

 Personne de fonction (id) {// Propriétés et méthodes privées var name = 'allin'; var work = function () {console.log (this.id); }; // Propriétés et méthodes publiques this.id = id; this.say = function () {console.log ('dire bonjour'); work.Call (this); };}; var p1 = nouvelle personne (123); p1.name; // undefinedp1.id; // 123p1.say (); // Dis bonjour 123

Modulaire

 var modulea; modulea = function () {var prop = 1; fonction func () {} return {func: func, prop: prop};} (); // Exécuter la fonction anonyme immédiatement

Prop, Func ne sera pas divulgué à la portée mondiale. Ou une autre façon d'écrire, utilisez de nouveaux

 modulea = new function () {var prop = 1; fonction func () {} this.func = func; this.prop = prop;}

Polymorphe

Méthode de simulation Recharger

L'attribut d'arguments peut obtenir le nombre de paramètres réels d'un appel de fonction et peut l'utiliser pour simuler la surcharge de la méthode.

 Fonction Demo (a, b) {Console.log (Demo.Length); // Obtenez le nombre de paramètres formels Console.log (arguments.length); // Obtenez le nombre de paramètres réels Console.log (arguments [0]); // le premier paramètre réel 4 console.log (arguments [1]); // la deuxième démo paramètre réel 5} (4, 5, 6); // Implémentez l'ajout de paramètres réels de longueur variable add () {var total = 0; pour (var i = arguments.length - 1; i> = 0; i -) {total + = arguments [i]; } return total;} console.log (add (1)); // Implémentez l'ajout de paramètres réels de longueur variable add () {var total = 0; pour (var i = arguments.length - 1; i> = 0; i -) {total + = arguments [i]; } return total;} console.log (add (1)); // 1Console.log (Add (1, 2, 3)); // 7 // Dans le cas de différents paramètres fonction FonTSize () {var ele = document.getElementById ('js'); if (arguments.length == 0) {return ele.style.fontsize; } else {ele.style.fontsize = arguments [0]; }} FonTSize (18); console.log (FonTSize ()); // En cas de différents types Setting () {var ele = document.getElementById ('JS'); if (typeof arguments [0] === "objet") {for (var p dans les arguments [0]) {ele.style [p] = arguments [0] [p]; }} else {ele.style.fontize = arguments [0]; ele.style.backgroundColor = arguments [1]; }} setting (18, 'red'); setting ({FonTSize: 20, backgroundColor: 'Green'});

Réécriture de la méthode

 fonction f () {} var f = new f (); f.prototype.run = function () {console.log ('f');} f.run (); // ff.run = function () {console.log ('fff');} f.run (); // fff

Classe abstraite

lancer une nouvelle erreur (''); dans le constructeur lance une exception. Cela empêche cette classe d'être appelée directement.

 Fonction DetectorBase () {Throw New Error ('La classe Résumé ne peut pas être invoquée directement!');} DetectorBase.prototype.detect = function () {Console.log ('Detection Start ...');}; DetectorBase.prototype.stop = function () {Convole.Log ('Detection () stopped. {lance une nouvelle erreur ('error');}; // var d = new DetectorBase (); // UNCAVER ERROR: Résumé La classe ne peut pas être invoquée directement! Function LinkDector () {} LinkDetector.prototype = Object.Create = LinkDetect LinkDetector (); console.log (l); // linkdetector {} __ proto__: linkdetectorl.detect (); // Démarrage de détection ... l.init (); // Erreur non revêtue: Erreur