Explication détaillée du modèle de réutilisation du code JavaScript_Connaissances de base

La réutilisation du code et ses principes

<font face="NSimsun">代码复用</font>, comme son nom l'indique, consiste à réutiliser une partie ou même la totalité du code qui a été écrit auparavant pour construire un nouveau programme. Quand on parle de réutilisation de code, la première chose à laquelle on peut penser est <font face="NSimsun">继承性</font>. Le principe de la réutilisation du code est :

<code>优先使用对象组合，而不是类继承</code>

En js, puisqu'il n'y a pas de concept de classe, le concept d'instance n'a pas beaucoup de sens. Les objets en js sont de simples paires clé-valeur, et ils peuvent être créés et modifiés dynamiquement.

Mais dans <font face="NSimsun">js</font>, nous pouvons utiliser des constructeurs et des opérateurs <font face="NSimsun">new</font> pour instancier un objet, qui présente des similitudes de syntaxe avec d'autres langages de programmation qui utilisent des classes.

Par exemple :

<code>var trigkit4 = new Person();</code>

<font face="NSimsun">js</font> semble être une classe lors de l'appel du constructeur <font face="NSimsun">Person</font>, mais c'est en fait toujours une fonction. Cela nous donne quelques idées de développement et des modèles d'héritage qui sont supposés être basés sur des classes. le "modèle d'héritage de classe".

Le mode d'héritage traditionnel nécessite le mot-clé <font face="NSimsun">class</font>. Nous supposons que le mode d'héritage de classe ci-dessus est <font face="NSimsun">现代继承模式</font>, qui est un mode qui n'a pas besoin d'être considéré en termes de classes.

Modèle d'héritage de classe

Regardez les exemples suivants de deux constructeurs <font face="NSimsun">Parent()</font> et <font face="NSimsun">Child()</font> :

<code><script type="text/javascript"><br>    function Parent(name){<br>        this.name = name || 'Allen';<br>    }<br>    Parent.prototype.say = function(){<br>        return this.name;<br>    }<br>    function Child(name){}<br>    //用Parent构造函数创建一个对象，并将该对象赋值给Child原型以实现继承<br>    function inherit(C,P){<br>        C.prototype = new P();//原型属性应该指向一个对象，而不是函数<br>    }<br>    //调用声明的继承函数<br>    inherit(Child,Parent);<br></script></code>

Lorsque vous créez un objet à l'aide de l'instruction <font face="NSimsun">new Child()</font>, il obtient ses fonctionnalités de l'instance <font face="NSimsun">Parent()</font> via le prototype, par exemple :

<code>var kid = new Child();
kid.say();
//Allen</code>

Chaîne prototype

Discutez du fonctionnement de la chaîne de prototypes dans le modèle d'héritage de classe. Nous considérons un objet comme un bloc quelque part en mémoire. Ce bloc mémoire contient des données et des références à d'autres blocs. Lorsque nous utilisons l'instruction <font face="NSimsun">new Parent()</font> pour créer un objet, un bloc comme celui sur le côté gauche de la figure ci-dessous sera créé. Ce bloc enregistre les attributs <font face="NSimsun">name</font>. Si nous voulons accéder à la méthode <font face="NSimsun">say()</font>. peut passer le <font face="NSimsun">Parent()</font> Le lien implicite <font face="NSimsun">prototype</font> de l'attribut 🎜> (prototype) peut accéder au bloc de droite <font face="NSimsun">__proto__</font>. <font face="NSimsun">Parent.prototype</font>

Alors, que se passe-t-il lorsque vous utilisez

pour créer un nouvel objet ? Comme indiqué ci-dessous : <font face="NSimsun">var kid = new Child()</font>

L'objet créé à l'aide de l'instruction

est presque vide à l'exception du lien implicite <font face="NSimsun">new Child()</font>. Dans ce cas, <font face="NSimsun">__proto__</font> pointe vers l'objet <font face="NSimsun">__proto__</font> créé à l'aide de l'instruction <font face="NSimsun">inherit()</font> dans la fonction <font face="NSimsun">new Parent()</font>.

Lors de l'exécution de

, puisque l'objet bloc dans le coin inférieur gauche n'a pas de méthode <font face="NSimsun">kid.say()</font>, il interrogera l'objet bloc du milieu via la chaîne de prototypes. Cependant, l'objet bloc du milieu n'a pas de <.> non plus, il a donc suivi la chaîne de prototypes pour interroger l'objet bloc le plus à droite, et cet objet avait la méthode <font face="NSimsun">say()</font>. C'est fini ? <font face="NSimsun">say()</font> <font face="NSimsun">say()</font> n'est pas terminé lorsqu'il est exécuté ici.

est référencé dans la méthode

. Cela pointe vers l'objet créé par le constructeur. Ici, il pointe vers le bloc <font face="NSimsun">say()</font>. n'a pas l'attribut <font face="NSimsun">this.name</font>. Pour cette raison, le bloc du milieu sera interrogé, et le bloc du milieu a l'attribut <font face="NSimsun">new Child()</font> À ce stade, la requête de la chaîne prototype est terminée. <font face="NSimsun">new Child()</font> <font face="NSimsun">name</font>Pour une discussion plus détaillée, veuillez consulter mon article : <font face="NSimsun">name</font>Notes d'étude Javascript (5) Explication détaillée du prototype et de la chaîne de prototypes

Partager des prototypes

La règle de ce modèle est la suivante : les membres réutilisables doivent être transférés vers le prototype au lieu d'être placés dans celui-ci. Par conséquent, à des fins d’héritage, tout ce qui mérite d’être hérité doit être implémenté dans un prototype. Par conséquent, vous pouvez définir le prototype de l'objet enfant pour qu'il soit identique au prototype de l'objet parent, comme indiqué dans l'exemple suivant :

<code>function inherit(C,P){<br>    C.prototype = P.prototype;<br>}</code>

子对象和父对象共享同一个原型，并且可以同等的访问<font face="NSimsun">say()</font>方法。然而，子对象并没有继承<font face="NSimsun">name</font>属性

原型继承

原型继承是一种“现代”无类继承模式。看如下实例：

<code><script type="text/javascript"><br>    //要继承的对象<br>    var parent = {<br>        name : "Jack"  //这里不能有分号哦<br>    };</code>
<code>    //新对象<br>    var child = Object(parent);</code>
<code>    alert(child.name);//Jack<br></script></code>

在原型模式中，并不需要使用对象字面量来创建父对象。如下代码所示，可以使用构造函数来创建父对象，这样做的话，自身的属性和构造函数的原型的属性都将被继承。

<code><script type="text/javascript"><br>    //父构造函数<br>    function Person(){<br>        this.name = "trigkit4";<br>    }<br>    //添加到原型的属性<br>    Person.prototype.getName = function(){<br>        return this.name;<br>    };<br>    //创建一个新的Person类对象<br>    var obj = new Person();<br>    //继承<br>    var kid = Object(obj);<br>    alert(kid.getName());//trigkit4<br></script></code>

本模式中，可以选择仅继承现有构造函数的原型对象。对象继承自对象，而不论父对象是如何创建的，如下实例：

<code><script type="text/javascript"><br>    //父构造函数<br>    function Person(){<br>        this.name = "trigkit4";<br>    }<br>    //添加到原型的属性<br>    Person.prototype.getName = function(){<br>        return this.name;<br>    };<br>    //创建一个新的Person类对象<br>    var obj = new Person();<br>    //继承<br>    var kid = Object(Person.prototype);<br>    console.log(typeof kid.getName);//function，因为它在原型中<br>    console.log(typeof kid.name);//undefined，因为只有该原型是继承的<br></script></code>