JavaScript OOP orientado a objetos

La programación orientada a objetos (OOP) es un paradigma de programación y también un método de desarrollo de programas. Un objeto se refiere a una instancia de una clase. Utiliza objetos como la unidad básica del programa, encapsulando programas y datos en TI para mejorar la reutilización, la flexibilidad y la escalabilidad del software. - Wikipedia

En general, orientado al objeto incluye: herencia, encapsulación, polimorfismo, abstracción

Herencia de forma de objeto

Copia ligera

 var persona = {nombre: 'Allin', Age: 18, Dirección: {Inicio: 'Home', Office: 'Office',} scLools: ['x', 'z'],}; var programador = {lenguaje: 'js',}; función extender (p, c) {var c = c || {}; para (var prop stoP en p) {c [prop] = p [prop]; }} extender (persona, programa); Programer.name; // Allinprogramer.address.home; // homeProgramer.address.home = 'House'; //houseperson.address.home; // casa

De los resultados anteriores, la falla de la copia superficial es que modificar el valor del tipo de referencia en el objeto infantil afectará el valor en el objeto principal, porque en la copia superficial del tipo de referencia solo copia la dirección y apunta a la misma copia en la memoria.

Copia profunda

 Función ExtendDeeply (P, C) {var c = c || {}; for (var aprop en p) {if (typeof p [prop] === "objeto") {c [prop] = (p [prop] .constructor === array)? []: {}; extenderDePly (p [prop], c [prop]); } else {c [prop] = p [prop]; }}}

Use la recursión para la copia profunda, de modo que la modificación de los subobjetos no afecte al objeto principal.

 ExtendDePly (persona, programador); programador.address.home = 'allin'; persona.address.home; // Inicio usa llamadas y aplicar a la función de herencia parent () {this.name = "ABC"; this.address = {home: "home"};} function child () {parent.call (this); this.language = "js"; } Objeto.create () en ES5 var p = {nombre: 'Allin'}; var obj = object.create (o); obj.name; // Allin

Object.Create () como alternativa al nuevo operador solo se libera después de ES5. También podemos simular este método nosotros mismos:

 // simular la función de método object.create () mycreate (o) {function f () {}; F.Prototype = O; o = nuevo f (); return o;} var p = {nombre: 'Allin'}; var obj = mycreate (o); obj.name; // Allin

Actualmente, las últimas versiones de los principales navegadores (incluido IE9) han implementado este método. Si se encuentra con un navegador antiguo, puede usar el siguiente código para implementarlo usted mismo.

 if (! object.create) {object.create = function (o) {function f () {} f.prototype = o; devolver nuevo f (); }; }

Herencia de clases

 Object.Create () Function Person (nombre, edad) {} persona.prototype.headCount = 1; persona.prototype.eat = function () {console.log ('comer ...');} Función Programmer (nombre, edad, título) {} programador.prototype = objeto.create (persona.prototype); // Crear una relación de herencia programador.prototype.constructor = programador; // Modificar el apuntado del constructor

Llame al método de clase principal

 Función Persona (nombre, edad) {this.name = name; this.age = Age;} Person.prototype.headCount = 1; Person.prototype.eat = function () {console.log ('comer ...');} function programador (nombre, edad, título) {persona.apply (this, argumentos); // llame al constructor de la clase principal} programador.prototype = objeto.create (persona.prototype); programammer.prototype.constructor = programador; programador.prototype.language = "js"; programador.prototype.work = function () {console.log ('estoy trabajando en el código en'+ this.language);; Persona.prototype.eat.apply (this, argumentos); // llame al método en la clase principal}

Paquete

Espacio de nombres

JS no tiene espacio de nombres, por lo que se puede simular con objetos.

 var app = {}; // Namespace App // Module 1App.module1 = {name: 'Allin', f: function () {console.log ('Hi Robot'); }}; app.module1.name; // "Allin" App.module1.f (); // hola robot

Miembros estáticos

 Función persona (nombre) {var age = 100; this.name = name;} // static member persona.walk = function () {console.log ('static');}; persona.walk (); // estático

Privado y público

 Function Person (id) {// Propiedades y métodos privados var name = 'Allin'; var trabajo = function () {console.log (this.id); }; // Propiedades y métodos públicos this.id = id; this.say = function () {console.log ('say hola'); trabajo.call (esto); };}; var p1 = nueva persona (123); p1.name; // undefinedp1.id; // 123p1.say (); // Di hola 123

Modular

 var modulea; modulea = function () {var prop = 1; función func () {} return {func: func, prop: prop};} (); // ejecutar la función anónima inmediatamente

Prop, FUNC no se filtrará al alcance global. U otra forma de escribir, use nuevo

 modulea = new function () {var prop = 1; función func () {} this.func = func; this.prop = prop;}

Polimórfico

El método de simulación recarga

El atributo de argumentos puede obtener el número de parámetros reales de una llamada de función, y puede usarlo para simular la sobrecarga del método.

 función demo (a, b) {console.log (demo.length); // Obtener el número de parámetros formales console.log (argumentos.length); // Obtener el número de parámetros reales console.log (argumentos [0]); // el primer parámetro real 4 console.log (argumentos [1]); // el segundo parámetro real 5} demostración (4, 5, 6); // Implementar la adición de la función de parámetros reales de longitud variable add () {var total = 0; para (var i = arguments.length-1; i> = 0; i-) {total += argumentos [i]; } return Total;} console.log (agregar (1)); // Implementar la adición de la función de parámetros reales de longitud variable add () {var total = 0; para (var i = arguments.length-1; i> = 0; i-) {total += argumentos [i]; } return Total;} console.log (agregar (1)); // 1console.log (agregar (1, 2, 3)); // 7 // en caso de diferentes parámetros function fontSize () {var ele = document.getElementById ('js'); if (argumentos.length == 0) {return ele.style.fontSize; } else {ele.style.fontSize = argumentos [0]; }} FontSize (18); console.log (fontSize ()); // en caso de configuración de función de diferentes tipos () {var ele = document.getElementById ('js'); if (typeof argumentos [0] === "objeto") {for (var p en argumentos [0]) {ele.style [p] = argumentos [0] [p]; }} else {ele.style.fontSize = argumentos [0]; ele.style.backgroundcolor = argumentos [1]; }} setting (18, 'rojo'); configuración ({FontSize: 20, BackgroundColor: 'Green'});

Método Reescribir

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

Clase abstracta

tirar un nuevo error (''); En el constructor lanza la excepción. Esto evita que esta clase se llame directamente.

 function DetectorBase () {Throw New Error ('La clase abstracta no se puede invocar directamente!');} DetectorBase.prototype.detect = function () {console.log ('detection iniciando ...');}; detectorBase.prototype.stop = function () {console.log ('detectado detenido. {tirar nuevo error ('error');}; // var d = new DetectorBase (); // error no capturado: la clase abstracta no se puede invocar directamente! Function LinkDetector () {} LinkDetector.Prototype = Object.Create (DetectorBase.Prototype); LinkDetector.prototype.Construcor = LinkDetector; Var L = NeweN NEWTOTY LinkDetector (); console.log (l); // LinkDetector {} __ Proto__: LinkDetectorl.Detect (); // Detección de inicio ... l.init (); // Error no capturado: error