En plus de mes deux articles précédents sur Javascript, j'aimerais avoir une réflexion sur les objets et travailler avec eux, ce que les développeurs non seulement en Javascript mais dans la plupart des langages doivent gérer.

Objets

Javascript s'articule autour d'un paradigme simple basé sur des objets. Et nous connaissons tous les objets et les classes, nous avons probablement travaillé avec eux pendant toute notre carrière.

Un objet est un ensemble de propriétés et une propriété est un attribut de cet objet. C'est très comparable à nous les humains . Nous avons nos attributs, que ce soit notre prénom, notre nom, notre date de naissance ou notre taille et notre poids.

Les objets et la programmation orientée objet sont en fait inspirés par des objets de la vie réelle.

Les exemples suivants sont un guide pratique pour travailler avec des objets, des cas les plus simples aux plus avancés.

Façons d'instancier des objets

La manière habituelle d'instancier des objets est la suivante

# Create new object
const site = {
    name: "Medium",
    domain: "medium.com",
    type: "Writing Platform"
}

# Create new object
const site = new Object();
site.name = "Medium";
site.domain = "medium.com";
site.type = "Writing Platform";

site['name'] = "Medium";

const propertyName = "name";
const propertyValue = "Medium";
site[propertyName] = propertyValue;

Des classes

Travailler avec des objets ne va pas sans travailler avec des classes.

Vous savez très probablement comment les classes fonctionnent, donc en bref - c'est un modèle pour les objets, définissant les propriétés et les fonctions d'une instance, c'est-à-dire. un objet aura.

# Classes
class Website {
    constructor(name, domain, type){
        this.name = name;
        this.domain = domain;
        this.type = type;
    }
    // Getter
    get url() {
        return `https://www.${this.domain}`;
    }
    // Method
    sayHello() {
        return `Hello from ${this.name}!`;
    }
}
const medium = new Website("Medium",
    "medium.com",
    "Writing Platform");
const url = medium.url;
const greeting = medium.sayHello();

Une chose intéressante est cependant gettersdont l'utilisation est définie comme une getfonction. Ce n'est pas invocable comme les fonctions régulières mais se comporte comme une propriété.

Des champs

Les champs ou les propriétés peuvent en fait être déclarés avant le constructeur.

# Fields and Private Fields
class Website {
    name;
    domain;
    #type;
    
    constructor(name, domain, type){
        this.name = name;
        this.domain = domain;
        this.#type = type;
    }
}
const medium = new Website("Medium",
    "medium.com",
    "Writing Platform");

Générateurs et rendement des résultats

Les générateurs et le mot-clé yieldsont quelque chose de relativement nouveau en Javascript. Les yieldmots clés nous permettent d'agréger et de produire des résultats à partir d'une boucle - quelque chose qui n'est pas si courant dans d'autres langages mais qui est présent en C# depuis assez longtemps.

# Generator and Yielding results
class Website {
    constructor(tabs) {
        this.tabs = tabs;
    }
*getTabs() {
        for(const tab of this.tabs){
            yield tab;
    }
}

const medium = new Website(["Home",
    "Recent","About Us",
    "Register"]);
const generator = medium.getTabs();
const tabs = [...generator];

Prolonger les cours

Les classes peuvent également être étendues en Javascript.

# Extending Classes
class BaseWebsite {
    constructor(name, domain, type){
        this.name = name;
        this.domain = domain;
        this.type = type;
    }
 
    sayHello() {
        return "Hello!";
    }
}
class HttpsWebsite extends BaseWebsite {
    constructor(name, domain, type){
        super(name, domain, type);
        this.scheme = 'https';
    }
    
    sayHello() {
        let superHello = super.sayHello();
        return `${superHello} from ${this.name}`;
    }
}
const medium = new HttpsWebsite("Medium",
    "medium.com",
    "Writing Platform");
    
const hello = medium.sayHello();

Appels de méthode de classe de base

Dans l'exemple susmentionné, notez comment nous pouvons également déclarer la fonction de base sayHello, la remplacer, mais toujours l'utiliser avec le mot- superclé. La même chose est faite dans le constructorainsi.

Mélanges

L'héritage multiple n'est pas possible en Javascript, c'est-à-dire. les classes ne peuvent s'étendre que jusqu'à une superclasse. L'héritage lui-même se produit pendant l'exécution, Javascript recherche la chaîne de prototypes de l'objet, afin de trouver ses propriétés et valeurs déclarées.

Cependant, nous pouvons tirer parti et utiliser les Mix-ins pour y parvenir. Considérez l'exemple suivant

# Mixins
let WalkMixin = superclass => class extends superclass {
  walk() {
      return "I'm walking!";
  }
};
let FlyMixin = superclass => class extends superclass {
  fly() {
      return "I'm flying!";
  }
};
class BaseClass {}
class SampleClass extends WalkMixin(FlyMixin(BaseClass)) {};
const sample = new SampleClass();
console.log(sample.walk());
console.log(sample.fly());

Notez qu'il ne s'agit pas d'une fonctionnalité Javascript, mais plutôt d'une solution de contournement.

J'espère que vous avez trouvé cet article utile et agréable. Cela fait partie d'une série sur les concepts Javascript que j'ai récemment commencé à écrire, alors connectez-vous ! Si vous aimez le contenu, cliquez sur suivre et rejoignez-moi dans le voyage de recherche et d'écriture sur la science et l'ingénierie derrière Javascript.

Merci pour la lecture!