Maison > interface Web > js tutoriel > Méthodes pour créer des objets en JavaScript

Méthodes pour créer des objets en JavaScript

Patricia Arquette
Libérer: 2024-10-13 06:22:02
original
1024 Les gens l'ont consulté

Methods to create Objects in JavaScript

Introduction

Il existe très peu de façons de créer un objet en JavaScript.

  1. Littéraux d'objet
  2. Constructeur Object()
  3. Object.create()
  4. Fonction constructeur
  5. Classe ES6

Littéraux d'objet

C'est probablement le moyen le plus rapide et le plus simple de créer un objet en JavaScript. Ceci est également appelé car un initialiseur d'objet est une liste délimitée par des virgules de zéro ou plusieurs paires de noms de propriété et de valeurs associées d'un objet, entourées d'accolades ({}).

const newObject = {} // Simply create a new empty object

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}
Copier après la connexion

Les valeurs d'objet peuvent être soit un type de données primitif, soit un autre objet.

Constructeur Objet()

Vous pouvez créer un objet à l'aide du constructeur d'objet intégré.
Si la valeur transmise est nulle ou indéfinie ou si aucune valeur n'est transmise, elle crée et renvoie un objet vide.
Si la valeur est déjà un objet, elle renvoie la même valeur.

// below options create and return an empty object
const ObjWithNoValue = new Object();
const ObjWithUndefined = new Object(undefined);
const ObjWithNull = new Object(null);

const newObject = { 
  someKey: "someValue", 
  anotherKey: "anotherValue" 
}

const sameObject = new Object(someObject);

sameObject['andAnotherKey'] = "one another value";

sameObject === newObject; // both objects are same. 

Copier après la connexion

Objet.create()

Cette méthode permet de créer un nouvel objet avec un prototype spécifique. Cette approche permet au nouvel objet d'hériter des propriétés et des méthodes du prototype, facilitant ainsi un comportement de type héritage.

const person = {
  greet: function () {
    console.log(`Hello ${this.name || 'Guest'}`);
  }
}

const driver = Object.create(person);
driver.name = 'John';
driver.greet(); // Hello John
Copier après la connexion

Fonction constructeur

Avant ES6, il s'agissait d'une méthode courante pour créer plusieurs objets similaires. Le constructeur n'est rien d'autre qu'une fonction et avec l'aide d'un nouveau mot-clé, vous pouvez créer un objet.

C'est une bonne pratique de mettre en majuscule le premier caractère d'un nom de fonction lorsque vous construisez l'objet avec le mot-clé "new".

function Person(name, location) {
  this.name = name;
  this.location = location;
  greet() {
    console.log(`Hello, I am ${this.name || 'Guest'} from ${this.location || 'Earth'}`);
  }
}

const alex = new Person('Alex');
alex.greet(); // Hello, I am Alex from Earth

const sam = new Person('Sam Anderson', 'Switzerland');
sam.greet(); // Hello, I am Sam Anderson from Switzerland
Copier après la connexion

Classe ES6

Une approche plus moderne permet de créer un objet comme les autres langages de programmation POO en utilisant une classe avec une fonction constructeur pour initialiser les propriétés et les méthodes.

class Person {
  constructor(name, location) {
    this.name = name || 'Guest';
    this.location = location || 'Earth';
  }

  greet() {
    console.log(`Hello, I am ${this.name} from ${this.location}`);
  }
}

const santa = new Person('Santa');
santa.greet(); // Hello, I am Santa from Earth
Copier après la connexion

Références :

  • MDN-JavaScript
  • javascript.info

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal