Qu'est-ce que les méthodes et les objets en JavaScript ?

La confusion vient du fait qu'au lieu d'inventer un autre nom on a utilisé le mot "function" pour définir des objets en JavaScipt, et cela depuis pratiquement l'origine du langage avant l'an 2000.
Une version récente de JavaScript incorpore la possibilité de faire des "class" qui permettent de définir d'autres types d'objets, plus conformes à ce qu'on entend communément par "objet".

La grande majorité des fichiers JavaScript est du premier type, et c'est cela dont on parle en premier lieu, je suppose.

Voici quelques informations forcément simplifiées.
On appelle "propriétés" des valeurs attachées à un objet, par exemple pour un objet de type "personne" on aura des propriétés "date de naissance", "nom", "prénom", "adresse" etc.

On appelle "méthodes" des fonctions attachées à un objet, par exemple pour une personne la méthode "changement d'adresse".

Un objet "traditionnel" se définit de la façon suivante :

function NomDeClasse(parameters) {
  /* définition et initialisation des propriétés
      à partir des paramètres d'appel de la fonction */
  this.xxx = ...;
  this.yyy = ...;
  ....
  /* définition des méthodes */
  this method1 = function(...) {
        /* code de la méthode */
  }
  this.method2 = function(...) {
}

Pour instancier les objets on écrit

let object1 = new NomDeClasse(...);
let object2 = new NomDeClasse();

object1 et object2 sont des objets de même classe qui ont des comportement similaires (mêmes propriétés et mêmes méthode) que l'on utilise comme ceci

let abc = object1.xxx; /* récupérer la valeur de la propriété xxx */
object2.yyy = abc; /*assigner une valeur à le propriété yyy */
let result = object2.method1(...);

Noter l'utlisation de "this" à l'intérieur du code de la "fonction de classe" pour définir aussi bien les propriétés que les méthodes.
Noter également l'utilisation de la directive "new" pour instancier un objet.
Ces deux points sont très différents de la façon dont on utilise une "fonction" standard.

Je n'entre pas dans les discussions sur le fait que ce ne sont pas vraiment des "objets" au sens de la programmation orientée objet. A ma connaissance il n'y a pas d'héritage etc.

Est-ce que cela répond à la question ?
Modifié par PapyJP (07 Jul 2022 - 17:28)

Merci Papy pour tes explications mais je suis toujours au même point, je ne comprends pas. Peut être qu'en continuant à lire des explications de divers sources je finirai pas comprendre. Mes cours n'expliquent pas, ils disent juste comment construire une méthode et un objet.

Qu'est-ce que tu ne comprends pas ?

Voici un exemple directement issu de mon site de gestion de chorale

function Author(data) {
  /* data est une variable de type objet, c'est à dire
     sous la forme {"firstName" : "Johann-Sebastian", "lastName": "Bach", ...} 
	 dans cet exemple elle est générée par un programme PHP à
	 partir d'une base de données
  */
  for(let property in data) this[property] = data[property];
  /* j'initialise l'objet à partir de data */
  /* j'ajoute une propriété "fullName" en concaténant les deux
	 si une de ces variables n'était pas donnée, je remplace la valeur
	 "undefined" par une chaîne vide */
  this.fullName = (this.firstName + ' ' + this.lastName).replace(/\s*undefined\s*/, '');
  this.birth = this.birth || ''; /* si la date de naissance n'est pas fournie je mets "" */
  this.death = this.death || ''; /* idem pour la date de mort */
  this.dates = (this.birth + '-' + (this.death)).replace(/-$/, '').replace(/</g, 'avant ').replace(/>/g, 'après ').replace(/~/g, 'vers ');
  /* pour certains auteurs de la Renaissance on ne connait pas les dates avec précision */
  if(this.birth && !this.death) {
    if(this.dates.match(/^\d/)) this.dates = 'né en ' + this.dates;
    else this.dates = 'né ' + this.dates;
  }
  if(this.dates == 'undefined') this.dates = '';
  if(!this.image) this.image = '/images/auteurs/unknown.jpg';
  
  /* méthode "afficher la page Wikipedia" */
  this.display = function(event) {
    event.stopPropagation();
    if(!this.url) return;
    window.open(this.url);
  }
  /* méthode "fabriquer une balise image avec les infos" */
  this.node = function() {
    /* newNode est une fonction de ma librairie personnelle */
    let figure = newNode('figure', '.author');
    let image = newNode('img', 'src=' + this.image, 'alt=' + this.lastName);
    if(this.url) { /* url = lien Wikipedia */
      figure.classList.add('withlink');
      image.addEventListener('click', this.display.bind(this));
    }
    let caption = newNode('figcaption', newNode('p', this.fullName), newNode('p', this.dates));
    AddToNode(figure, image, caption);
    return figure;
  }
}

Essaie de comprendre ce code commenté et dis moi ce que tu ne comprends pas.

Reprenons autrement.
Je me souviens d'avoir introduit la programmation par objets dans mon entreprise vers la fin des année 1980. C'était tout nouveau mais ça devenait le "must".
A cette époque, les développeurs des langages qui ne supportaient pas précédemment le concept d'objet se sont mis à faire des bidouilles pour supporter ce concept.
JavaScript a été inventé à peu près à cette époque, et pour supporter le concept d'objet on a utilisé le mécanisme des fonctions mais sans inventer un mot spécifique.
Ne dis pas "les objets ne sont que des fonctions" mais "en JavaScript les objets sont définis avec le mot function", ce qui ne facilite pas la compréhension de la chose.

As-tu une image claire dans ton esprit du concept d'objet, de propriété, de méthodes ?

Dans l'exemple que j'ai essayé de te montrer: on a une "classe d'objets" que j'appelle Author
Dans mon contexte, un "Author" est une représentation simplifiée d'un compositeur ou d'un écrivain.
Un "Author" a un prénom, un nom de famille, une date de naissance et de décès, un portrait, un article Wikipedia. Il s'y rattache également une liste des œuvres que cette personne a écrites. Ces informations sont appelées des "propriétés".
Les "méthodes" sont des fonction rattachées à la classe d'objet. Donc, oui, les "méthodes" sont bien des fonctions mais qui sont propres à une classe d'objets. Il est légitime de les définir par le mot "function".

Pourquoi le mot "function" a-t-il été utilisé pour définir un classe d'objet ?
Tout simplement parce que pour dire qu'une variable donnée, par exemple JSBach, est un Author on doit faire intervenir une fonction dont le but est d'initialiser les propriétés et les méthodes correspondantes.

Par exemple en PHP on écrirait

class Author {
    /* définition des propriétés */
    var $firstName;
    var $lastName;
    var $birth;
    var $death;
    var $image;
    var $wikiArticle;
    var $works = [];
    /* définition des méthodes */
    function __construct(...) {
        /* code pour initialiser les propriétés */
    }
    function toto() {
        ....
    }
   function titi() {
        ....
    }
}
$JSBach = new Author(...);

Dans ce langage le mot "class" déclare une classe d'objet.
La méthode __construct est appelée automatiquement quand on écrit new NomDeClasse

En JavaScript la même chose s'écrit :

function Author {
    /* définition des propriétés */
    this.firstName;
    this.lastName;
    this.birth;
    this.death;
    this.image;
   this.wikiArticle;
   this.works = [];
   /* code pour initialiser les propriétés */
    /* définition des méthodes */
    this.toto = function() {
        ....
    }
  this.titi = function() {
        ....
    }
}
let JSBach = new Author(...);

La grosse différence entre PHP et JavaScript c'est qu'il n'y a pas de méthode explicite similaire à __construct, c'est du code qui se trouve directement dans la définition de la classe d'objet.

Est-ce que cela est un peu moins obscur ?
Modifié par PapyJP (08 Jul 2022 - 19:32)

Désolé de répondre que maintenant mais j'ai une une coupure d'internet dès vendredi dernier et qui a duré tout le week end, ce qui m'a empêche d'utiliser internet.

Pour en revenir à tes explications, désolé mais je ne suis pas plus avancé, Papy. Tu me donnes des explications qui ne sont pas claires pour moi. Tu m'expliques avec des mots que toi seul comprend ou tous ceux qui connaissent déjà le JavaScript.

Tant pis pour moi, je débute dans ce langage et je comprendrais peut être plus tard quand je reviendrai dessus.

Je débute en JavaScript, je ne pense pas que la programmation orientée objet me soit abordable pour l'instant.

Depuis les années 1990 la programmation orientée objet est la base de l’écriture d’un programme, quel que soit le langage. Comprendre ce que c’est et ce que ça veut dire doit se faire avant l’apprentissage de tout langage de programmation. Quand on apprend un langage, on apprend comment ce langage implémente les différents concepts, qui restent les mêmes quel que soit le langage. Si on n’a pas compris les concepts avant on est paumé. Ce sont des concepts simples, ça se comprend facilement, il faut trouver le bon tuto.
J’ai appris ça il y a 30 ans en un week-end.
C’était dans un petit livre en anglais de Bjarne Stroustrup qui expliquait les concepts et la façon dont il avait conçu le langage C++ qu’il avait développé.
Je me suis rendu compte que c’était une formulation claire des bonnes pratiques que nous utilisions empiriquement dans le développement de systèmes, dans des langages qui évidemment ne supportaient pas nativement ces concepts.
Il doit y avoir mieux aujourd’hui comme tuto, et en français ce qui ne gâte rien.
Modifié par PapyJP (12 Jul 2022 - 09:56)

OK Papy mais mes cours, que je paye, n'abordent pas la programmation orientée objet.

Ta question initiale c'est "Qu'est-ce que les méthodes et les objets en JavaScript ?"
ça veut dire que tu as rencontré ces mots quelque part dans ton cours.
Les méthodes et objets "JavaScript" ne sont que la façon dont on implémente les méthodes et les objet dans ce langage particulier. Tu pourrais poser la même question pour d'autres langages: PHP, Python et plein d'autres.
Je crains que les auteurs de ton cours considèrent que ce sont des concepts connus des étudiants. Je te recommande donc de te familiariser avec ces concepts, car sinon une bonne partie du cours risque de passer par dessus ta tête.
Pour te donner un exemple, si tu veux que ton programme effectue une action quand on clique sur une balise dans une feuille HTML, la balise est un objet et tu définis pour cet objet la méthode appropriée par l'intermédiaire d'une méthode addEventListener qui est d'office associée à toute balise. Tant que tu n'as pas saisi le concept de classe d'objet, de propriété et de méthode, tout cela est incompréhensible.
Regarde cette page qui te donnera un début d'explication https://developer.mozilla.org/fr/docs/Learn/JavaScript/Objects/Basics