A sintaxe do Javascipt não suporta "classe" (classe) [já suportada pelo ES6], mas existem métodos para simular classes. Hoje vou falar principalmente sobre o método de simular "classes" em JavaScipt e o resumo e a revisão da herança no JS.
Implementar "classes" e herança no JS é a chave e a dificuldade. Muitos estudantes podem entender "aulas" e herança no JS, mas quando analisam em profundidade, sentem que são incapazes de fazê -lo e são ambíguas.
Vamos primeiro resumir vários métodos para definir "classes" por JS:
Método 1: método construtor
Este método é um método relativamente clássico e o veremos com frequência. Ao gerar uma instância, use a nova palavra -chave. As propriedades e métodos da classe também podem ser definidos no objeto de protótipo do construtor.
função pessoa (nome, idade, trabalho) {this.name = name; this.age = idade; this.job = Job;} Pessoa.Prototype.SayName = function () {alert (this.name);} var Person1 = new Person ("Zhang San", "29", "Web Frontpage Manager"); var pessoa2 = nova pessoa ("Li si", "22", "Doctor"); Person1.SayName; // pop "Zhang San" Console.log (Person2.name) // Output "Li Si"Método 2: Método object.Create ()
O objeto de método.Creat () como uma alternativa ao novo operador é liberado apenas após o ES5. Usando esse método, uma "classe" é um objeto, não uma função.
var myMammal = {name: 'Herb the Mammal', get_name: function () {return this.name; }, diz: function () {return this.Saying || ''; }} var mycat = object.create (myMammal); mycat.name = 'henrietta'; mycat.saying = 'meow'; mycat.get_name = function () {console.log (this.says + '' + this.name + this.says);} mycat._name (Saída:
function () {return this.Saying || ''; } Henriettafunction () {return this.Saying || ''; }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 (); }; }Método 3: Lei Minimalista
Pacote
Este método não usa isso e protótipo, e o código é muito simples de implantar. Primeiro de tudo, ele também usa um objeto para simular "classe". Nesta classe, defina um construtor cretfn () para gerar uma instância.
var Dog = {creatfn: function () {// Alguns código aqui}};Em seguida, em cretfn (), defina um objeto de instância e use esse objeto de instância como o valor de retorno.
var Dog = {creatfn: function () {var Dog = {}; cachorro.name = "cachorro"; Dog.makesound = function () { alerta ("woofwoofwooofwoofoofwoofoofoofoofoofwoofwoofwoofoofwoofwoofwoofwoofoofoofwoofwoofwoofwoofoofwoofwoofwoofwoofwoofwww Oofwoofwoofwoofwoofwooofwoofwoofoofoofoofwoofwoofwoofwoofwoofwoofwoofwoofwoofoofwoofwoofwoofwoofoofoofwoofwoofwoofwoofwoofwo OfwooFooFooFoFOOFOOFOOFWOOFWOOFEOFOOFOOFOOFOOFOOFWOOFOOFOOFWOOFEOFWOOFWOOFWOOFEOFOOFOOFOOFWOOFOOFOOFOOFOOFOOFWOOFWOOFWOOFWOOFWOOFWOWWWO OfwooFooFooFoFOOFOOFWOOFWOOFWOOFWOOFOOFOOFOOFOOFWOOFOOFOOFWOOFEOFWOOFEFWOOFWOOFEFOOFOOFOOFWOOFWOOFEFOOFOOFOOFWOOFEOFWOOFWOOFWOOFWOOO FWOOFOOFWOOFOOFWOOFWOOFEOFWOOFWOOFOOFOOFOOFOOFWOOFOOFOOFOOFWOOFEOFWOOFWOOFWOOFEOFOOFOOFOOFWOOFOOFOOFOOFOOFOOFWOOFWOOFWOOFEOFWOOFWOOCOWOOPO FWOOFOOFWOOFEOFWOOFWOOFEOFWOOFEFWOOFOOFOOFOOFOOFWOOFOOFOOFOOFWOOFEOFWOOFEFWOOFEOFOOFOOFWOOFWOOFOOFWOOFEOFOOFOOFWOOFWOOFWOOFEOFWOOFWOOFEFOFOFOFOMENTE woofwoofwoofwoofwoofwoofwoofwoofoofoofoofoofwoofoofoofwoofwoofwoofwoofwoofwoofoofwoofoofwoofwoofwoofwoofwoofwoofwoofwoofwww OofwoofwoofwoofwoofwooofwoofwoofoofoofoofwoofwoofwoofwoofwoofwoofwoofwoofwoofoofwoofwoofwoofwoofoofoofwoofwoofwoofwoofwoofwoAo usá -lo, ligue para o método cretfn () para obter o objeto de instância.
var dog1 = cachorro.creatfn (); Dog1.makesound (); // woof
A vantagem dessa abordagem é que é fácil de entender, tem uma estrutura clara e elegante e está de acordo com a construção tradicional de "programação orientada a objetos", para que os seguintes recursos possam ser facilmente implantados.
herdar
É muito conveniente implementar uma classe na próxima classe. Basta chamar o método cretfn () deste último no método cretfn (). Primeiro defina uma classe de animais.
var animal = {creatfn: function () {var animal = {}; Animal.eat = function () {alert ("Eat Meal"); }; animal de retorno; }};Então, no método cretfn () do cachorro, é chamado o método cretfn () do animal.
var Dog = {creatfn: function () {var Dog = animal.creatfn (); cachorro.name = "cachorro"; cachorro.makesound = function () {alert ("wangwoo"); }; cachorro de volta; }};A instância do cão obtida dessa maneira herdará a classe de cães e a classe de animais ao mesmo tempo.
var dog1 = cachorro.creatfn (); cachorro1.eat (); // Coma refeição
Propriedades privadas e métodos privados
No método cretfn (), desde que os métodos e propriedades que não sejam definidos no objeto de cachorro sejam privados.
var Dog = {creatfn: function () {var Dog = {}; var Sound = "woof woof"; cachorro.makesound = function () {alert (som); }; cachorro de volta; }};O som variável interno no exemplo acima não pode ser lido externamente e só pode ser lido através do método público.
var dog1 = cachorro.creatfn (); alerta (Dog1.Sound); // indefinido
Compartilhamento de dados
Às vezes, precisamos de todos os objetos de instância para poder ler e escrever os mesmos dados internos. No momento, basta encapsular esses dados internos dentro do objeto de classe e fora do método cretfn ().
var Dog = {Sound: "Wowangwoo", cretfn: function () {var Dog = {}; Dog.makesound = function () {alert (Dog.Sound); }; Dog.Changesound = function (x) {Dog.Sound = X; }; cachorro de volta; }};Em seguida, dois objetos de instância são gerados:
var dog1 = cachorro.creatfn (); var dog2 = cachorro.creatfn (); Dog1.makesound (); // woof
No momento, se houver um objeto de instância e os dados compartilhados forem modificados, o outro objeto de instância também será afetado.
Dog2.Changesound ("Wuwuwu"); Dog1.makesound (); // wuwuwuwuHerança JS
Em relação à herança, também existem muitas informações disponíveis para investigação na Internet, mas muitos amigos não entendem em profundidade suficiente. Quando se trata de herança, se você não verificar as informações e de repente poderá não ser capaz de dizer o motivo. Isso mostra que nosso conhecimento básico não é sólido o suficiente. Não completamente compreendido. Hoje, eu mantenho com base em meus antecessores e vamos revisar essa herança com você.
Os dois métodos de herança mais usados são os seguintes:
Herança da cadeia de protótipo
O que é herança da cadeia de protótipos? Não vou falar sobre a definição aqui. De fato, é usar o protótipo para herdar o nível dos pais.
Por exemplo:
function parent () {this.name = 'mike';} function filho () {this.age = 12;} child.prototype = new pai (); // filho herda o pai e forma uma cadeia através do protótipo var test = new Child (); this.weight = 60;} Brother.prototype = new Child (); // Continue o protótipo da cadeia herda var irmão = new Brother (); Alert (irmão.name); // Herito pai e filho, Mikealert (irmão.age); // pop 12No exemplo acima, através do protótipo, uma cadeia é formada. A criança herda pai. Irmão herda a criança. Finalmente, o irmão tem os atributos de criança e pai, bem como seus próprios atributos. Esta é a herança da cadeia original.
Herança clássica (construtor de empréstimo)
A herança clássica geralmente usa a chamada ou se aplica para chamar o construtor de supertipo internamente. Por exemplo:
função pai (idade) {this.name = ['Mike', 'Jack', 'Smith']; this.age = idade;} função criança (idade) {parent.call (this, idade);} var test = new Child (21); alert (test.age); // 21Alert (test.name); // mike, jack, smithtest.name.push ('fill');As duas heranças acima são os dois métodos mais básicos de herança.
Além disso, existem alguns métodos de herança, vamos dar uma olhada!
Herança combinada
A herança combinada é geralmente o método de herança usado na combinação dos dois métodos de herança acima.
Como exemplo:
função pai (idade) {this.name = ['Mike', 'Jack', 'Smith']; this.age = idade;} parent.prototype.run = function () {return this.name + 'são' + this.age;}; function filho (idade) {parent.call (this, idade); // impessoação de objeto, pisar em argumentos para supertype} child.prototype = novo () // // protótipo de cadeia de cadeia inher -sher} child.protype = () // //; alerta (test.run ()); // Mike, Jack, Smith são ambos 21Herança de protótipo
É apenas uma palavra diferente da herança da cadeia original mencionada acima, mas não é o mesmo conteúdo. O que estamos falando sobre a herança do protótipo é o que falamos na última classe, criando uma nova classe através do método objeto.create (). Porque esse método não é suportado por navegadores antigos. Portanto, se não usarmos object.create (), também pode haver um método alternativo, como segue:
função obj (o) {função f () {} f.prototype = o; retornar novo f (); }Esta função implementa a maneira como criamos classe em object.create ()!
Portanto, o seguinte é:
função obj (o) {função f () {} f.prototype = o; retornar novo f (); } var box = {name: 'trigkit4', arr: ['irmão', 'irmã', 'baba']}; var b1 = obj (caixa); alert (b1.name); // trigkit4b1.name = 'Mike'; Alert (B1.name); // Mikealert (B1.arr); // Brother, irmã, Babab1.arr.push ('Pais'); Alert (B1.arr); // irmão, irmã, Baba, Paisvar B2 = Obj (Box); Alert (B2.Name); // TIGKIT4Arner (B.Herança parasitária
Como exemplo:
função creatanother (original) {var clone = new Object (original); clone.sayhi = function () {alert ("hi")}; Return clone;} var pessoa = {nome: "Haorooms", amigos: ["hao123", "zhansan", "lisi"]} var otherperson = creatanother (pessoa); ANTHERPERSON.SAYHI (); // HICombinação parasita
Função HeritPrototype (subtipo, supertype) {var prototype = object.creat (supertype.prototype); prototype.constructor = subtipo; subtype.prototype = prototype;}; função supertype (nome) {this.name = name; this.colors = ['vermelho', 'azul', 'verde'];} supertype.prototype.sayname = function () {console.log (this.name);} função subtype (nome, ad) {//inheritPrototype.callinthis.name); this.age = Age;} // HeritPrototype (subtype, supertype); subtype.prototype.sayage = function () {console.log (this.age);} var instance = new Subtype ();A herança de classe é basicamente os métodos acima. Vamos falar brevemente sobre a classe de classe do ES6!
Classe de implementação ES6
// Defina classe de classe Point {construtor (x, y) {this.x = x; this.y = y; } tostring () {return '('+this.x+','+this.y+')'; }} var point = new Point (2, 3); Point.ToString () // (2, 3) Point.HasownProperty ('X') // Truepoint.HasownProperty ('Y') // TruePoint.HasownProperty ('ToString') // Falseint).Herança da aula
classe colorpoint estende o ponto {construtor (x, y, cor) {super (x, y); // Ligue para o construtor (x, y) da classe pai this.color = color; } tostring () {return this.color + '' + super.toString (); // Ligue para o tostring () da classe pai}}