Detaillierte Erläuterung der Vererbungsmethoden in JS

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der Vererbungsmethoden in JavaScript vor. In diesem Artikel werden die Konzepte der js-Vererbung, der Prototypenvererbung und der Klassenvererbung, der Prototypenkettenvererbung, der Klassenvererbung, der Kombinationsvererbung, der Prototypenvererbung usw. erläutert Siehe das Konzept der

js-Vererbung

Die folgenden zwei Vererbungsmethoden werden häufig in js verwendet:

Prototypkettenvererbung (Vererbung zwischen Objekten)
Klassenvererbung ( Vererbung zwischen Konstruktoren )
Da js keine echte objektorientierte Sprache wie Java ist, basiert js auf Objekten, es gibt kein Konzept dafür Klassen. Wenn Sie also die Vererbung implementieren möchten, können Sie den Prototypmechanismus von js oder die Apply- und Call-Methoden verwenden, um

In objektorientierten Sprachen verwenden wir Klassen, um ein benutzerdefiniertes Objekt zu erstellen. Allerdings ist alles in js ein Objekt. Wie erstellt man also ein benutzerdefiniertes Objekt? Dies erfordert die Verwendung von js Prototyp:

Wir können uns den Prototyp einfach als Vorlage vorstellen, und die neu erstellten benutzerdefinierten Objekte sind alle Kopien dieser Vorlage (Prototyp) (eigentlich keine Kopie, sondern eine Kopie). Link, aber dieser Link ist unsichtbar. Es gibt einen unsichtbaren Proto-Zeiger im neu instanziierten Objekt, der auf das Prototyp-Objekt zeigt.

JS kann die Funktionen von Klassen durch Konstruktoren und Prototypen simulieren. Darüber hinaus basiert die Implementierung der JS-Klassenvererbung auch auf der Prototypenkette.

Prototypische Vererbung und Klassenvererbung

Die Klassenvererbung besteht darin, den Supertyp-Konstruktor innerhalb des Subtyp-Konstruktors aufzurufen.
Strikte Klassenvererbung ist nicht sehr verbreitet und wird normalerweise in Kombination verwendet:

Der Code lautet wie folgt:

function Super(){
    this.colors=["red","blue"];
}
function Sub(){
    Super.call(this);
}

Prototypische Vererbung basiert auf Vorhanden Erstellen Sie ein neues Objekt aus dem Objekt und verweisen Sie den Prototyp der Unterklasse auf die übergeordnete Klasse. Dies entspricht dem Beitritt zur Prototypkette der übergeordneten Klasse

Vererbung der Prototypkette

Damit eine Unterklasse die Attribute (einschließlich Methoden) der übergeordneten Klasse erbt, muss sie zunächst einen Konstruktor definieren. Weisen Sie dann die neue Instanz der übergeordneten Klasse dem Prototyp des Konstruktors zu. Der Code lautet wie folgt:

Der Code lautet wie folgt:

<script>
    function Parent(){
        this.name = &#39;mike&#39;;
    }
    function Child(){
        this.age = 12;
    }
    Child.prototype = new Parent();//Child继承Parent，通过原型，形成链条
    var test = new Child();
    alert(test.age);
    alert(test.name);//得到被继承的属性
    //继续原型链继承
    function Brother(){   //brother构造
        this.weight = 60;
    }
    Brother.prototype = new Child();//继续原型链继承
    var brother = new Brother();
    alert(brother.name);//继承了Parent和Child,弹出mike
    alert(brother.age);//弹出12
</script>

Der obigen Prototypkettenvererbung fehlt ein Link, nämlich Objekt, und alle Konstruktoren erben von Objekt . Die Vererbung von Objekten erfolgt automatisch und erfordert keine manuelle Vererbung. Was ist also ihre Zugehörigkeit?

Bestimmung der Beziehung zwischen Prototypen und Instanzen

Die Beziehung zwischen Prototypen und Instanzen kann auf zwei Arten bestimmt werden. Operator-Instanceof- und isPrototypeof()-Methoden:

Der Code lautet wie folgt:

alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超类
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true

Solange es sich um einen Prototyp handelt, der in der Prototypenkette aufgetaucht ist, kann dies der Fall sein soll eine von der Prototypenkette abgeleitete Instanz sein (Prototyp einer Klasse, abgeleitete Klasse). Es gibt zwei Hauptprobleme bei der Verwendung der Prototypenvererbung:

Erstens wird durch das wörtliche Umschreiben des Prototyps die Beziehung unterbrochen, wobei der Prototyp des Referenztyps verwendet wird und der Untertyp keine Parameter an den Obertyp übergeben kann.

Pseudoklassen lösen das Problem der Referenzfreigabe und der Unfähigkeit, Parameter von Supertypen zu übergeben. Wir können die „geliehene Konstruktor“-Technologie verwenden

Geliehener Konstruktor (Klassenvererbung)

Der Code lautet wie folgt:

Obwohl der geliehene Konstruktor gerade die beiden Probleme löst, ist eine Wiederverwendung ohne Prototyp nicht möglich, daher benötigen wir einen Prototyp Kette + geliehener Konstruktor Funktionsmuster, dieses Muster wird kombinierte Vererbung genannt

<script>
    function Parent(age){
        this.name = [&#39;mike&#39;,&#39;jack&#39;,&#39;smith&#39;];
        this.age = age;
    }
    function Child(age){
        Parent.call(this,age);
    }
    var test = new Child(21);
    alert(test.age);//21
    alert(test.name);//mike,jack,smith
    test.name.push(&#39;bill&#39;);
    alert(test.name);//mike,jack,smith,bill
</script>

Kombinierte Vererbung

Der Code lautet wie folgt:

Kombinierte Vererbung ist eine häufiger verwendete Vererbungsmethode. Die Idee dahinter besteht darin, die Prototypenkette zu verwenden, um die Vererbung von Prototyp-

-Eigenschaften und -Methoden

<script>
    function Parent(age){
        this.name = [&#39;mike&#39;,&#39;jack&#39;,&#39;smith&#39;];
        this.age = age;
    }
    Parent.prototype.run = function () {
        return this.name  + &#39; are both&#39; + this.age;
    };
    function Child(age){
        Parent.call(this,age);//对象冒充，给超类型传参
    }
    Child.prototype = new Parent();//原型链继承
    var test = new Child(21);//写new Parent(21)也行
    alert(test.run());//mike,jack,smith are both21
</script>

zu erreichen und die Vererbung von Instanzattributen durch Ausleihen von Konstruktoren zu erreichen. Auf diese Weise wird die Wiederverwendung von Funktionen durch die Definition von Methoden im Prototyp erreicht, und jede Instanz verfügt garantiert über ihre eigenen Attribute.

Verwendung von call(): Rufen Sie eine Methode eines Objekts auf und ersetzen Sie das aktuelle Objekt durch ein anderes Objekt.

Der Code lautet wie folgt:

Prototypische Vererbung

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

Diese Vererbung verwendet Prototypen und basiert auf vorhandenen Objekte Die Möglichkeit, ein neues Objekt zu erstellen, ohne einen benutzerdefinierten Typ zu erstellen, wird als prototypische Vererbung bezeichnet.

Der Code lautet wie folgt:

Die prototypische Vererbung erstellt zunächst ein temporäres Objekt innerhalb der obj()-Funktion Der Konstruktor verwendet dann das übergebene Objekt als Prototyp dieses Konstruktors und gibt schließlich eine neue Instanz dieses temporären Typs zurück.

<script>
     function obj(o){
         function F(){}
         F.prototype = o;
         return new F();
     }
    var box = {
        name : &#39;trigkit4&#39;,
        arr : [&#39;brother&#39;,&#39;sister&#39;,&#39;baba&#39;]
    };
    var b1 = obj(box);
    alert(b1.name);//trigkit4
    b1.name = &#39;mike&#39;;
    alert(b1.name);//mike
    alert(b1.arr);//brother,sister,baba
    b1.arr.push(&#39;parents&#39;);
    alert(b1.arr);//brother,sister,baba,parents
    var b2 = obj(box);
    alert(b2.name);//trigkit4
    alert(b2.arr);//brother,sister,baba,parents
</script>

Parasitäre Vererbung

Diese Vererbungsmethode kombiniert Prototyp +Factory-Muster

, um den Erstellungsprozess zu kapseln.

Der Code lautet wie folgt:

Kleines Problem mit kombinierter Vererbung

<script>
    function create(o){
        var f= obj(o);
        f.run = function () {
            return this.arr;//同样，会共享引用
        };
        return f;
    }
</script>

组合式继承是js最常用的继承模式，但组合继承的超类型在使用过程中会被调用两次；一次是创建子类型的时候，另一次是在子类型构造函数的内部

 代码如下:

<script>
    function Parent(name){
        this.name = name;
        this.arr = [&#39;哥哥&#39;,&#39;妹妹&#39;,&#39;父母&#39;];
    }
    Parent.prototype.run = function () {
        return this.name;
    };
    function Child(name,age){
        Parent.call(this,age);//第二次调用
        this.age = age;
    }
    Child.prototype = new Parent();//第一次调用
</script>

以上代码是之前的组合继承，那么寄生组合继承，解决了两次调用的问题。

寄生组合式继承

代码如下:

<script>
    function obj(o){
        function F(){}
        F.prototype = o;
        return new F();
    }
    function create(parent,test){
        var f = obj(parent.prototype);//创建对象
        f.constructor = test;//增强对象
    }
    function Parent(name){
        this.name = name;
        this.arr = [&#39;brother&#39;,&#39;sister&#39;,&#39;parents&#39;];
    }
    Parent.prototype.run = function () {
        return this.name;
    };
    function Child(name,age){
        Parent.call(this,name);
        this.age =age;
    }
    inheritPrototype(Parent,Child);//通过这里实现继承
    var test = new Child(&#39;trigkit4&#39;,21);
    test.arr.push(&#39;nephew&#39;);
    alert(test.arr);//
    alert(test.run());//只共享了方法
    var test2 = new Child(&#39;jack&#39;,22);
    alert(test2.arr);//引用问题解决
</script>

call和apply

全局函数apply和call可以用来改变函数中this的指向，如下：

代码如下:

// 定义一个全局函数
    function foo() {
        console.log(this.fruit);
    }
    // 定义一个全局变量
    var fruit = "apple";
    // 自定义一个对象
    var pack = {
        fruit: "orange"
    };
    // 等价于window.foo();
    foo.apply(window);  // "apple",此时this等于window
    // 此时foo中的this === pack
    foo.apply(pack);    // "orange"

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vererbungsmethoden in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!