O que é herança em javascript

Em JavaScript, a herança é um mecanismo que permite a criação de novas classes com base na herança de classes existentes, proporcionando flexibilidade para subclasses e podendo reutilizar métodos e variáveis ​​​​de classes pai. cadeias e construtores.

O ambiente operacional deste tutorial: sistema Windows 10, JavaScript versão 1.8.5, computador Dell G3.

O que é herança em javascript

A herança JavaScript é um mecanismo que nos permite criar novas classes com base em classes existentes e fornece flexibilidade para as subclasses reutilizarem métodos e variáveis ​​​​das classes pai; O processo de herança é o processo do geral para o especial.

Ele mantém um relacionamento IS-A.

A palavra-chave extends é usada em expressões de classe ou declarações de classe.

Usando a palavra-chave extends, podemos obter todas as propriedades e comportamentos de objetos integrados, bem como classes personalizadas.

Também podemos implementar herança usando uma abordagem baseada em protótipos.

Como o JavaScript implementa herança?

1. Cadeia de protótipo

Idéia básica: Use protótipos para permitir que um tipo de referência herde as propriedades e métodos de outro tipo de referência.

O relacionamento entre construtores, protótipos e instâncias: cada construtor possui um objeto protótipo, o objeto protótipo contém um ponteiro para o construtor e a instância contém um ponteiro interno para o objeto protótipo.

Exemplo de herança de implementação de cadeia de protótipo:

function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//SuperTypeSubType.prototype herdado = new SuperType ( );SubType.prototype.getSubValue = function (){return this.property;}var instance = new SubType();console.log(instance.getSuperValue());//true

2. Emprestar construtor

Ideia básica: Chame o construtor da superclasse dentro do construtor do subtipo, e o construtor pode ser executado no objeto recém-criado usando os métodos call() e apply().

exemplo:

function SuperType() {this.colors = ["red","blue","green"];}function SubType() {SuperType.call(this);//Herda SuperType}var instance1 = new SubType(); .colors.push("preto");console.log(instance1.colors);//"vermelho","azul","verde","preto"var instance2 = new SubType();console.log(instance2 . cores); //"vermelho","azul","verde"

3. Herança combinada

Ideia básica: Um padrão de herança que combina a tecnologia de encadeamento de protótipos e empréstimo de construtores para aproveitar o melhor dos dois mundos.

exemplo:

function SuperType(nome) {this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function() {console.log(this.name); }function SubType(name, age) {SuperType.call(this,name);//Atributo herdado this.age = age;}//Método herdado SubType.prototype = new SuperType();Subtype.prototype.constructor = Subtype; Subtype.prototype.sayAge = function() {console.log(this.age);}var instance1 = new SubType("EvanChen",18);instance1.colors.push("black");consol.log(instance1. cores);//"vermelho","azul","verde","preto"instance1.sayName();//"EvanChen"instance1.sayAge();//18var instance2 = new SubType("EvanChen666",20 );console.log(instance2.colors);//"vermelho","azul","verde"instance2.sayName();//"EvanChen666"instance2.sayAge();//20

4. Herança prototípica

A ideia básica: os protótipos permitem criar novos objetos com base nos existentes sem a necessidade de criar tipos personalizados.

A ideia de herança prototípica pode ser ilustrada pela seguinte função:

objeto de função (o) {função F(){}F.prototype = o;return new F();}

exemplo:

var pessoa = {nome:"EvanChen",amigos:["Shelby","Court","Van"];};var outraPerson = objeto(pessoa);anotherPerson.name = "Greg";anotherPerson.friends.push( "Rob");var yetAnotherPerson = object(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby","Tribunal" ,"Van","Rob","Barbie"

ECMAScript 5 padroniza a herança prototípica por meio do novo método Object.create(), que aceita dois parâmetros: um objeto usado como protótipo do novo objeto e um objeto usado como o novo objeto para definir propriedades adicionais.

var person = {name:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = Object.create(person);anotherPerson.name = "Greg";anotherPerson.friends. push("Rob");var yetAnotherPerson = Object.create(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby" ,"Tribunal","Van","Rob","Barbie"

5. Herança parasitária

A ideia básica: criar uma função que simplesmente encapsule o processo de herança, aprimore o objeto de alguma forma internamente e retorne o objeto como se ele realmente tivesse feito todo o trabalho.

exemplo:

function createAnother(original) {var clone = object(original);clone.sayHi = function () {alert("hi");};return clone;}var person = {name:"EvanChen",friends:["Shelby ","Tribunal","Van"];};var anotherPerson = createAnother(person);anotherPerson.sayHi();///"hi"

6. Herança combinatória parasitária

Idéia básica: herdar propriedades emprestando funções e herdar métodos por meio da forma híbrida da cadeia de protótipos

Seu modelo básico é o seguinte:

function inheritProperty(subType, superType) {var protótipo = objeto(superType.prototype);//Criar objeto protótipo.construtor = subTipo;//Aprimorar objeto subType.prototype = protótipo;//Especificar objeto}

exemplo:

function SuperType(nome){this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function (){alert(this.name);}; function SubType(nome,idade){SuperType.call(this,name);this.age = idade;}inheritProperty(SubType,SuperType);SubType.prototype.sayAge = function() {alert(this.age);}