Explication détaillée des méthodes d'héritage dans JS

Cet article présente principalement l'explication détaillée des méthodes d'héritage en JavaScript.Cet article explique le concept d'héritage js, d'héritage prototypique et d'héritage de classe, d'héritage de chaîne de prototypes, d'héritage de classe, d'héritage combiné, d'héritage prototypique, etc. se référer au concept d'

héritage js

Les deux méthodes d'héritage suivantes sont couramment utilisées en js :

Héritage de chaîne de prototypes (héritage entre objets)
Héritage de classe ( Héritage entre constructeurs )
Puisque js n'est pas un vrai langage orienté objet comme java, js est basé sur des objets, il n'y a pas de concept de cours. Par conséquent, si vous souhaitez implémenter l'héritage, vous pouvez utiliser le mécanisme prototype de js ou les méthodes apply et call pour y parvenir

Dans les langages orientés objet, nous utilisons des classes pour créer un objet personnalisé. Cependant, tout en js est un objet, alors comment créer un objet personnalisé ? Cela nécessite l'utilisation du prototype js :

Nous pouvons simplement considérer le prototype comme un modèle, et les objets personnalisés nouvellement créés sont tous des copies de ce modèle (prototype) (en fait pas une copie mais une copie) Lien, mais ce lien est invisible. Il y a un pointeur Proto invisible à l'intérieur de l'objet nouvellement instancié, pointant vers l'objet prototype).

JS peut simuler les fonctions des classes via des constructeurs et des prototypes. De plus, l'implémentation de l'héritage de classe js repose également sur la chaîne de prototypes.

Héritage prototypique et héritage de classe

L'héritage de classe consiste à appeler le constructeur de supertype à l'intérieur du constructeur de sous-type.
L'héritage de classe strict n'est pas très courant et est généralement utilisé en combinaison :

Le code est le suivant :

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

L'héritage prototypique est basé sur existant Créez un nouvel objet à partir de l'objet et pointez le prototype de la sous-classe vers la classe parent, ce qui équivaut à rejoindre la chaîne de prototypes de la classe parent

Héritage de la chaîne de prototypes

Pour permettre si une sous-classe hérite des attributs (y compris les méthodes) de la classe parent, elle doit d'abord définir un constructeur. Ensuite, affectez la nouvelle instance de la classe parent au prototype du constructeur. Le code est le suivant :

Le code est le suivant :

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

Il manque un lien dans l'héritage de la chaîne du prototype ci-dessus, c'est-à-dire l'objet, et tous les constructeurs héritent de l'objet . L'héritage d'un objet se fait automatiquement et ne nécessite pas que nous en héritions manuellement. Alors quelle est leur affiliation ?

Détermination de la relation entre les prototypes et les instances

La relation entre les prototypes et les instances peut être déterminée de deux manières. Méthodes opérateur instanceof et isPrototypeof() :

Le code est le suivant :

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

Tant qu'il s'agit d'un prototype apparu dans la chaîne de prototypes, il peut être dit être une instance dérivée de la chaîne de prototypes Le prototype de classe, classe dérivée). Il y a deux problèmes principaux avec l'utilisation de l'héritage prototypique :

Premièrement, la réécriture littérale du prototype rompra la relation, en utilisant le prototype du type référence, et le sous-type ne peut pas transmettre de paramètres au supertype.

Les pseudo-classes résolvent le problème du partage de références et de l'impossibilité de transmettre des paramètres de super types. Nous pouvons utiliser la technologie du "constructeur emprunté"

Constructeur emprunté (héritage de classe)<🎜. >

Le code est le suivant :

Bien que le constructeur emprunté résolve les deux problèmes tout à l'heure, sans prototype, la réutilisation est impossible, nous avons donc besoin d'une chaîne de prototypes + Modèle de fonction constructeur emprunté, ce modèle est appelé héritage combiné

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

Héritage combiné

Le code est le suivant :

L'héritage combiné est une méthode d'héritage plus couramment utilisée, l'idée derrière elle est d'utiliser la chaîne de prototypes pour obtenir l'héritage des

propriétés et méthodes

du prototype, et pour obtenir l'héritage des attributs d'instance en empruntant des constructeurs. De cette manière, la réutilisation des fonctions est réalisée en définissant des méthodes sur le prototype, et chaque instance est garantie d'avoir ses propres attributs.

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

Utilisation de call() : Appelez une méthode d'un objet et remplacez l'objet actuel par un autre objet.

Le code est le suivant :

Héritage prototypique

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

Cet héritage utilise des prototypes et se base sur des éléments existants objets La façon de créer un nouvel objet sans créer de type personnalisé est appelée héritage prototypique
Le code est le suivant :

L'héritage prototypique crée d'abord un temporaire à l'intérieur de la fonction obj() Le constructeur utilise ensuite l'objet transmis comme prototype de ce constructeur et renvoie finalement une nouvelle instance de ce type temporaire.

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

Héritage parasite

Cette méthode d'héritage combine prototype +Modèle d'usine afin d'encapsuler le processus de création.

Le code est le suivant :

Petit problème d'héritage combiné

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!