Maison > Article > interface Web > Quatre modes d'héritage en JavaScript (exemples de code)
Ce que cet article vous apporte concerne les quatre méthodes d'héritage JavaScript (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
1. Héritage de la chaîne de prototypes
Noyau : utiliser l'instance de la classe parent comme prototype de la classe enfant
Inconvénients : Nouvelle méthode de prototype pour la classe parent/Les attributs du prototype sont accessibles par les sous-classes. Lorsque la classe parent change, tout le reste change
function Person (name) { this.name = name; }; Person.prototype.getName = function () { //对原型进行扩展 return this.name; }; function Parent (age) { this.age = age; }; Parent.prototype = new Person('老明'); //这一句是关键 //通过构造器函数创建出一个新对象,把老对象的东西都拿过来。 Parent.prototype.getAge = function () { return this.age; }; // Parent.prototype.getName = function () { //可以重写从父类继承来的方法,会优先调用自己的。 // console.log(222); // }; var result = new Parent(22); console.log(result.getName()); //老明 //调用了从Person原型中继承来的方法(继承到了当前对象的原型中) console.log(result.getAge()); //22 //调用了从Parent原型中扩展来的方法
2. Héritage structurel
Idée de base <.> Emprunt L'idée de base du constructeur est d'utiliser
ou call
pour copier (emprunter) les attributs et méthodes spécifiés par apply
dans la classe parent vers l'instance créée par la sous-classe. this
Parce que l'objet
est lié au moment de l'exécution en fonction de l'environnement d'exécution de la fonction. Autrement dit, globalement, this
est égal à this
, et lorsqu'une fonction est appelée comme méthode d'un objet, window
est égal à cet objet. Les méthodes this
, call
peuvent changer le contexte d'objet d'une fonction du contexte initial au nouvel objet spécifié par thisObj. apply
est créé (lorsque new est créé, new
pointe vers l'instance créée), un nouvel objet instance est créé, this
et exécute et
à l'intérieur de Parent
appelle Parent
, ce qui signifie que le pointeur call
est modifié pour pointer vers la nouvelle instance, Person
, donc le this sera modifié 🎜>Les attributs et méthodes pertinents sont attribués à la nouvelle instance au lieu de les attribuer à
, Person
donc toutes les instances ont ces this
attributs et méthodes définis par la classe parent. Person
Étant donné que les propriétés sont liées à this
, elles sont affectées aux instances correspondantes lorsqu'elles sont appelées, et les valeurs de chaque instance ne s'affecteront pas.
Core : Utiliser le constructeur de la classe parent pour améliorer l'instance de la sous-classe équivaut à copier les attributs d'instance de la classe parent dans la sous-classe (aucun prototype n'est utilisé)this
3. Héritage combiné
function Person (name) { this.name = name; this.friends = ['小李','小红']; this.getName = function () { return this.name; } }; // Person.prototype.geSex = function () { //对原型进行扩展的方法就无法复用了 // console.log("男"); // }; function Parent = (age) { Person.call(this,'老明'); //这一句是核心关键 //这样就会在新parent对象上执行Person构造函数中定义的所有对象初始化代码, // 结果parent的每个实例都会具有自己的friends属性的副本 this.age = age; }; var result = new Parent(23); console.log(result.name); //老明 console.log(result.friends); //["小李", "小红"] console.log(result.getName()); //老明 console.log(result.age); //23 console.log(result.getSex()); //这个会报错,调用不到父原型上面扩展的方法
Héritage combiné (toutes les instances peuvent avoir leurs propres propriétés et utiliser la même méthode. L'héritage combiné évite les défauts du prototype chaînes et constructeurs empruntés. Combinaison Elle présente deux avantages et est la méthode d'héritage la plus couramment utilisée)
Core : en appelant le constructeur de la classe parent, héritez des propriétés de la classe parent et conservez les avantages du passage des paramètres, et puis utilisez l'instance de classe parent comme prototype de la sous-classe, réalisez la réutilisation des fonctionsInconvénients : le constructeur de la classe parent est appelé deux fois et deux instances sont générées (l'instance de sous-classe bloque celle du prototype de sous-classe) 4. Héritage de combinaison parasitefunction Person (name) { this.name = name; this.friends = ['小李','小红']; }; Person.prototype.getName = function () { return this.name; }; function Parent (age) { Person.call(this,'老明'); //这一步很关键 this.age = age; }; Parent.prototype = new Person('老明'); //这一步也很关键 var result = new Parent(24); console.log(result.name); //老明 result.friends.push("小智"); // console.log(result.friends); //['小李','小红','小智'] console.log(result.getName()); //老明 console.log(result.age); //24 var result1 = new Parent(25); //通过借用构造函数都有自己的属性,通过原型享用公共的方法 console.log(result1.name); //老明 console.log(result1.friends); //['小李','小红']
Core : Coupez les attributs d'instance de la classe parent par parasitisme, de sorte que lorsque le constructeur de la classe parent est appelé deux fois, les deux structures ne seront pas initialisées. Les méthodes/propriétés de sous-instance évitent les défauts de l'héritage combiné
Inconvénients : parfait, mais la mise en œuvre est plus compliquée[Recommandations associées. :
Tutoriel vidéo JavaScriptfunction Person(name) { this.name = name; this.friends = ['小李','小红']; } Person.prototype.getName = function () { return this.name; }; function Parent(age) { Person.call(this,"老明"); this.age = age; } (function () { var Super = function () {}; // 创建一个没有实例方法的类 Super.prototype = Person.prototype; Parent.prototype = new Super(); //将实例作为子类的原型 })(); var result = new Parent(23); console.log(result.name); console.log(result.friends); console.log(result.getName()); console.log(result.age);】
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!