Prototype - 11

PLAN

Object.create

__proto__

prototype

new

Objectif

Prototype est un mot clé du langage JS.

​

Nous allons découvrir son origine, au travers de la création de nouveaux objets.

Mais, commençons par découvrir le "pattern Functional Classes"

​

ll permet de créer de nouveaux objets.

​

Pattern : Functional Classes

let Pattern = function( arg ) {�

...

�};

​

​

Une fonction

​

​

Pattern : Functional Classes

let Pattern = function( arg ) {� let obj = {� ...� };� ...

};

​

​

Création d'un objet

​

​

Pattern : Functional Classes

let Pattern = function( arg ) {� let obj = {� ...� };� return obj;�};

​

​

Renvoie l'objet !

Functional Classes

let Point = function( arg ) {� let obj = {� ...,� };� return obj;�};

​

​

Une fonction qui crée et renvoi un objet

Représentation en mémoire

Il est important de prendre en compte la représentation en mémoire.

http://www.pythontutor.com/ est un formidable outil de visualisation.

Exemple : Functional Classes

let Point = function( x ) {� let obj = {� x,� move,� };� return obj;�};

function move () { � this.x++; �}

​

Création d'objets

let Point = function( x ) {� let obj = {� x,� move,� };� return obj;�};

function move () { � this.x++; �}

�let pt1 = Point(1);�let pt2 = Point(2);

Discussion sur la mémoire

Functionnal Pattern est très simple, pas de classe ...

​

Mais, nous allons examiner l'efficacité de ce pattern en terme de "mémoire".

Pour cela nous allons ajouter des méthodes au pattern.

Ajout de méthodes

let Point = function( x ) {� let obj = {� x,� move,� reset,� back,� };� return obj;�};�

function move () { � this.x++; �}�function reset () { � this.x = 0 ; �}�function back () { � this.x-- ; �}

Nous allons tenter d'améliorer le code !

​

Rappels

Il vous faut maîtriser la délégation :

la chaîne de proto.

Object.create

​

​

Réécriture

let Point = function( x ) {� let obj = {� x,� move,� };� return obj;�};

function move () { � this.x++; �}

���

​

Les fonctions sont des objets

et des variables !

Une fonction est un objet

Point.methods = { �

�};

Point = function{ �

�};

Une fonction est un objet, on peut lui donner une propriété "methods" qui est un objet regroupant des méthodes !

Réécriture

let Point = function( x ) {� let obj = {� x,� move,� };� return obj;�};

​

Point.methods = { � move : function() {� this.x++;� }�};���

​

function move () {� this.x++; �}

La délégation

let obj = Object.create( proto );

On utilise object.create du langage pour la création d'un objet et la délégation.

Création

let Point = function( x ) {� let obj = {� x,� move,� };� return obj;�};

function move () { � this.x++; �}

let Point = function ( loc ) { � let obj = Object.create( Point.methods ); � obj.x = loc;� return obj;�};�

Point.methods = { � move : function() {� this.x++;� }�};���

​

Délégation

let Point = function( x ) {� let obj = {� x,� move,� };� return obj;�};

function move () { � this.x++; �}

let Point = function ( loc ) { � let obj = Object.create(Point.methods); � obj.x = loc;� return obj;�};�

���

​

Point.methods = { � move : function() {� this.x++;� }�};

Bilan :

let Point = function ( loc ) { � let obj = Object.create( Point.methods );

obj.x = loc;� return obj;�};��Point.methods = { � move : function() {� this.x++;� }�};���

Bilan :

let pt1 = Point(1);�let pt2 = Point(2);

pas de new avec ce pattern

Renommons

Point.methods par

Point.prototype

prototype = methods

let Point = function ( loc ) { � let obj = Object.create(Point.prototype); � obj.x = loc;� return obj;�};��Point.prototype = { � move : function() {� this.x++;� }�};��

let Point = function ( loc ) { � let obj = Object.create(Point.methods); � obj.x = loc;� return obj;�};

Point.methods = { � move : function() {� this.x++;� }�};

Introduction de prototype

Cas de plusieurs objets créés

let pt1 = Point(1);�let pt2 = Point(2);

​

Bilan

let pt1 = Point(1);�let pt2 = Point(2);

Un nom qui a du sens !

Ajout de plusieurs fonctions

Les fonctions sont à ajouter au prototype.

​

let Point = function ( loc ) { � let obj = Object.create(Point.prototype); � obj.x = loc;� return obj;�};

Point.prototype = { � move () {� this.x++;� },� reset () { � this.x = 0 ; � },� back () { � this.x-- ; � }

�};

let pt1 = Point(1);

let pt2 = Point(2);

​

L'ensemble des méthodes communes

Comparaison

let Point = function( x ) {� let obj = {� x,� move,� reset,� back,� };� return obj;�};�function move () { � this.x++; �}�function reset () { � this.x = 0 ; �}�function back () { � this.x-- ; �}

let Point = function ( loc ) { � let obj = Object.create(Point.prototype); � obj.x = loc;� return obj;�};��Point.prototype = { � move () {� this.x++;� },� reset () { � this.x = 0 ; � },� back () { � this.x-- ; � }�};

Comparaison

Prototype

Regroupe les propriétés communes aux objets

En détail

be cool !

Idée à retenir !

Les objets pointent tous sur le prototype grâce à __proto__

Je ne parle pas d'instance.

Et new dans tout cela ?