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

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

WBOY

Libérer： 2016-05-16 16:32:00

original

1492 Les gens l'ont consulté

La réutilisation du code et ses principes

代码复用, 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 继承性. Le principe de la réutilisation du code est :

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

Copier après la connexion

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 js, nous pouvons utiliser des constructeurs et des opérateurs new 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>

Copier après la connexion

js semble être une classe lors de l'appel du constructeur Person, 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é class. Nous supposons que le mode d'héritage de classe ci-dessus est 现代继承模式, 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 Parent() et Child() :

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

Copier après la connexion

Lorsque vous créez un objet à l'aide de l'instruction new Child(), il obtient ses fonctionnalités de l'instance Parent() via le prototype, par exemple :

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

Copier après la connexion

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 new Parent() 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 name. Si nous voulons accéder à la méthode say(). peut passer le Parent() Le lien implicite prototype de l'attribut 🎜> (prototype) peut accéder au bloc de droite __proto__. Parent.prototype

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

pour créer un nouvel objet ? Comme indiqué ci-dessous : var kid = new Child()

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

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

Lors de l'exécution de

, puisque l'objet bloc dans le coin inférieur gauche n'a pas de méthode kid.say(), 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 say(). C'est fini ? say() say() 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 say(). n'a pas l'attribut this.name. Pour cette raison, le bloc du milieu sera interrogé, et le bloc du milieu a l'attribut new Child() À ce stade, la requête de la chaîne prototype est terminée. new Child() namePour une discussion plus détaillée, veuillez consulter mon article : nameNotes 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>

Copier après la connexion

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

原型继承

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

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

Copier après la connexion

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

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

Copier après la connexion

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

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

Copier après la connexion