Was sind die Merkmale der JavaScript-Vererbung? Beispiele für js-Vererbung

Der Inhalt dieses Artikels befasst sich mit den Merkmalen der JavaScript-Vererbung. Die Erläuterung der js-Vererbungsbeispiele hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

Ich habe kürzlich den objektorientierten Ansatz von JS kennengelernt. In diesem Artikel werden hauptsächlich die Dinge besprochen, die im objektorientierten Ansatz von JS enthalten sind.

Merkmale der Vererbung in JS:

1. Unterklassen erben Elternklassen;

2 . Änderungen an Unterklassen wirken sich nicht auf die übergeordnete Klasse aus.

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

Dieser Code erstellt eine übergeordnete Klasse und ihren Prototyp sowie eine Unterklasse und erbt diese private Attribute der Elternklasse

<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>

Wenn die Unterklasse Son den Prototyp der Elternklasse erben möchte, ist mein Ansatz, dies am Anfang zu tun

<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>

Die Ergebnisse der Ausführung zeigen, dass sich die Änderung im Prototyp der Unterklasse auf den Prototyp der übergeordneten Klasse auswirkt. und der Prototyp der übergeordneten Klasse. Der Prototyp enthält keine showAge-Methode, was das dritte Merkmal der Vererbung verletzt.

Analysegrund: Zeile 20 des obigen Codes Son.prototype=Father.prototype; das '=' hier ist ein Objekt auf beiden Seiten, dann bedeutet es

Referenz

, wenn es ein ist Referenz Wenn ja, wirken sich Änderungen am Objekt auf der linken Seite 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 besteht nicht darin, dass „=“ die Referenzbeziehung ist, die das verursacht Problem Nun, dann ist garantiert, dass „=“ immer eine Zuweisungsbeziehung und keine Referenz ist. 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>

Das Ergebnis zu diesem Zeitpunkt ist, dass die showAge-Methode des übergeordneten Klassenobjekts undefiniert ist

Methode 2 : Der Code ist sehr einfach, aber es ist schwer vorstellbar, dass er nicht so leicht zu verstehen ist 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>

Verwandte Empfehlungen:

Detaillierte Beispiele für Vererbungsmethoden in JS

Was sind die js-Vererbungsmethoden? Einführung in zwei Methoden der JS-Vererbung (mit Code)

Das obige ist der detaillierte Inhalt vonWas sind die Merkmale der JavaScript-Vererbung? Beispiele für js-Vererbung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!