[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/create [Back]  [Original]

Object.create() - JavaScript | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Object.create()

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La mthode Object.create() cre un nouvel objet avec un prototype donn et des proprits donnes.

Dans cet article

Exemple interactif

const person = {
  isHuman: false,
  printIntroduction: function () {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  },
};

const me = Object.create(person);

me.name = "Matthew"; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // Inherited properties can be overwritten

me.printIntroduction();
// Expected output: "My name is Matthew. Am I human? true"

Syntaxe

js
Object.create(proto);
Object.create(proto, objetProprits);

Paramtres

proto

L'objet qui sera le prototype du nouvel objet cr.

objetProprits

Paramtre optionnel. S'il est fourni et qu'il ne vaut pas undefined, il sera utilis comme un objet dont les proprits propres (celles qui ne sont pas hrites par la chane de prototypes) et numrables dfiniront des descripteurs pour les proprits ajouter au nouvel objet, avec les mmes noms. Ces proprits correspondent au deuxime argument de Object.defineProperties().

Valeur de retour

Un nouvel objet qui dispose du prototype et des proprits indiques.

Exceptions

Cette mthode lve une exception TypeError si le paramtre objetProprits vaut null ou s'il ne dcrit pas des proprits d'un objet.

Exemples

L'hritage classique avec Object.create()

Dans l'exemple ci-dessous, on utilise Object.create() afin de raliser un hritage de classe. Ce modle ne supporte que l'hritage unique (un objet hrite directement uniquement d'un autre objet) car JavaScript ne gre pas l'hritage multiple.

js
// Forme, la classe parente
function Forme() {
  this.x = 0;
  this.y = 0;
}

// Mthode de la classe parente
Forme.prototype.dplacer = function (x, y) {
  this.x += x;
  this.y += y;
  console.info("Forme dplace.");
};

// Rectangle - classe fille
function Rectangle() {
  // on appelle le constructeur parent
  Forme.call(this);
}

// La classe fille surcharge la classe parente
Rectangle.prototype = Object.create(Forme.prototype);

// Si on ne dfinit pas le constructeur avec Rectangle, il rcuprera le constructeur
// Forme (le parent).
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log("instance de Rectangle ? ", rect instanceof Rectangle);
// true
console.log("une instance de Forme ? ", rect instanceof Forme);
// true
rect.dplacer(1, 1);
// Affiche 'Forme dplace.'

Si on souhaite hriter de plusieurs objets, on peut utiliser des mixins.

js
function MaClasse() {
  ClasseParente1.call(this);
  ClasseParente2.call(this);
}

MaClasse.prototype = Object.create(ClasseParente1.prototype); // hritage d'une classe
Object.assign(MaClasse.prototype, ClasseParente2.prototype); // mixin pour une autre
MaClasse.prototype.constructor = MaClasse; // On raffecte le constructeur

MaClasse.prototype.maMthode = function () {
  // faire quelque chose
};

Ici, la mthode Object.assign() copie les proprits du prototype de la classe parente (ClassParente2) sur le prototype de la classe fille (MaClasse), les rendant disponibles pour toutes les instances de MaClasse. Object.assign() a t introduit avec ES2015 et une prothse d'mulation (polyfill) est disponible. Si le support des navigateurs plus anciens est ncessaire, les mthodes jQuery.extend() ou _.assign() (Lodash) peuvent tre utilises.

Utiliser l'argument objetProprits avec Object.create()

js
var o;

// on cre un objet avec null
// comme prototype
o = Object.create(null);

o = {};
// est quivalent  :
o = Object.create(Object.prototype);

// Exemple o on cre un objet avec quelques proprits
// (On voit ici que le second paramtres fait correspondre les cls
// avec des descripteurs de proprits.)
o = Object.create(Object.prototype, {
  // toto est une proprit de donne
  toto: { writable: true, configurable: true, value: "hello" },
  // truc est une proprit d'accesseur/mutateur
  truc: {
    configurable: false,
    get: function () {
      return 10;
    },
    set: function (value) {
      console.log("Dfinir `o.truc` ", value);
    },
    /* avec les accesseurs ES2015 on aura :
    get() { return 10; },
    set(value) { console.log('Dfinir `o.truc` ', value); } */
  },
});

function Constructeur() {}
o = new Constructeur();
// est quivalent  :
o = Object.create(Constructeur.prototype);
// Bien entendu, si la fonction Constructeur
// possde des instructions pour l'initialisation,
// Object.create() ne pourra pas le reproduire

// on cre un nouvel objet dont le prototype est
// un nouvel objet vide et on y ajoute une proprit
// 'p' qui vaut 42
o = Object.create({}, { p: { value: 42 } });

// par dfaut, les proprits ne sont PAS
// crivables, numrables ou configurables
o.p = 24;
o.p;
// 42

o.q = 12;
for (var prop in o) {
  console.log(prop);
}
// 'q'

delete o.p;
// false

// Pour dfinir une proprit selon ES3
o2 = Object.create(
  {},
  {
    p: {
      value: 42,
      writable: true,
      enumerable: true,
      configurable: true,
    },
  },
);

// quivalent 
// o2 = Object.create({p: 42});

Spcifications

Spcification
ECMAScript 2027 LanguageSpecification
# sec-object.create

Compatibilit des navigateurs

Voir aussi


Web Proxy Viewer  |  New URL  |  Original Page