Prototypage JavaScript

Exemple simple avec une fonction constructeur

Créer une fonction constructeur

// 1. Créer une fonction -> de 'constructeur'
function Person() {
    this.name = "John";
    this.age = 25;
}

// 2. Créer un objet avec cette fonction constructeur
let person1 = new Person(); // {name: "John", age: 25}

Ajouter des propriétés au prototype

// 3. Ajouter des propriétés au prototype de la fonction Person
// Ces propriétés seront partagées par tous les objets créés avec Person
Person.prototype.age = 30;        // Cette valeur sera "cachée" par celle de l'objet
Person.prototype.city = "Paris";  // Nouvelle propriété disponible pour tous

// IMPORTANT: Ne jamais faire Person.prototype = {age: 30, city: "Paris"}
// car cela casserait la chaîne de prototype !

Chaîne de prototype

// 4. Comment JavaScript recherche les propriétés :
// Chaîne de prototype : person1 ---> Person.prototype ---> Object.prototype ---> null

console.log("=== Tests des propriétés ===");

console.log(person1.name); // "John"
// JavaScript trouve 'name' directement sur person1

console.log(person1.age); // 25
// JavaScript trouve 'age' sur person1 (valeur 25)
// Il ignore la valeur 30 du prototype (c'est le "shadowing")

console.log(person1.city); // "Paris" 
// JavaScript ne trouve pas 'city' sur person1
// Il regarde dans Person.prototype et trouve "Paris"

console.log(person1.country); // undefined
// JavaScript ne trouve 'country' nulle part :
// 1. Pas sur person1
// 2. Pas sur Person.prototype  
// 3. Pas sur Object.prototype
// 4. Arrive à null = fin de recherche, retourne undefined

Exemples pratiques

Méthodes natives des tableaux

let numbers = [1, 2, 3];
numbers.push(4); // D'où vient cette méthode push() ?
// Elle vient de Array.prototype.push !

Ajouter une méthode à tous les tableaux

// Ajouter une méthode à tous les tableaux ( à utiliser avec parcimonie ! ça peut casser des choses et polluer le namespace ! )
Array.prototype.last = function() {
    return this[this.length - 1];
};

let fruits = ['pomme', 'banane'];
console.log(fruits.last()); // "banane"

Exemple avec jQuery

// ça permet aussi de comprendre des trucs comme le Jquery que vous allez / avez déjà vu ! 
// jQuery fait ça en interne :
function jQuery(selector) {
    // logique de sélection...
}

jQuery.prototype.hide = function() {
    // cache l'élément
};

$('.button').hide(); // utilise le prototype !