JavaScript OOP Orientado por objetos

A programação orientada a objetos (OOP) é um paradigma de programação e também um método de desenvolvimento do programa. Um objeto refere -se a uma instância de uma classe. Ele usa objetos como a unidade básica do programa, encapsulando programas e dados para melhorar a reutilização, flexibilidade e escalabilidade do software. - Wikipedia

Geralmente, orientado a objetos, inclui: herança, encapsulamento, polimorfismo, abstração

Herança da forma de objeto

Cópia leve

 var pessoa = {nome: 'allin', idade: 18, endereço: {home: 'home', office: 'office',} sclools: ['x', 'z'],}; var programer = {idioma: 'js',}; função estend (p, c) {var c = c | {}; for (var prop em p) {c [prop] = p [prop]; }} estender (pessoa, programa); programador.name; // allInProgramer.address.home; // homeprogramer.address.home = 'house'; //houseperson.address.home; // casa

Nos resultados acima, a falha da cópia rasa é que a modificação do valor do tipo de referência no objeto Child afetará o valor no objeto pai, porque na cópia rasa do tipo de referência apenas copia o endereço e aponta para a mesma cópia na memória.

Cópia profunda

 função extenddeeply (p, c) {var c = c || {}; for (var prop in p) {if (typeof p [prop] === "object") {c [prop] = (p [prop] .constructor === Array)? []: {}; estendDeeply (p [prop], c [prop]); } else {c [prop] = p [prop]; }}}

Use a recursão para cópia profunda, para que a modificação de subobjetos não afete o objeto pai.

 estendDeeply (Pessoa, Programer); Programer.address.home = 'Allin'; Person.address.home; // home usa a chamada e aplicação na função herança parent () {this.name = "abc"; this.address = {home: "home"};} função child () {parent.call (this); this.Language = "JS"; } Object.create () em es5 var p = {name: 'allin'}; var obj = object.create (o); obj.name; // allin

Object.create () como alternativa ao novo operador é liberado apenas após o ES5. Também podemos simular esse método:

 // simular o método object.create () função mycreate (o) {function f () {}; F.Prototype = O; o = novo f (); retornar o;} var p = {name: 'allin'}; var obj = myCreate (o); obj.name; // allin

Atualmente, as versões mais recentes dos principais navegadores (incluindo o IE9) implantaram esse método. Se você encontrar um navegador antigo, poderá usar o código a seguir para implantá -lo.

 if (! object.create) {object.create = function (o) {function f () {} f.prototype = o; retornar novo f (); }; }

Herança de classes

 Object.Create () Função Pessoa (nome, idade) {} Person.prototype.headCount = 1; Person.prototype.eat = function () {Console.log ('Eating ...');} Programador de funções (nome, idade, título) {} programador.prototype = object.create (Person.. // Crie um relatório de herança programador.prototype.constructor = programador; // modifica os apontadores do construtor

Ligue para o método da classe pai

 função pessoa (nome, idade) {this.name = name; this.age = idade;} pessoa.prototype.headCount = 1; PERSON.PROTOTYPE.EAT = function () {Console.log ('Eating ...');} Programador de função (nome, idade, título) {Person.Apply (this, argumentos); // Ligue para o construtor da classe pai} Programmer.prototype = object.Create (PERSON.Prototype); Programmer.Prototype.Constructor = Programmer; Programmer.prototype.Language = "JS"; Programmer.protype.Work = function () {console.log ('I'm Imos "; Pessoa.prototype.eat.apply (this, argumentos); // Ligue para o método na classe pai}

Pacote

Espaço para nome

O JS não possui espaço para nome, para que possa ser simulado com objetos.

 var app = {}; // namespace app // módulo 1app.module1 = {name: 'allin', f: function () {console.log ('hi robot'); }}; app.module1.name; // "allin" app.module1.f (); // Oi robô

Membros estáticos

 função pessoa (nome) {var Age = 100; this.name = name;} // estático membro PERSON.WALK = function () {console.log ('static');}; Person.walk (); // estático

Privado e público

 função pessoa (id) {// Propriedades e métodos privados var name = 'allin'; var work = function () {console.log (this.id); }; // Propriedades e métodos públicos this.id = id; this.say = function () {console.log ('diga hello'); work.call (this); };}; var p1 = nova pessoa (123); p1.name; // undefinedp1.id; // 123p1.say (); // diga olá 123

Modular

 var modulea; modulea = function () {var prop = 1; function func () {} return {func: func, prop: prop};} (); // Execute a função anônima imediatamente

Prop, Func não vazará para o escopo global. Ou outra maneira de escrever, use novo

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

Polimórfico

Método de simulação Reload

O atributo de argumentos pode obter o número de parâmetros reais de uma chamada de função e pode usá -lo para simular a sobrecarga do método.

 Função Demo (A, B) {Console.log (Demo.Length); // obtenha o número de parâmetros formais console.log (argumentos.length); // Obtenha o número de parâmetros reais console.log (argumentos [0]); // O primeiro parâmetro real 4 console.log (argumentos [1]); // o segundo parâmetro real 5} demonstração (4, 5, 6); // Implemente a adição de comprimento variável Parâmetros reais função add () {var total = 0; for (var i = argumentos.Length-1; i> = 0; i-) {total += argumentos [i]; } retornar total;} console.log (add (1)); // Implemente a adição de comprimento variável Parâmetros reais função add () {var total = 0; for (var i = argumentos.Length-1; i> = 0; i-) {total += argumentos [i]; } retornar total;} console.log (add (1)); // 1console.log (add (1, 2, 3)); // 7 // No 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 ()); // No caso de diferentes tipos função configuração () {var ele = document.getElementById ('js'); if (typeof argumentos [0] === "objeto") {for (var p em argumentos [0]) {ele.style [p] = argumentos [0] [p]; }} else {ele.style.fontsize = argumentos [0]; ele.style.backgroundColor = argumentos [1]; }} configuração (18, 'vermelha'); configuração ({fontSize: 20, BackgroundColor: 'Green'});

Reescrita do método

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

Classe abstrata

lançar um novo erro (''); Na construção, lança exceção. Isso impede que essa classe seja chamada diretamente.

 function detectorBase () {tiro novo erro ('A classe abstrata não pode ser invocada diretamente!');} detectorbase.prototype.detect = function () {console.log ('detecção inicial ...');}; detectorBase.protype.stop = function () {console.Log ('detecção stopped. {lança um novo erro ('erro');}; // var d = new DetectorBase (); // ERRO UNLIGADO: A classe abstrata não pode ser invocada diretamente! function linkDeTector () {} linkDeTector.prototype = object.create (detectorbase.protype); linkDeTector.Protype.Creret.Create (LinkTeTy.Protype); LinkDeTector (); console.log (l); // linkDeTector {} __ Proto__: linkDeTectorl.Detect (); // Detecção inicial ... l.init (); // Erro não capturado: erro