Compreenda facilmente o princípio da herança de JavaScript

O que é herança?

A palavra herança tem muitos contextos na vida. Pode ser propriedade herdada, direitos herdados ou sangue herdado. Pense nisso com atenção, eles têm uma característica comum de que todas as coisas herdadas pelos herdeiros vêm de serem herdadas. Na verdade, a herança de JavaScript também é assim.Muitas ideias em programação podem ser entendidas por meio de exemplos na vida.

Herança de JavaScript

Então, como a herança é implementada em JavaScript?

Herança de classe

Primeiro apresente o primeiro tipo chamado herança de classe

// 类式继承

function Father() {
    
    
    this.FatherValue = true
}
//  为 Father添加一个共有方法：
Father.prototype.getFatherValue = function() {
    
    
    return this.FatherValue
}

function Son() {
    
    
    this.sonValue = false
}

//  sun 继承 father 
Son.prototype = new Father()

Son.prototype.getSonValue = function() {
    
    
    return this.sonValue
}

Código do núcleo: Son.prototype = new Father ()

Quando instanciamos uma classe pai. O objeto recém-criado copia as propriedades e métodos no construtor do pai e aponta o protótipo _ _ proto _ _ para o objeto de protótipo do pai, para que ele tenha as propriedades e métodos no objeto de protótipo do pai, e este objeto recém-criado Você pode diretamente acessar as propriedades e métodos no objeto de protótipo pai.

Eu entendo o protótipo e a cadeia de protótipos dessa forma,

então Son pode acessar FatherValue quando o encontrar camada por camada.

Mas esse tipo de herança tem uma desvantagem :

1. Se a propriedade comum na classe pai for um tipo de referência, ela será compartilhada por todas as instâncias na subclasse, de modo que a propriedade comum herdada do construtor da classe pai afetará diretamente outras subclasses se a instância da subclasse alterar o protótipo da subclasse.
2. Não pode passar parâmetros para a classe pai e não pode inicializar as propriedades no construtor da classe pai quando a classe pai é instanciada

Herança de construtor

A fim de resolver os problemas acima, há herança do construtor

function Father(id){
    
    
    this.skill = ['read','run','speak']
    this.id = id
}
Father.prototype.showSkills = function(){
    
    
    console.log(this.skill)
}

function Son(id){
    
    
    // 继承 父类
    Father.call(this,id)
}

Código principal: a chamada Father.call (this, id)
altera o ambiente da função e executa as variáveis ​​na subclasse na classe pai novamente

Desvantagens:
As instâncias criadas por esta forma de herança terão uma cópia separada e não podem ser compartilhadas

Não é elegante ser capaz de reutilizar código

Herança combinatória

Para otimizar a herança novamente, combinamos os dois métodos

function Father(id){
    
    
    this.skill = ['read','run','speak']
    this.id = id
}
Father.prototype.showSkills = function(){
    
    
    console.log(this.skill)
}

function Son(id , hobby){
    
    
    // 继承 父类id属性
    Father.call(this,id)
    this.hobby = hobby
}
// 子类原型继承父类
Son.prototype = new Father()

Son.prototype.getHobby = function(){
    
    
    console.log(this.hobby)
}

Embora o problema acima tenha sido basicamente resolvido, o construtor da classe pai é executado uma vez ao usar a herança do construtor, e o construtor da classe pai é chamado novamente ao implementar a herança do protótipo da subclasse. Duas chamadas são feitas. Vezes, não elegante o suficiente

Herança prototípica

function inheritObj(o) {
    
    
    //声明一个过渡函数对象
    function F() {
    
    }
    // 过渡对象的原型继承父对象
    F.prototype = o
     // 返回过渡对象的一个实例，该实例的原型继承了父对象
    return new F()
}

Após a herança prototípica, há herança parasitária e herança parasitária combinada. Não vou repeti-las aqui. Você pode verificar as informações como uma extensão. A seguir, vamos apresentar o encapsulamento de funções herdadas.

Modo Santo Graal

          /*
            **  圣杯模式：
            **  定义 F()作为中间层，用于实现Target 的个性化定制，并且不会影响到Father 的原型
            **  uber( super 是保留字，故此处不使用) 找到自己的超类  
            */ 
        function inherit(Target ,Origin){
    
    
            function F(){
    
    };
            F.prototype =  Origin.prototype;
            Target.prototype = new F();                 
            Target.prototype.constuctor = Target;
            Target.prototype.uber = Origin.prototype;    

        }

Evolução do Modo Santo Graal

       /*
            **  此方法 来自于：YUI3 (  雅虎  )
            **  利用了函数闭包的性质
            **  var F = function () {} 成为了一个私有变量
            **  此方法更符合语义化  更加的高明
            */ 

            var inherit = (function(){
    
    

                var F = function(){
    
    };
                return function(Target,Origin){
    
    
                    F.prototype = Origin.prototype;
                    Target.prototype = new F();
                    Target.prototype.constuctor = Target;
                    Target.prototype.uber = Origin.prototype;
                }
            }());