J.D.B. DIASOLUKA Nz.

Luyalu JavaScript Tome-

II

.apply() , .bind() , .borrow() et .call()

J AVA S C R I P T V O L . I I
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818

Les méthodes « . apply ( ) » , « bind ( ) , « borrow ( ) » et « . call ( ) » :

On a vu que les fonctions sont des objets tout faits. Elles ont en effet des
méthodes (par exemple les méthodes Apply , Call , Bind ) :

I. La méthode « Bind() » :

Elle permet de lier l’opérateur « this » à un environnement contextuel

précis.

Bind à la définition de l’event handler :

<button>Tirez un Candidat</button>
<textarea id="txtar" readonly></textarea>

<script type="text/javascript">
"use strict";

var candidat = {
profil :[
{ID:"Martinez G.", matric:11},
{ID:"Robinson T", matric:55},
///// {ID:"Melissa R", matric:00},
// SyntaxError: "0"-prefixed octal literals and
octal escape sequences are deprecated; for octal lit-
erals use the "0o" prefix instead [FIREFOX]
// Uncaught SyntaxError: Octal literals are not
allowed in strict mode. [YANDEX]
Variables & Functions 1 / 19 mardi, 22. janvier 2019 (8:14 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II

{ID:"Melissa R", matric:"00"},

{ID:"Bledina S", matric:33},
{ID:"Gregton B", matric:22}
],
clickHandler:function (event) {
// this est lié à candidat (bind dans appel).

// Sans ce bind this réfère event-handler.

let len = this.profil.length;
var randomNum = (Math.random () * len | 0);
document.getElementById("txtar").innerText =
(this.profil[randomNum].ID + " #" +
this.profil[randomNum].matric+
" ***Sur les "+len+" Prétendants.");
}
}

docu-
ment.getElementsByTagName("button")[0].addEventListen
er(
'click', candidat.clickHandler.bind(candidat),
false);
</script>

Exécution :

Tirez un Candidat
Robinson T #55 ***Sur les 5 Prétendants.

Bind au niveau de l’initialisation du pointeur

<script type="text/javascript">
"use strict";

// Candidats, variables globales

var place=" GLOBAL =window";
Variables & Functions 2 / 19 mardi, 22. janvier 2019 (8:14 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
var data = [
{ID:"Gregoire G", Matric:22},
{ID:"Bolivia G", Matric:33},
{ID:"Petgorje G", Matric:44}
]

var user = {
// Candidats, variables locales à objet user
place:" LOCAL =user",
data :[ // Propriété
{ID:"Belinda U", Matric:55},
{ID:"Nelson U", Matric:66},
{ID:"Lesmor U", Matric:77},
{ID:"Belafonté U", Matric:77},
{ID:"Zirgont U", Matric:88},
{ID:"Zamith U", Matric:99}
],

disp:function (event) { // Méthode

// Le même this dépend du bind.
const len=this.data.length;
var aleat = (Math.random () * len | 0);
window.cptr=0;

console.log ("******RETENU* = "+

this.data[aleat].ID + " " +
this.data[aleat].Matric);

console.log("Parmi "+len+" prétendants

("+this.place+") :");

this.data.map(function(dummy){console.log(++cptr+">
"+dummy.ID+" "+dummy.Matric)});
}
}

// Pointeur sur méthode disp de user

//// var dispVar = user.disp;
// En mode "use strict";

Variables & Functions 3 / 19 mardi, 22. janvier 2019 (8:14 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
// TypeError: this is undefined test.html:22:12
// disp file:///K:/DADET/PROGS/test.html:22:12
// <anonyme> file:///K:/DADET/PROGS/test.html:28:4

// Pointeur lié à global

dispVar = user.disp.bind(window);
dispVar (); // Candidats de window

// Pointeur lié à user

var dispVar = user.disp.bind(user);
dispVar (); // Candidats de user
</script>

Exécution :

******RETENU* = Petgorje G 44
Parmi 3 prétendants ( GLOBAL =window) :
1> Gregoire G 22
2> Bolivia G 33
3> Petgorje G 44

******RETENU* = Zirgont U 88
Parmi 6 prétendants ( LOCAL =user) :
1> Belinda U 55
2> Nelson U 66
3> Lesmor U 77
4> Belafonté U 77
5> Zirgont U 88
6> Zamith U 99

En mode standard (non «use strict»;) JS est très tolérant et laisse passer
l’instruction « var dispVar = user.disp; » qui était rejetée en
mode «use strict;». this est du scope global car c’est là que le pointeur à
la méthode disp() est défini.

Ici window englobe l’objet user.

<script type="text/javascript">
Variables & Functions 4 / 19 mardi, 22. janvier 2019 (8:14 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
// "use strict";

// Candidats, variables globales

var place=" GLOBAL =window";
var data = [
{ID:"Gregoire G", Matric:22},
{ID:"Bolivia G", Matric:33},
{ID:"Petgorje G", Matric:44}
]

var user = {
// Candidats, variables locales à objet user
place:" LOCAL =user",
data :[ // Propriété
{ID:"Belinda U", Matric:55},
{ID:"Nelson U", Matric:66},
{ID:"Lesmor U", Matric:77},
{ID:"Belafonté U", Matric:77},
{ID:"Zirgont U", Matric:88},
{ID:"Zamith U", Matric:99}
],

disp:function (event) { // Méthode

// Le même this dépend du bind.
const len=this.data.length;
var aleat = (Math.random () * len | 0);
window.cptr=0;

console.log ("******RETENU* = "+

this.data[aleat].ID + " " +
this.data[aleat].Matric);

console.log("Parmi "+len+" prétendants

("+this.place+") :");

this.data.map(function(dummy){console.log(++cptr+">
"+dummy.ID+" "+dummy.Matric)});
}
}

Variables & Functions 5 / 19 mardi, 22. janvier 2019 (8:14 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II

// Pointeur sur méthode disp de user

// En mode non "use strict";
var dispVar = user.disp;
dispVar (); // Candidats de window

// Pointeur liant this à global (window)

dispVar = user.disp.bind(window);
dispVar (); // Candidats de window

//Pointeur liant this à user

dispVar = user.disp.bind(user);
dispVar (); // Candidats de user
</script>

Exécution :

******RETENU* = Gregoire G 22
Parmi 3 prétendants ( GLOBAL =window) :
1> Gregoire G 22
2> Bolivia G 33
3> Petgorje G 44

******RETENU* = Bolivia G 33
Parmi 3 prétendants ( GLOBAL =window) :
1> Gregoire G 22
2> Bolivia G 33
3> Petgorje G 44

******RETENU* = Nelson U 66
Parmi 6 prétendants ( LOCAL =user) :
1> Belinda U 55
2> Nelson U 66
3> Lesmor U 77
4> Belafonté U 77
5> Zirgont U 88
6> Zamith U 99

Variables & Functions 6 / 19 mardi, 22. janvier 2019 (8:14 )

 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
II. La méthode « borrow » d’une fonction :

Ci-dessous l’objet « producer » et l’objet « user » sont de même niveau,

tous deux englobés dans l’environnement global, mais « producer » ne
possède pas la méthode de « user » pour traiter (afficher) ses propres
données. Au lieu de lier (BIND) la méthode « disp » de « user » à l’objet
« producer » comme ci-dessus, « producer » peut emprunter (BOR-
ROW) cette méthode à partir de « user » , dans l’acception que « produ-
cer » n’a pas déjà cette méthode comme propriété propre, qui serait écra-
sée:

La procédure est presque la même que ci-dessus (pour la partie de

droite), et que quand on définit une nouvelle propriété pour un objet
(pour la partie de gauche, mais au lieu d’une propriété ou une fonction
indépendante, on affecte à la nouvelle propriété celle d’un autre objet) :

<script type="text/javascript">
"use strict";

// Candidats, variables globales

var producer = {
place:" LOCAL =producer",
data : [
{ID:"Gregoire G", Matric:22},
{ID:"Bolivia G", Matric:33},
{ID:"Petgorje G", Matric:44}
]
}

var user = {
// Candidats, variables locales à objet user
place:" LOCAL =user",
data :[ // Propriété
{ID:"Belinda U", Matric:55},
{ID:"Nelson U", Matric:66},
{ID:"Lesmor U", Matric:77},
{ID:"Belafonté U", Matric:77},
{ID:"Zirgont U", Matric:88},
Variables & Functions 7 / 19 mardi, 22. janvier 2019 (8:14 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
{ID:"Zamith U", Matric:99}
],

disp:function (event) { // Méthode

// Le même this dépend du bind.
const len=this.data.length;
var aleat = (Math.random () * len | 0);
window.cptr=0;

console.log ("******RETENU* = "+

this.data[aleat].ID + " " +
this.data[aleat].Matric);

console.log("Parmi "+len+" prétendants

("+this.place+") :");

this.data.map(function(dummy){console.log(++cptr+">
"+dummy.ID+" "+dummy.Matric)});
}
}

// Pointeur liant this à user

var dispVar = user.disp.bind(user);
dispVar (); // Candidats de user

// Nouvelle Méthode de producer (producer.disp) =

// Pointeur sur la méthode user.disp()
producer.disp = user.disp.bind(producer);
producer.disp(); // Candidats de producer
</script>

Exécution :

******RETENU* = Zirgont U 88
Parmi 6 prétendants ( LOCAL =user) :
1> Belinda U 55
2> Nelson U 66
3> Lesmor U 77
4> Belafonté U 77
Variables & Functions 8 / 19 mardi, 22. janvier 2019 (8:14 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
5> Zirgont U 88
6> Zamith U 99

******RETENU* = Gregoire G 22
Parmi 3 prétendants ( LOCAL =producer) :
1> Gregoire G 22
2> Bolivia G 33
3> Petgorje G 44

Afficher la structure d’une fonction :

<script type="text/javascript">
"use strict";

/*1*/ function fct(){

console.log("function fct()")};
/*2*/ var fct2=function(){
console.log("var fct2=function()")};
/*3*/ let fct3 = _ => console.log(
"let fct3= _ =>");
fct3();
/*3b*/ _ => console.log("_ =>");
/*4*/ var fct4 = new Function(
console.log("var fct4 = new Function"));

/*5*/ var fct5 = (function(){

console.log("var fct5_1 = ((){})()")
}) (console.log("var fct5_2"));

/*6*/ !function(){
console.log("!function()")} // 2è appel
(console.log("!function()_1")) // 1è appel
(console.log("!function()_2")) // 3è appel
(console.log("!function()_3")); // Erreur
</script>

Variables & Functions 9 / 19 mardi, 22. janvier 2019 (8:14 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
Exécution :

let fct3= _ =>

var fct4 = new Function
var fct5_2
var fct5_1 = ((){})()
!function()_1
!function()
!function()_2

TypeError: (intermediate value)(...) is not a function

Dans la console :

fct()
length: 0
name: "fct"
prototype: Object { … }
__proto__: function ()

fct2()
length: 0
name: "fct2"
prototype: Object { … }
__proto__: function ()

fct3()
name: "fct3"
__proto__: function ()

fct4
anonymous()
arguments: null
caller: null
length: 0
name: "anonymous"
prototype: Object { … }
__proto__: function ()

Variables & Functions 10 / 19 mardi, 22. janvier 2019 (8:14 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
fct5
undefined

Console.log qui est un outils de développement (débogueur) n’affiche

pas de la même façon que les autres instructions JS d’affichage.

<script type="text/javascript">
function la_fct(p){
// Sans autre paramètre que le nom de la fonction,
// donne son Type (expensible), affiché comme poin-
teur
console.log(la_fct);

// Avec d'autres paramètres que le nom de la fonc-

tion,
// donne le Contenu = Code de la fonction.
console.log(p+" + "+la_fct);
}

function appeleur(){
la_fct("***ARGUMENT***",2)
}

appeleur();
</script>

Avec document.write :

Le code source de toutes les fonctions est affiché.

P.S.: nous avons ajouté un renvoi à la ligne avant ***ARGUMENT*** et
simplifié les commentaires.

function la_fct(p){
document.write(la_fct); // Type, dépliable
document.write(p+" + "+la_fct); // Contenu =
Code. }
Variables & Functions 11 / 19 mardi, 22. janvier 2019 (8:14 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II

***ARGUMENT*** + function la_fct(p){

document.write(la_fct); // Type, expansible
document.write(p+" + "+la_fct); // Contenu = Code. }

Avec console.log :

function la_fct()

***ARGUMENT*** + function la_fct(p){

// Sans autre paramètre que le nom de la fonction,
// donne son Type (expansible), affiché comme pointeur
console.log(la_fct);

// Avec d'autres paramètres que le nom de la fonction,

// donne le Contenu = Code de la fonction.
console.log(p+" + "+la_fct);
}

Exemple simple :

<script type="text/javascript">
var Pomme = {
couleur: "rouge",
poids: 50,
};
console.log(Pomme);
console.log("Notre pomme : " + Pomme);
</script>

Exécution :

Object {couleur: "rouge", poids: 50}

Notre pomme : [object Object]

Avec le nom d’un objet seul comme paramètre, console.log affiche selon
Variables & Functions 12 / 19 mardi, 22. janvier 2019 (8:14 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
les navigateurs, soit seulement le nom de l’objet comme pointeur qu’on
peut cliquer pour voir les détails de la structure de l’objet., soit directe-
ment ces détails.

Avec d'autres paramètres que le nom de l’objet seul, console.log donne

seulement la chaîne de caractères qui décrit l’élément (object Object
pour indiquer que l’objet en cours est une instance de l’objet Object),
car l’opérateur « + » agit comme opérateur de concaténation de chaînes
de caractères dès que l’un des opérande est une chaîne. Or la conversion
(transtypage = typecasting = type coercion = type conversion) d’un objet
en chaîne de caractères fait automatiquement appel à la méthode toS-
tring() de l’objet en cours, et quand celui-ci n’en dispose pas, elle ap-
pelle la toString() native de l’objet « Object » (le parent de tous les
objets que vous créez) qui n’affiche que ça.

Concernant le typecasting :

1. Dans les opérations arithmétiques les chaînes sont converties

("implied typecasting) en nombres ;

2. Dans les opérations de concaténation (toute addition impliquant

une chaîne de caractères) ce sont les autres types qui sont conver-
tis en chaîne de caractères.

Voyez donc ceci à la console :

"88"+77 -> "8877"

88+"77" -> "8877"
"88+77" -> "88+77"
88+77 -> 165
"Somme = " + 4 + 7 -> "Somme = 47"
"Somme = "+1*4+7 -> "Somme = 47"
"Somme = "+1*(4+7) -> "Somme = 11"
"Somme = "+(4+7) -> "Somme = 11"
"Somme = "+-(-4-7) -> "Somme = 11"
"Somme = "+eval(4+7) -> "Somme = 11"
Variables & Functions 13 / 19 mardi, 22. janvier 2019 (8:14 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
"Somme = "+eval(4)+eval(7) -> "Somme = 47"
"Somme = "+parseInt(4)+parseInt(7) -> "Somme =
47"

Et dans un code :

<script type="text/javascript"> "use strict";

let n1=prompt("Donnez un nombre",
Math.floor(Math.random()*100));
const n2=prompt("Donnez un auttre nombre",
Math.floor(Math.random()*100));
console.log(n1+" + "+n2+" = ");
console.log(n1 + n2);
console.log(parseInt(n1) + parseInt(n2));
console.log(eval(n1) + eval(n2));
let n1e=eval(n1), n2e=eval(n2);
console.log(n1e + n2e);
let n1p=parseInt(n1), n2p=parseInt(n2);
console.log(n1p + n2p);
</script>

31 + 23 = test.html:6:4
3123 (test.html:7:4) 54 (test.html:8:4)
54 (test.html:9:4) 54 (test.html:11:4)
54 (test.html:13:4)

Si vous voulez autre chose que ce que le Object.toString() natif de

l’objet Object (le parent de tous les autres objets) affiche, vous devez
donc l’implémenter dans votre en cours pour prévaloir sur (override)
celui (par défaut) de l’object Object.

Note :

object avec « o » minuscule = substantif générique.

Object avec « O » MAJUSCULE = Objet (structure de donnée) natif.

Implémentation d’une méthode toString() pour l’objet Pomme.

Variables & Functions 14 / 19 mardi, 22. janvier 2019 (8:14 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II

<script type="text/javascript">
Pomme = {
couleur: "rouge",
poids: 50,
toString:function(){
v= "Couleur = "+this.couleur+" ,
poids = "+this.poids;
return v;
}
}

// Pointeur sur Pomme

console.log(Pomme);
// Appel implicite de Pomme.toString()
console.log("Notre Pomme : " + Pomme);
// Appel explicite de Pomme.toString()
console.log("Notre Pomme : " + Pomme.toString());
</script>

Exécution :

Object { couleur: "rouge", poids: 50, toString: toString() }

Notre Pomme : Couleur = rouge , poids = 50
Notre Pomme : Couleur = rouge , poids = 50

Notez que la Console permet d’afficher (dérouler) tous les niveaux de la

structure de la fonction et de ses membres (attributs y compris les objets
qui la constituent).

Cliquons sur « Object { couleur: "rouge", poids: 50 } »

dans la console pour avoir ceci :

{…}
couleur: "rouge"
poids: 50
__proto__: Object { … }

Variables & Functions 15 / 19 mardi, 22. janvier 2019 (8:14 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
{…} symbolise un objet, puis vient son contenu (structure).

Voyons comment une fonction ordinaire est représentée dans la console :

<script type="text/javascript">
function notre_fct(p1,p2){
couleur= p1;
var poids= p2;
toString=function(){
v= "Coul = "+couleur+" , pds = "+poids
return v;
}
}

// Pointeur sur notre_fct

console.log(notre_fct);
console.log("==> notre_fct = "+notre_fct);
</script>

Exécution :

function notre_fct()

==> notre_fct = function notre_fct(p1,p2){

couleur= p1;
var poids= p2;
toString=function(){
v= "Coul = "+couleur+" , pds = "+poids
return v;
}
}

Dans la console, cliquons sur « function notre_fct() » et à

l’intérieur, sur « __proto__ » (__proto__ = prototype du constructeur)

notre_fct()
arguments: null
caller: null
Variables & Functions 16 / 19 mardi, 22. janvier 2019 (8:14 )
 J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
name: "notre_fct"
__proto__: ()
apply: function apply()
arguments: null
bind: function bind()
call: function call()
caller: null
constructor: function Function()
isGenerator: function isGenerator()
length: 0
name: ""
toSource: function toSource()
toString: function toString()
Symbol(Symbol.hasInstance): undefined
__proto__: Object { … }

Kinshasa, le mardi 22 janvier 2019 (8:14:07 AM8:14 ).

Mots-clés :
fonctions,curry,currying,redéfinition,fonction fermeture,closure,paramètre du
reste,blocs de code,réutilisables,fonctions nommées,fonctions ano-
nymes,expressions de fonctions immédiatement invo-
quées,eventHandler,affecter,variable,pointeur,script,types de fonction,syntaxes de
fonction.

Mercredi, 11. avril 2018 (23:34 [pm]).

Dernière mise à jour : mardi 22 janvier 2019 (8:14:07 AM).

DIASOLUKA Nz. Luyalu

Docteur en Médecine, Chirurgie & Accouchements
(1977),

Variables & Functions 17 / 19 mardi, 22. janvier 2019 (8:14 )

J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Informaticien-amateur, Programmeur et WebMaster.

Chercheur indépendant, autonome et autofinancé, bénévole,

sans aucun conflit ou lien d’intérêt ou contrainte promotion-
nelle avec qui qu’il soit ou quelqu’organisme ou institution /
organisation que ce soit, étatique, paraétatique ou privé, indus-
triel ou commercial en relation avec le sujet présenté.

+243 - 851278216 - 899508675 - 995624714 - 902263541 -

813572818

diasfb@mail2world.com

Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-
Creation

D’autres publications pouvant aussi intéresser :

• https://www.scribd.com/document/377036251/Le-Dosage-Des-
Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-Hasard-Des-
Thermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-Introduction-
Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-Jesus-Christ-
Pour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-visuelle-
Variables & Functions 18 / 19 mardi, 22. janvier 2019 (8:14 )
J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-
II
angulaire
• https://www.scribd.com/document/375349851/La-variable-This
• https://www.scribd.com/document/375024162/Fonctions-Imbriquees-
en-JS
• https://www.scribd.com/document/374789297/Format-Interne-Des-
Objets-JavaScript
• https://www.scribd.com/document/374788758/Iterations-en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-
de-La-Creation
• https://www.scribd.com/document/374597969/Nouvelle-Formule-d-
IMC-indice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/Property-Descriptors
• https://www.scribd.com/document/373833282/l-Objet-Global-Window
• https://www.scribd.com/document/372665249/Javascript-Tome-II
• https://www.scribd.com/document/355291488/motilite-oculaire-2
• https://www.scribd.com/document/355291239/motilite-oculaire-I
• https://www.scribd.com/document/355290248/Script-d-Analyses-Des-
Reflexes-Pupillomoteurs
• https://www.scribd.com/document/321168468/Renseignements-Id-et-
Anthropometriques
• https://www.scribd.com/document/320856721/Emission-31-Jul-2016
• https://www.scribd.com/document/318182982/Complication-Visuelle-
du-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-Entre-
Oxymetrie-Et-Type-Respiration
• https://www.scribd.com/document/315746265/Classification-Des-
Medicaments
• https://www.scribd.com/document/315745909/Incongruences-
Heresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/Rapport-Entre-
Oxymetrie-Et-Type-Respiration

Variables & Functions 19 / 19 mardi, 22. janvier 2019 (8:14 )