Quelles sont les méthodes d'héritage en javascript

Les méthodes d'héritage en JavaScript incluent l'héritage de chaîne de prototypes, l'héritage de constructeur emprunté, l'héritage combiné, l'héritage de prototype, l'héritage parasite et l'héritage combiné parasite. Parmi eux, l’héritage combiné est la méthode d’héritage la plus couramment utilisée.

L'environnement d'exploitation de cet article : système windows10, javascript 1.8.5, ordinateur thinkpad t480.

Si nous voulons hériter en javascript, nous devons d'abord fournir une classe parent. Nous utilisons ici Person comme classe parent.

Tous les noms de constructeur ci-dessous n'ont aucune signification réelle, comme Coder, Rocker, etc., ils ne sont utilisés qu'à titre d'exemples

		 function Person(name){//给构造函数添加了参数
		            this.name=name;
		            this.sex="male";
		            this.say=function(){
		                console.log(this.name);
		            }
		        }
		Person.prototype.age=21;//给构造函数添加了原型属性

1 Héritage de la chaîne de prototypes

		function Programmer(){
            this.name="Jayee";
        }

        Programmer.prototype=new Person();//子类构造函数.prototype=父类实例

        var per1=new Programmer();
        console.log(per1);//Programmer {name: "Jayee"}
        console.log(per1.sex);//male
        console.log(per1.age);//21
        console.log(per1 instanceof Person);//true

Point clé : Créez le prototype de la nouvelle instance. égal à l’instance de la classe parent. Programmer.prototype=new Person();

Caractéristiques : Les attributs dont une instance peut hériter incluent : les attributs du constructeur de l'instance, les attributs du constructeur de la classe parent et les attributs du prototype de la classe parent. (La nouvelle instance n'héritera pas des attributs de l'instance de classe parent !)

Inconvénients : 1. La nouvelle instance ne peut pas transmettre de paramètres au constructeur de classe parent.

　 2. Héritage unique.

　　3. Toutes les nouvelles instances partageront les attributs de l'instance de classe parent. (Les attributs du prototype sont partagés. Si une instance modifie les attributs du prototype (per1.__proto__.sex="female", alors per2.sex deviendra également une femme), et les attributs du prototype d'une autre instance changeront également. sera modifié ! )

Deuxièmement, empruntez l'héritage du constructeur

        //借用构造函数继承
        function Coder(){
            Person.call(this,"Jayee");//重点：借用了Person
            this.age=18;
        }
        var cod1=new Coder();
        console.log(cod1);
        //Coder {name: "Jayee", sex: "male", hobby: "", age: 18, say: ƒ}
        console.log(cod1.name);//Jayee
        console.log(cod1.age);//18
        console.log(cod1 instanceof Person);//false

Points clés : utilisez .call() et .apply() pour introduire le constructeur de la classe parent dans la fonction de la classe enfant (rendre la fonction de la classe parent automatique dans la classe enfant function Execution (copy))

Caractéristiques : 1. Hérite uniquement des attributs du constructeur de la classe parent et n'hérite pas des attributs du prototype de la classe parent. (Cela peut être vu sur

　　cod1.age est 18 au lieu de 21)

　　2. Résolvez les lacunes d'héritage de la chaîne du prototype 1, 2 et 3.

　 3. Vous pouvez hériter de plusieurs attributs de constructeur (appelez plusieurs).

　　4. Les paramètres peuvent être transmis à l'instance parent dans l'instance enfant.

Inconvénients : 1. Il ne peut hériter que des attributs du constructeur de la classe parent.

　　2. La réutilisation des constructeurs ne peut pas être réalisée. (Vous devez l'appeler à nouveau chaque fois que vous l'utilisez) 3. Chaque nouvelle instance possède une copie du constructeur de la classe parent, qui est gonflée.

3. Héritage combiné (héritage combiné de chaîne de prototype et héritage de constructeur emprunté) (couramment utilisé)

        //组合继承
        function Typer(name){
            Person.call(this,name);
        }
        Typer.prototype=new Person();
        var typ=new Typer("Jayee");
        console.log(typ);
        //Typer {name: "Jayee", sex: "male", hobby: "", say: ƒ}
        console.log(typ.name);//Jayee，继承了构造函数
        console.log(typ.age);//21，继承了父类的原型的属性

Points clés : combine les avantages des deux modes, passage de paramètres et réutilisation

Caractéristiques : 1. Peut hériter du prototype du Les attributs de la classe parent peuvent recevoir des paramètres et être réutilisés.

        //原型式继承
        function Rocker(obj) {
        //先封装一个函数容器，用来输出对象和承载继承的原型
            function F(){}
            F.prototype=obj;//继承了传入的函数
            return new F();//返回函数对象
        }
        var per=new Person();//拿到父类实例
        var roc =Rocker(per);//F {}
        console.log(per.__proto__);//{age: 21, constructor: ƒ}
        console.log(roc.age);//21，继承了父类函数的属性

Caractéristiques : Semblable à copier un objet et à l'envelopper avec une fonction.

        //寄生式继承
        function Rocker(obj){
            function F(){}
            F.prototype=obj;//继承了传入的函数
            return new F();//返回函数对象
        }
        var per4=new Person();
        //以上是原型式继承,给原型式继承再套个壳子传递参数
        function Artist(obj){
            var roc=Rocker(obj);
            roc.name="Jayee";
            return roc;
        }
        var art = Artist(per4)
        //这个函数经过声明之后就成了可增添属性的对象
        console.log(typeof Artist);//function
        console.log(typeof art);//object
        console.log(art.name);//Jayee，返回了个roc对象，继承了roc的属性

         //寄生式组合式继承

         //寄生
         function Rocker(obj){
            function F(){}
            F.prototype=obj;//继承了传入的函数
            return new F();//返回函数对象
        }
        //Rocker就是F实例的另一种表示法
        var roc=new Rocker(Person.prototype);
        //roc实例（F实例）的原型继承了父类函数的原型
        //上述更像是原型链继承，只不过继承了原型属性

        //组合
        function Sub(){
            Person.call(this);
            //这个继承了父类构造函数的属性
            //解决了组合式两次调用构造函数属性的缺点
        }
        //重点
        Sub.prototype=roc;//继承了roc实例
        roc.constructor=Sub;//一定要修复实例
        var sub1=new Sub();
        //Sub的实例就继承了构造函数属性，父类实例，roc的函数属性
        console.log(sub1.age);//21

//todo

javascript Tutoriel vidéo

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!