Die kleinen Dinge (Instanzen) werden in JS objektorientiert geerbt

In diesem Kapitel werden Ihnen die kleinen Dinge (Instanzen) der Vererbung im objektorientierten JS vorgestellt, damit Sie verstehen können, was die Merkmale der Vererbung in JS sind. Einige wenige Kenntnisse über die objektorientierte Vererbung. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Merkmale der Vererbung in JS:

1. Unterklassen erben Elternklassen;

2 Attribute der übergeordneten Klasse

3. Änderungen an der Unterklasse können sich nicht auf die übergeordnete Klasse auswirken

Im Folgenden wird ein Beispiel zur Veranschaulichung der JS-Vererbung verwendet

Dieser Code erstellt eine übergeordnete Klasse Klasse und ihren Prototyp und erstellte auch eine Unterklasse und erbte die privaten Eigenschaften der übergeordneten Klasse

<script>
        //这是父类
        function Father(name,age,marry){
            this.name=name;
            this.age=age;
            this.marry=marry;
        }
        //父类的原型
        Father.prototype.showName=function(){
            alert(this.name);
        }

        //子类
        function Son(name,age,marry,weight){
            Father.call(this,name,age,marry);
            this.weight=weight;
        }
        
 </script>

Als die Unterklasse Son den Prototyp der übergeordneten Klasse erben wollte, habe ich zunächst Folgendes getan Als Ergebnis der Ausführung von

<script>
        //这是父类
        function Father(name,age,marry){
            this.name=name;
            this.age=age;
            this.marry=marry;
        }
        //父类的原型
        Father.prototype.showName=function(){
            alert(this.name);
        }

        //子类
        function Son(name,age,marry,weight){
            Father.call(this,name,age,marry);
            this.weight=weight;
        }
        
        //错误的做法
        Son.prototype=Father.prototype;
        Son.prototype.showAge=function(){
            alert(this.age);
        }
        var father=new Father(&#39;王大锤&#39;,30,true);
        alert(father.showAge);
        
</script>

kann festgestellt werden, dass sich die Änderung im Prototyp der Unterklasse auf den Prototyp der übergeordneten Klasse auswirkt. Im Prototyp der übergeordneten Klasse gibt es keine showAge-Methode Klasse, die gegen dies verstößt. Dies ist die dritte Funktion, die von der vorherigen geerbt wurde.

Analysegrund: Zeile 20 des obigen Codes Son.prototype=Father.prototype; Das „=“ hier ist ein Objekt auf beiden Seiten, es bedeutet also eine Referenz Die Änderungen auf der linken Seite wirken sich definitiv auf das Objekt auf der rechten Seite aus. Aus diesem Grund wirken sich Änderungen am Prototyp der Unterklasse auf den Prototyp der übergeordneten Klasse aus.

Lösung

Methode 1: Kernidee, das vorherige Problem ist nicht, dass '=' die Referenzbeziehung ist, die das Problem verursacht, dann garantieren wir hier '= ' ist immer eine Zuordnungsbeziehung, keine Referenz. Hier definieren wir eine Clone()-Methode, um das übergeordnete Klassenobjekt in die untergeordnete Klasse zu kopieren.

Der Grund, warum Rekursion in der Clone()-Methode verwendet wird, besteht darin, dass Objekte während des Kopiervorgangs in Objekten verschachtelt werden können.

<script>
        //这是父类
        function Father(name,age,marry){
            this.name=name;
            this.age=age;
            this.marry=marry;
        }
        //父类的原型
        Father.prototype.showName=function(){
            alert(this.name);
        }

        //子类
        function Son(name,age,marry,weight){
            Father.call(this,name,age,marry);
            this.weight=weight;
        }
        Son.prototype=new Clone(Father.prototype);
        Son.prototype.showAge=function(){
            alert(this.age);
        }
        var father=new Father(&#39;王大锤&#39;,30,true);
        alert(father.showAge);

        //通过克隆对象:核心思路是保证 &#39;=&#39; 是赋值的关系，而不是引用，也就是保证 &#39;=&#39; 的右边不是对象
        function Clone(obj){
            for(var i=0;i<obj.length;i++){
                if(typeof(obj[key]==&#39;object&#39;)){
                    this.key=new Clone(obj[key]);
                }else{
                    this.key=obj[key];
                }
            }
        }  
</script>

Methode 2: Der Code ist sehr einfach, aber schwer zu verstehen. Er ist nicht so leicht zu verstehen wie die erste Methode. Kernidee: Änderungen an den Eigenschaften des Objekts selbst haben keine Auswirkungen auf Änderungen an den Eigenschaften seines Konstruktors.

<script>
        //这是父类
        function Father(name,age,marry){
            this.name=name;
            this.age=age;
            this.marry=marry;
        }
        //父类的原型
        Father.prototype.showName=function(){
            alert(this.name);
        }

        //子类
        function Son(name,age,marry,weight){
            Father.call(this,name,age,marry);
            this.weight=weight;
        }
        function fn(){}
        fn.prototype=Father.prototype;
        Son.prototype=new fn();      
        Son.prototype.showAge=function(){
            alert(this.age);
        }
        var father=new Father(&#39;王大锤&#39;,30,true);
        alert(father.showAge);

        //通过克隆对象:核心思路是保证 &#39;=&#39; 是赋值的关系，而不是引用，也就是保证 &#39;=&#39; 的右边不是对象
        // Son.prototype=new Clone(Father.prototype);
        // function Clone(obj){
        //     for(var i=0;i<obj.length;i++){
        //         if(typeof(obj[key]==&#39;object&#39;)){
        //             this.key=new Clone(obj[key]);
        //         }else{
        //             this.key=obj[key];
        //         }
        //     }
        // }  
</script>

Das obige ist der detaillierte Inhalt vonDie kleinen Dinge (Instanzen) werden in JS objektorientiert geerbt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!