Introduction aux modèles de conception JavaScript et aux modèles de prototypes (Object.create et prototype)_compétences Javascript

Description du mode prototype

Description : utilisez des instances de prototype pour copier et créer de nouveaux objets personnalisables ; pour les nouveaux objets, vous n'avez pas besoin de connaître le processus spécifique de création de l'objet original

Processus : Prototype => nouveau ProtoExam => cloner vers un nouvel objet ;

Utilisez le code pertinent :

Copier le code Le code est le suivant :

fonction Prototype() {
Ce.nom = '';
Cet.age = '';
Ce.sexe = '';
>

Prototype.prototype.userInfo = function() {
Renvoie 'Informations personnelles, nom : ' this.name ', âge : ' this.age ', sexe : ' this.sex '
';
>

Deux contenus d'informations personnelles ou plus sont désormais requis :

Copier le code Le code est le suivant :

var proto = nouveau Prototype();
var personne1 = Objet.create(proto);
personne1.name = 'Xiao Ming';
person1.sex = 'Homme';
personne1.age = 35;
personne1.userInfo();
//
var personne2 = Objet.create(proto);
personne2.name = 'Xiaohua';
person2.sex = 'Femme';
personne2.age = 33;
personne2.userInfo();

Retour de sortie :

Copier le code Le code est le suivant :

Informations personnelles, Nom : Xiao Ming, Âge : 35, Sexe : Homme
Informations personnelles, Nom : Xiaohua, Âge : 33, Sexe : Femme

Le mode prototype est généralement utilisé lorsque la structure abstraite est complexe, mais que la composition du contenu est similaire, le contenu abstrait peut être personnalisé et l'objet nouvellement créé n'a besoin d'être que légèrement modifié pour répondre aux exigences

;

Instructions Object.create

1>. Définition : créer un objet qui peut spécifier un objet prototype et contenir des propriétés personnalisées facultatives
2> Object.create(proto [, propriétés]); Facultatif, utilisé pour configurer les propriétés du nouvel objet ;

Copier le code Le code est le suivant :

1. proto : Pour créer un prototype d'un nouvel objet, il est obligatoire et peut être nul ; ce proto n'a de valeur que s'il a déjà été créé [new] ou object.prototype
2. propriétés : facultatives, structure :
{
​​ propField : {
              valeur : 'val'|{}|function(){},
inscriptible : vrai|faux,
énumérable : vrai|faux,
Configurable : vrai|faux,
              get:function(){return 10},
             set:fonction(valeur){}
>
>
Les attributs personnalisés ont les quatre attributs natifs suivants :
valeur : valeur de l'attribut personnalisé ;
writable : si la valeur de cet élément est modifiable, la valeur par défaut est false, lorsqu'elle est vraie, obj.prodField peut se voir attribuer une valeur sinon elle est en lecture seule ; énumérable : énumérable ;
configurable : configurable ;
Peut également contenir des méthodes d'accès set, get ;

Parmi eux, [set, get] et value et writable ne peuvent pas apparaître en même temps

;

1. Créer une classe d'objet prototype :

Copier le code Le code est le suivant :

fonction ProtoClass(){
This.a = 'ProtoClass';
Ceci.c = {};
This.b = fonction() {
>
>

Créer une méthode de prototype :

Copier le code Le code est le suivant :

ProtoClass.prototype.aMethod = function() {
//this.a;
//this.b();
Renvoyez ceci.a;
>

Comment utiliser

1. Créez un objet avec ProtoClass.prototype ;

Copier le code Le code est le suivant :

var obj1 = Objet.create(ProtoClass.prototype, {
foo : {valeur : 'obj1', inscriptible : vrai🎜> })

obj1 a la méthode prototype ProtoClass aMethod ;

Copier le code Le code est le suivant :

obj1.aMethod();
//Le résultat sera indéfini, la méthode est accessible et les membres ProtoClass sont inaccessibles

Cependant, cette méthode ne peut pas implémenter les attributs de membre de a, b, c sous ProtoClass :

2. Utiliser la ProtoClass instanciée comme prototype :

Copier le code Le code est le suivant :

var proto = new ProtoClass();
var obj2 = Objet.create(proto, {

foo : {valeur : 'obj2'>
});

L'obj2 créé de cette manière possède tous les attributs membres a, b, c et la méthode prototype aMethod de ProtoClass et ajoute un attribut de données foo en lecture seule ;

Copier le code Le code est le suivant :

obj2.a; //ProtoClass

obj2.c : //[Objet]
obj2.b(); //

obj2.aMethod(); //ProtoClass obj2.foo; //obj2

3. Héritage de sous-classe :

Copier le code Le code est le suivant :

fonction Sous-Classe() {

 
>
SubClass.prototype = Object.create(ProtoClass.prototype,{
foo : {valeur : 'sous-classe'>
});

SubClass.prototype.subMethod = function() { Renvoie ceci.a || this.foo;

>

Cette méthode peut être héritée de la méthode aMethod de ProtoClass et exécutée ;

Copier le code Le code est le suivant :

var func = new SubClass();

func.aMethod() ;//non défini, impossible de lire les attributs membres de ProtoClass, a, b, c
func.subMethod();//subclass

Pour permettre à SubClass de lire les attributs membres de ProtoClass, SubClass doit être modifié :

Copier le code Le code est le suivant :

fonction Sous-Classe()

{
ProtoClass.call(this);
>

//Autres codes ;

Cette méthode peut obtenir les attributs membres et les méthodes prototypes de ProtoClass;:

Copier le code Le code est le suivant :

var func = new SubClass();

func.aMethod() ;//ProtoClass
func.subMethod();//ProtoClass

Une autre méthode consiste à utiliser un objet ProtoClass instancié comme prototype de SubClass ;

Copier le code Le code est le suivant :

var proto = new ProtoClass();

fonction Sous-Classe() { >

SubClass.prototype = Object.create(proto, {

foo : {valeur : 'sous-classe'>

});

De cette façon, une fois la SubClass instanciée, vous pouvez obtenir toutes les propriétés et méthodes prototypes de ProtoClass et créer un attribut de données en lecture seule foo;

Copier le code Le code est le suivant :

var func = new SubClass();

func.foo; //sous-classe
func.a; //ProtoClass
func.b(); //
func.c; //[Objet]
func.aMethod(); //ProtoClass

4. Une autre méthode d'héritage de création a le même effet que Object.create en utilisant la ProtoClass instanciée comme prototype :

Copier le code Le code est le suivant :

fonction Sous-Classe() {
​this.foo = 'subclass'; //Mais il peut être lu et écrit ici
>

SubClass.prototype = new ProtoClass();

Instructions associées à Object.create

Object.create est utilisé pour créer un nouvel objet. Lorsqu'il s'agit d'un objet, le prototype est nul et la fonction est la même que new Object();

Quand il s'agit d'une fonction, elle a le même effet que le nouveau FunctionName ;

Copier le code Le code est le suivant :

//1 Objet
var o = {}
//Équivalent à
var o2 = Objet.create({});
//Les deux constructeurs sont identiques ;
//----------------------------------------

fonction func() {
This.a = 'func';
>
func.prototype.method = fonction() {
Renvoyez ceci.a;
>

var newfunc = new func();

//Équivalent à [même effet]
var newfunc2 = Object.create(Object.prototype/*Function.prototype||function(){}*/, {
a : {valeur : 'func', inscriptible :true},
Méthode : {value : function() {return this.a;} }
});

Mais newfunc et newfunc2 ont des références de fonctions différentes dans les objets qui les créent.

newfunc est la fonction func() {...}, newfunc2 est la fonction Function {Native}

Copier le code Le code est le suivant :

Object.create(proto[, PropertiesField]):

description du proto, cette valeur est obligatoire et peut être nulle Si elle n'est pas définie, une exception sera levée
; Si proto n'est pas nul, il s'agit d'une valeur instanciée, c'est-à-dire une valeur qui a été nouvelle ; la plupart des objets en JavaScript ont un attribut constructeur, qui indique par quelle fonction cet objet est instancié ;

propertiesField est facultatif et définit les propriétés ou méthodes de membre dont l'objet nouvellement créé peut avoir besoin

;