Novos recursos do JavaScript ES6 Use novos métodos para definir a classe

O ES6 (ECMAScript 6) é o padrão para a nova versão da linguagem JavaScript, o codinome Harmony (o significado da harmonia obviamente não está acompanhando o ritmo do meu país, entramos na versão dos sonhos chineses). O último padrão foi formulado como ES5, que foi emitido em 2009. Atualmente, a padronização do ES6 está em andamento, e a versão oficialmente finalizada deve ser lançada em dezembro de 2014. Mas a maioria dos padrões está pronta e o suporte ao ES6 por navegadores também está sendo implementado.

A maneira de definir classes no ES6 é o açúcar de sintaxe para definir classes em ES3 e ES5. Embora existam algumas diferenças, a maneira geral de definir classes é mais concisa e a herança de classe é mais conveniente. Se você deseja estar mais familiarizado com a herança no ES6, é melhor entender o método de herança do protótipo no ES5. Existem muitos artigos no parque do blog que dizem a herança do JS. Os alunos que desejam ter um entendimento profundo pesquisarão eles mesmos;

Defina uma classe:

Cada classe definida usando o método de classe possui uma função construtora por padrão. Esta função é a principal função da função do construtor. Isso dentro do corpo da função aponta para a instância gerada. Say () {} é o método no protótipo. Definimos uma aula simples:

Execute o seguinte código

 "Use Strict"; Class Pessoa {construtor (nome) {this.name = name; } diz () {console.log ("diga oi"); }}; new Person (). Say (); // O console será lançado, diga oi

Nota: A classe declarada no ES6 não tem o problema da declaração de função antecipadamente. A classe deve ser declarada primeiro e depois usada, caso contrário, ocorrerá uma exceção. Apenas alteramos a posição do código na demonstração acima e relatamos um erro imediatamente. (Se você entende com o pensamento no ES5, a classe declarada não declara antecipadamente. Para pontos de conhecimento sobre a declaração antecipadamente, a classe declarada através do nome da classe {} é o nome vars var = function () {});

Execute o seguinte código

 "Use Strict"; New Pessoa (). Say (); Classe Pessoa {construtor (nome) {this.name = name; } diz () {console.log ("diga oi"); }};

Métodos estáticos para definir funções:

Se a estática for declarada no aparelho antes do nome da função ao definir uma função, essa função é uma função estática, um método estático, e não tem nada a ver com o protótipo:

Execute o seguinte código

 "Use Strict"; Class Pessoa {construtor (nome) {this.name = name; } static diz () {console.log ("diga oi"); }}; Pessoa.say ();

Defina o método do protótipo:

Defina o método do protótipo e declare -o diretamente assim: nome da função () {}, os colchetes são a lista de parâmetros e os aparelhos são blocos de código. O método para definir o protótipo no ES5 é usar: construtor.prototype. Nome do método do protótipo () {}. Esta forma de escrita é muito pesada. A maneira de definir o protótipo usando ES6 é um pouco como Java e C#. Essas são as características de idiomas de nível relativamente alto:

Execute o seguinte código

 "Use Strict"; Class Pessoa {construtor (nome) {this.name = name; } diz () {console.log ("diga oi"); } sing () {console.log ("lalalala"); }}; new Person (). Say (); // Saída: diga Hinev Person (). Sing (); // Saída: Lalalalala

Propriedades estáticas e propriedades de protótipo:

É um pouco complicado definir propriedades estáticas após a conclusão da definição da classe. O autor do idioma implementa esse método para evitar confusão de código. Todas as propriedades estáticas são definidas no mesmo local, então como o código pode ser mais padronizado?

Execute o seguinte código

 "Use Strict"; Class Pessoa {construtor (nome) {this.name = name; }}; Person.Hands = 2; Console.log (Person.Hands);

Os atributos não podem ser definidos no protótipo. Só podemos definir o conjunto e entrar no protótipo, valor e setter. Observe que o valor e o setter estão no protótipo ...:

Execute o seguinte código

 classe Person {construtor (_name) {this._name = _name; } get name () {return this._name; } set nome (_name) {this._name = _name; }} var p = new Person (); p.name = "heheda"; console.log (p.name); // saída: hehedaconsole.log (p._name); // Saída: Heheda

Se você deseja definir um atributo de protótipo, basta definir o atributo dentro do construtor. Se for herdado, a subclasse também herdará o atributo da classe pai:

Execute o seguinte código

 classe Person {construtor () {this.name = "padrão"; }} classe Man estende a pessoa {construtor () {super (); }} console.log (new Man (). Nome);

Extensões de herança da classe:

O ES5 já tem herança, mas esse tipo de herança geralmente circula. A herança ES6 é baseada apenas no encapsulamento de herança do protótipo (açúcar sinônimo). Embora seja realmente muito mais simples, a herança Java é mais fácil de aprender. SMAN No exemplo de demonstração a seguir significa Superman, não pense assim;

Execute o seguinte código

 "Use Strict"; Class Pessoa {construtor (nome) {this.name = name; } diz () {console.log ("diga oi"); devolver isso; }}; classe SMAN estende a pessoa {construtor (nome, Power) {super (nome); this.superPower = Power; } show () {console.log (this.superPower); devolver isso; }} console.log (new sMan ("Clark", "Pee"). Show (). Say (). Nome); // Saída: Pee diz oi Clark

Se você deseja usar a herança, super () deve ser executado na subclasse para chamar a classe pai. Caso contrário, o compilador apresentará um erro. Super na subclasse tem três funções. O primeiro é chamá -lo diretamente como construtor, o segundo é atuar como uma instância da classe pai e a terceira é chamar o método estático da classe pai no método estático na subclasse;

A principal diferença entre a herança ES6 e a herança ES5. A herança comumente usada no ES5 é definir o protótipo da subclasse como uma instância da classe pai. A subclasse naturalmente possui todos os métodos e propriedades da classe pai:

Execute o seguinte código

 var sup = function () {this.sub = true;}; sup.prototype.protoSup = {sup: "sup"}; var sub = function () {this.sub = true;}; sub.prototype = new sup (); // herdar o protótipo; Sub.prototype.constructor = sub; // Fix Constructor;

A herança implementada no ES6 é mais requintada e não será perturbada pela classe pai. Essa herança é uma combinação de implementação de herança de herança e protótipo:

Execute o seguinte código

 var sup = function () {this.sub = true;}; var sub = function () {this.sup = true; Sup.Apply (isto); // herdar as propriedades e métodos disso;}; sub .__ proto__ = sup; // herdar as propriedades estáticas do SUP; Sub.prototype = object.create (sup.prototype, {construtor: {value: sub, enumerável: false, gravidade: true, configurável: true}}); // herdar os atributos do protótipo e substituir o construtor;

É mais fácil ver a diferença entre os dois com as fotos, e a imagem mostra a diferença entre a herança entre ES5 e ES6: http://keenwon.com/1524.html;

ES5 simula a herança de ES6:

Por causa do transcodificador Babel, podemos usar o código ES5 para explorar como a herança ES6 é implementada e a herança ES6:

Execute o seguinte código

 "Use Strict"; Class Pessoa {construtor (nome) {this.name = name; } diz () {console.log ("diga oi"); devolver isso; }}; classe SMAN estende a pessoa {construtor (nome, Power) {super (nome); this.superPower = Power; } show () {console.log (this.superPower); devolver isso; }} console.log (new sMan ("Clark", "Pee"). Show (). Say (). Nome);

Depois de usar Babel para convertê -lo em ES5, o código se tornou assim. Eu adicionei um pequeno comentário, me perdoe por ser liberdade indisciplinada e amorosa ...:

Execute o seguinte código

 var _createclass = function () {função defineProperties (Target, props) {for (var i = 0; i <props.length; i ++) {var descritor = props [i]; descritor.enumerable = descritor.enumerable || falso; descritor.configurable = true; if ("value" no descritor) descritor.writable = true; Object.DefineProperty (Target, descritor.key, descritor); }} Função de retorno (construtor, protoprops, staticprops) {// copie o protótipo if (protoprops) defineproperties (construtor.prototype, protoprops); // copie a propriedade se (staticprops) defineproperties (construtor, staticprops); construtor de retorno; }; } (); function _classCallCheck (Instância, construtor) {if (! (Instância da instância do construtor)) {lança o novo TypeError ("não pode chamar uma classe como uma função"); }} função _PossIbleConstructReReturn (self, ligue) {if (! self) {throw New ReferenceError ("Isso não foi inicializado - super () não foi chamado"); } Return Call && (Typeof Call === "Object" || Typeof Call === "Função")? Chamada: auto; } // O seguinte é o código expresso no ES6 herda. _HERITS implementa a herança do protótipo e a herança dos atributos do estado da classe pai: função _inerits (subclasse, superclass) {if (typeof superclass! == "function" && superclass! == null) {throw typeError ("super expressão deve ser Nul ou uma função, não" } // herdar o protótipo da classe pai e corrigir o construtor como uma subclasse; subclass.prototype = object.create (superclass && superclass.prototype, {construtor: {value: subclasse, enumerável: false, gravável: true, configurável: true}}); // define __proto__ para o objeto Subclasse, para que a herança de atributo estático possa ser alcançada; if (superclass) object.SetProTypeOf? Object.SetProTypeOf (subclasse, superclasse): subclass .__ proto__ = superclass; // o último se o desenvolvedor: nova subclasse, o estado real é: objeto {__proto __: classe pai, construtor: subclass}}; /* var sup = function () {}; var sub = function () {}; _inheiros (sub, sup); // O significado dessa implementação de herança; Como uma subclasse do objeto herda a classe pai, como construtor, a subclasse herda sub.Prototype .__ proto__ === sup.prototype // true sub.prototype.constructor === Sub; // true sub .__ proto__ === sup; // true */var; this.name = nome; } _createclass (pessoa, [{key: "Say", Value: function diz () {console.log ("Siga oi"); retorne tis;}}]); pessoa de volta; } (); ; var sMan = function (_person) {_inerits (sMAN, _person); function sman (nome, poder) {// Neste momento, este .__ Proto__ apontou para o protótipo do construtor _classCallCheck (this, sMAN); // Esta frase é equivalente a super () no ES6, passando os atributos da classe pai através da chamada e executando a herança; var _This = _PossiBleConstructRorTurn (this, object.getProTypeOf (sMan) .Call (this, nome)); _This.superPower = Power; // retorno dinâmico _Este; retornar _Este; } _createclass (sMan, [{key: "show", value: function show () {console.log (this.superPower); retorna tis;}}]); Retornar SMAN; }(Pessoa); console.log (new sMan ("Clark", "Pee"). Show (). Say (). Nome);

Herança múltipla:

Use a mix-in para obter herança múltipla, e o método de escrita é: Sub Classe estende o mix (obj0, obj1, obj2). Mix é apenas um método, precisamos definir esse método:

Execute o seguinte código

 <html> <head> <meta charset = "utf-8"> </ad head> <body> <cript> "use rigicato"; função mix (... mixins) {classe mix {} para (deixe mixin of mixins) {copyProperties (mix, mixin); copyProperties (mix.prototype, mixin.prototype); } retornar mix; } função copyProperties (Target, origem) {for (deixe a chave de refletir.ownskys (fonte)) {if (key! == "construtor" && key! == "prototype" && key! == "name") {let desc = object.getownPropertyDescriptor (fonte, key); Object.DefineProperty (Target, Key, Desc); }}} classe man {work () {console.log ("Working"); }} classe mulher {Say () {console.log ("dizendo"); }} classe Superman estende mix (homem, mulher) {construtor () {super (); }} var sm = new Superman (); sm.work (); sm.Say (); // De fato, eles não têm um relacionamento de herança, apenas copiam os atributos para a subclasse; console.log (sm instância do homem); console.log (sm instanceof woman); </script> </body> </html>

O exposto acima é o conhecimento relevante sobre os novos recursos do JavaScript ES6 que o editor apresentou a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!