BREF APERÇU SUR LES OBJETS

Luyalu Dr Diasolika

Description

Les OBJETS en JS :
Les OBJETS sont un type de données (ensemble d’entités) comportant leurs propres propriétés, méthodes et d’autres objets dont l’objet prototype. C’est une collection de données (des paires de « clés [des « symboles »] auxquelles on a associé ou assigné des valeurs »).
TYPES SIMPLES en JS :
Un autre type de données que les objets est les PRIMITIVES (types simples vs objets [de haut-niveau]) :
Undefined, Null, Boolean (qui n’a que deux valeurs : true ou false), Number (dont le NaN = Not A Number), String.
NOTE :
A primitive value is a datum that is represented directly at the lowest level of the language implementation (ECMA-262 Edition 5.1).

Informations

• Publié par: diasoluyalu
• Publié le: 07 novembre 2018
• Nombre de lectures: 1
• Langue: Français

Extrait

J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
JAVASCRIPT(ProgrammationInternet)VOL.V
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.
CHAPITRE 5 : BREF APERÇU SUR LES OBJETS :
Les OBJETS en JS :
Les OBJETS sont un type de données (ensemble d’entités)
comportant leurs propres propriétés, méthodes et d’autres
objets dont l’objet prototype. C’est une collection de données
(des paires de « clés [des « symboles »] auxquelles on a
associé ou assigné des valeurs »).
TYPES SIMPLES en JS :
Un autre type de données que les objets est les PRIMITIVES
(types simples vs objets [de haut-niveau]) :
Undefined, Null, Boolean (qui n’a que deux valeurs : true
ou false), Number (dont le NaN = Not A Number), String.
NOTE :
A primitive value is a datum that is represented directly at
the lowest level of the language implementation (ECMA-262
Edition 5.1).
Quelques OBJECTS JS :
window | document | history | navigator | form |
...J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
Quelques TYPES d’Objects en JS :
Array | Boolean | Date | Error | Function | JSON
| Math | Number | Object | RegExp | String | Map
| Set | WeakMap | WeakSet | ...
Les OBJECTS JavaScript intrinsèques (built-in) possédant
la méthode « valueOf() » :
Returns the array instance.Array
Boolean The Boolean value.
Date The stored time value in milliseconds since
midnight, January 1, 1970 UTC.
Function The function itself.
Number The numeric value.
Object The object itself. This is the default.
String The string value.
Les OBJECTS JavaScript intrinsèques (built-in) ne
possédant pas la méthode « valueOf() » :
Math et Error.
Les objets JS (ci-dessus) ne sont pas objets DOM
(ci-dessous) :
Anchor | document | Event | Form , Form Input |
Frame , Frameset , IFrame | Image | location |
navigator | Option et Select | Screen | Table ,
TableHeader , TableRow , TableData | window
Quelques comparaisons avec les objets :
var p = {}; // Définition Hash object.
> p == 0 -> false // p n'a pas la valeur zéro.
> p == null -> false // p n'est pas null
Bref aperçu sur les objets 2 / 40 mercredi, 7. novembre 2018J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
> p == undefined -> false // p n'est pas undefined
> p == "{}" -> false // p n'est pas string
> p == {} -> false // Deux pointeurs différents
Quatre façons de créer un objet en JS :
1 Avec un constructeur que vous créez (objet-fonction),
2 Par assignation d'un littéral (Hash Literal ou object literal =
littéral d’objet).
3 Avec l’objet Object.
4 Avec la méthode Object.create()
1. Création d’objet-fonction :
Avec une fonction « constructeur » (=gabarit=modèle).
Un constructeur est une fonction comme les autres mais qui permet
avec l’opérateur new la création ET l’initialisation simultanée de toutes
ou quelques propriétés du nouvel objet créé (Réciproquement une
fonction est un objet comme les autres).
<script type="text/javascript"> "use strict";
let bool = new Boolean(true);
console.log(bool.valueOf()); // true
console.log(typeof bool); // object
let boolp1 = bool.toString();
console.log(boolp1); // true
console.log(typeof boolp1); // string
let boolp2 = toString(bool);
console.log(boolp2); // [object Undefined]
console.log(typeof boolp2); // string
console.log(boolp1==boolp2); // false
console.log(boolp1===boolp2); // false
</script>
Comme avec une fonction, on peut accéder directement aux variables
globales d’un constructeur, sauf l’opérateur « this »
La fonction « constructeur » est invoquée avec l’opérateur « new » et
pas directement. Un appel du constructeur sans l’opérateur « new » fait
un simple appel à sa fonction sans instanciation (création d’instance).
Bref aperçu sur les objets 3 / 40 mercredi, 7. novembre 2018J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
Toute fonction « constructeur » doit donc être appelée avec l’opérateur
« new » qui retourne un nouvel objet.
Notez l’opérateur « this », le point-virgule « ; » pour terminer la
définition des propriétés, et le signe égale « = » pour initialiser les propriétés.
Quant à l’opérateur « this », sa signification varie selon les contextes :
1. « this » dans un constructeur représente l’objet et permet de définir
ses propriétés et méthodes.
2. « this » dans une référence à une des propriétés de l’instance d’un
objet déjà créé représente cet objet.
3 « this » vaut undefined dans les appels de fonctions stricts.
4. « this » représente le contexte de l'objet si la fonction est appelée
comme une méthode,...).
5. Dans un élément HTML, il représente l’élément contenant.
6. Dans une fonction, il représente l’objet window en mode standard,
mais n’est pas reconnu en mode « use strict; ».
7. Dans l’espace globale, il représente l’objet window.
8. Dans le bloc de sa définition :
a) Avant le début d’une création d’objet : l’objet window.
b) Dès le début de la création : l’objet en cours de création.
« this » dans un objet appelé comme fonction ordinaire en mode
standard (non strict) :
<script type="text/javascript">
var dObj = function(){
console.log (this);
return this;
};
// Appel de dObj() comme fonction
dObj();
</script>
Bref aperçu sur les objets 4 / 40 mercredi, 7. novembre 2018J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
Exécution :
Window file:///K:/DADET/PROGS/test.html
Window
dObj: function dObj()
[default properties]
__proto__: WindowPrototype { … }
« this » dans un objet appelé comme fonction ordinaire en mode «use
strict»; :
<script type="text/javascript">
"use strict";
var dObj = function(){
console.log (this);
return this;
};
// Appel de dObj() comme fonction
dObj();
</script>
Exécution :
undefined test.html:5:5
« this » dans un objet appelé comme fonction constructeur en mode
standard ou en mode «use strict»; :
<script type="text/javascript">
"use strict";
var dObj = function(){
console.log (this);
return this;
};
// Appel de dObj() fonction constructeur
// Instanciation de dObj()
var iObj = new dObj();
</script>
Exécution :
Object { }
Bref aperçu sur les objets 5 / 40 mercredi, 7. novembre 2018J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
{}
__proto__: {…}
constructor: function dObj()
__proto__: Object { … }
« this » dans une fonction ordinaire contenant un object literal :
<script type="text/javascript">
console.log(this);
console.log("==> This ds Espace Global = ");
function obj_Constr(width, length) {
console.log("==> This ds obj_Constr = ");
console.log(this);
console.log("this = "+this);
return { // object literal
width: width || 0,
length: length || 0,
toString: function() {
console.log("==> This ds oConstr-objet-toString() =
");
console.log(this);
// console.log("this = "+this); /: too much recursion
return this.width + this.length;
}
};
}
var perim = obj_Constr(null,5);
console.log("Périmètre = " + perim.toString());
r=perim instanceof obj_Constr
console.log("perim instanceof obj_Constr = "+r);
console.log("perim instanceof obj_Constr = "+
eval(perim instanceof obj_Constr));
</script>
<body>
<input type="button"
onkeyup="console.log(this) ,
console.log('==> this = '+this)"
value="ivalue">
</body>
Exécution :
Window file:///H:/DADET/PROGS/this.html
Bref aperçu sur les objets 6 / 40 mercredi, 7. novembre 2018J.D.B. DIASOLUKA Nz. Luyalu JavaScript Tome-V
==> This ds Espace Global =
==> This ds obj_Constr =
Window file:///H:/DADET/PROGS/this.html
this = [object Window]
==> This ds oConstr-objet-toString() =
Object { width: 0, length: 5, toString: toString() }
Périmètre = 5
perim instanceof obj_Constr = false
perim instanceof obj_Constr = false
<input onkeyup="console.log(this) ,\n
console.log('==> this = '+this)" value="ivalue"
type="button">