hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


JavaScript orienté objet (OOJS): 3 façons de créer des instances d'objet

Quand un langage de programmation est tout sur les objets, la première chose que nous devons apprendre est de savoir comment créer des objets . Créer des objets en JavaScript est assez facile: une paire d'accolades fera le travail, mais ce n'est pas la seule façon de créer un objet ni la seule façon dont vous aurez besoin d'utiliser.

En JavaScript, les instances d'objets sont créées à partir d'objets intégrés et apparaissent lorsque le programme est en cours d'exécution. Par exemple, Date est un objet intégré qui nous donne des informations sur les dates. Si nous voulons afficher la date actuelle sur une page, nous avons besoin d'une instance d'exécution de Date contenant les informations sur la date actuelle.

JavaScript nous permet également de définir nos propres objets qui peuvent produire leurs propres instances d'objets en cours d'exécution. En JavaScript, tout est un objet et chaque objet a un ancêtre ultime appelé Object . La création d'une instance d'objet est appelée instanciation .

1. Le new opérateur

L'une des méthodes les plus courantes et les plus connues pour créer une nouvelle instance d'objet consiste à utiliser le new opérateur .

Vous avez besoin d'un constructeur pour que le new opérateur fonctionne. Un constructeur est une méthode d'un objet qui met en place une nouvelle instance de cet objet . Sa syntaxe de base ressemble à ceci:

 nouveau constructeur () 

Un constructeur peut accepter des arguments qui peuvent être utilisés pour modifier ou ajouter des propriétés à l'instance d'objet qu'il construit. Le constructeur a le même nom que l'objet auquel il appartient.

Voici un exemple de création d'une instance de l'objet Date() avec le new mot-clé:

 dt = new Date (2017, 0, 1) console.log (dt) // dim. 01 janv. 2017 00:00:00 GMT + 0100 

Date() est le constructeur pour créer un nouvel objet Date . Différents constructeurs d'un objet prennent différents arguments pour créer le même type d'instances d'objets avec des attributs variés .

Tous les objets intégrés dans JavaScript ne peuvent pas être instanciés comme Date . Il y a des objets qui ne viennent pas avec un constructeur : Math, JSON et Reflect, mais ce sont toujours des objets ordinaires.

Parmi les objets intégrés qui ont un ou plusieurs constructeurs, Symbol ne peut pas être appelé dans le style du constructeur pour instancier une nouvelle instance de Symbol . Il peut seulement être appelé comme une fonction qui retourne une nouvelle valeur de Symbol .

De plus, parmi les objets intégrés qui ont un ou plusieurs constructeurs, tous n'ont pas besoin d'appeler leurs constructeurs avec le new opérateur pour être instanciés. Function, Array, Error et RegExp peuvent également être appelés en tant que fonctions, sans utiliser le new mot-clé, et ils vont instancier et retourner une nouvelle instance d'objet.

2. L'objet Reflect

Les programmeurs backend peuvent déjà être familiarisés avec les API Reflection . La réflexion est une fonctionnalité des langages de programmation pour inspecter et mettre à jour certaines des entités de base, telles que les objets et les classes, lors de l'exécution .

En JavaScript, vous pouvez déjà effectuer des opérations de réflexion en utilisant Object . Mais, une API Reflection appropriée est finalement apparue en JavaScript.

L'objet Reflect dispose d'un ensemble de méthodes pour créer et mettre à jour des instances d'objet . L'objet Reflect n'a pas de constructeur, donc il ne peut pas être instancié avec le new opérateur, et, tout comme Math et JSON, il ne peut pas non plus être appelé en tant que fonction .

Cependant, Reflect a un équivalent du new opérateur : la méthode Reflect.construct() .

 Reflect.construct (target, argumentsList [, newTarget]) 

Les arguments target et newTarget optionnels sont des objets ayant leurs propres constructeurs, tandis que argumentsList est une liste d'arguments à transmettre au constructeur de target .

 var dt = Reflect.construct (Date, [2017, 0, 1]); console.log (dt); // dim. 01 janv. 2017 00:00:00 GMT + 0100 

Le code ci-dessus a le même effet que l'instanciation de Date() utilisant le new opérateur. Bien que vous puissiez toujours utiliser new, Reflection est une norme ECMAScript 6 . Il vous permet également d' utiliser l'argument newTarget, ce qui est un autre avantage par rapport au new opérateur.

La valeur du newTarget de newTarget (pour être exact, c'est le prototype du constructeur newTarget ) devient le prototype de l'instance nouvellement créée .

Un prototype est la propriété d'un objet, dont la valeur est également un objet, portant les propriétés de l'objet original. En bref, un objet tire ses membres de son prototype.

Ici, voyons un exemple:

 class A {constructor () {this.message = fonction () {console.log ('message de A')}}} classe B {constructor () {} message () {console.log ('message de B') } data () {console.log ('données de B')}} obj = Reflect.construct (A, [], B) console.log (obj.message ()); // message de A console.log (obj.data ()); // données de B console.log (obj instanceof B) // true 

En passant B comme troisième argument de Reflect.construct(), la valeur prototype de l'objet obj est identique à celle du prototype du constructeur de B (qui a les propriétés message et data ).

Ainsi, obj peut accéder au message et aux data, disponibles sur son prototype. Mais, puisque obj est fait en utilisant A, il a aussi son propre message qu'il a reçu de A

Même si obj est construit en tant que tableau, ce n'est pas une instance de Array, car son prototype est défini sur Object .

 obj = Reflect.construct (Tableau, [1, 2, 3], Objet) console.log (obj) // Tableau [1, 2, 3] console.log (obj instanceof tableau) // false 

Reflect.construct() peut être utile lorsque vous souhaitez créer un objet en utilisant plusieurs plans .

3. La méthode Object.create()

Vous pouvez également créer un nouvel objet ordinaire avec un prototype spécifique via Object.create() . Cela peut aussi sembler très similaire à l'utilisation du new opérateur, mais ce n'est pas le cas.

 Object.create (O [, propertiesObject]) 

L'argument O est un objet qui sert de prototype pour le nouvel objet qui sera créé. L'argument facultatif propertiesObject est une liste de propriétés que vous pouvez ajouter au nouvel objet.

 class A {constructor () {} message () {console.log ('message de A')}} var obj = Object.create (nouveau A (), {data: {inscriptible: vrai, configurable: vrai, valeur: function () {retourne 'data from obj'}}}) console.log (obj.message ()) // message de A console.log (obj.data ()) // data de obj obj1 = Object.create ( new A (), {foo: {inscriptible: vrai, configurable: vrai, valeur: function () {return 'foo de obj1'}}}) console.log (obj1.message ()) // message d'une console. log (obj1.foo ()) // foo de obj1 

Dans l'objet obj, la propriété ajoutée est data, alors que dans obj1, c'est foo . Donc, comme vous le voyez, nous pouvons avoir des propriétés et des méthodes ajoutées à un nouvel objet .

C'est génial quand vous voulez créer plusieurs objets du même type mais avec des propriétés ou des méthodes supplémentaires différentes . La syntaxe Object.create() évite de les coder tous séparément.

Faites défiler et animer votre page facilement avec Force.js

Faites défiler et animer votre page facilement avec Force.js

L'animation Web est plus facile que jamais, avec de simples animations CSS3 devenant la norme. Mais, JavaScript est toujours incroyablement précieux et c'est l'une des rares langues fiables pour les animations techniques.La bibliothèque Force.js est un script open-source gratuit construit autour d' animations de pages dynamiques .V

(Conseils techniques et de conception)

10+ conseils, cartes et infographies essentiels de Pokemon Go pour les formateurs

10+ conseils, cartes et infographies essentiels de Pokemon Go pour les formateurs

Si vous n'avez jamais été un fan de Pokemon jusqu'à ce que Pokemon Go devienne l'application du siècle, voici le post qui peut vous aider à vous rattraper rapidement. Voici 10+ graphiques, graphiques et infographies Pokemon Go pour améliorer vos connaissances sur Pokemon . Si vous avez d'autres graphiques ou graphiques qui devraient faire partie de cette liste, faites-le nous savoir dans la section des commentaires.En pa

(Conseils techniques et de conception)