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.

Obtenez une vaste collection d'outils de conception sur "Sans Francisco"

Cela peut sembler un nom étrange, mais Sans Francisco est une excellente ressource pour les concepteurs. Le site organise tous les meilleurs outils (gratuits + payants) pour les designers, dans plus d'une douzaine de catégories.Ces outils vont du test UI / UX aux programmes de conception d'icônes et aux outils de collaboration pour les équipes de conception .Le

(Conseils techniques et de conception)

Pourquoi Facebook est important pour les nouveaux parents

Puisque vous étiez assez fou pour devenir un parent, voici quelques pistes sur Facebook pour vous aider à faire face. Avec l'avènement du premier anniversaire de mon fils, j'ai réfléchi à l'année inaugurale de ma vie de parent et je me suis rendu compte que Facebook y a joué un grand rôle.Eh bien,

(Conseils techniques et de conception)