Objets Javascript Mécanismes internes Le concept et la construction dobjets

Présentation au sujet: "Objets Javascript Mécanismes internes Le concept et la construction dobjets"— Transcription de la présentation:

1 Objets Javascript Mécanismes internes Le concept et la construction dobjets http://lti.epfl.ch/Documents/ObjetsJavascript.html

2 Structure interne Composant de base de Javascript F = function ( ) { this.a = 6 } F.constructor Function() {} F.prototype F.prototype.constructor F() { } lien interne sur le prototype den dessus x = new Fx.constructor function() { this.a=6 } x.prototype undefined x.a 6

3 Héritage simple F = function () { this.a = 15 this.arr = [] } G = function () { this.b = 22 } G.prototype = new F // arr entre dans le prototype !! // tableau partagé par tous les objets

4 Tableau dans un prototype F = function () { } F.prototype.arr = [] x = new F x.arr[0] = 12 // tous les objets voient la nouvelle valeur y = new F alert(y.arr[0])

5 arguments, call, apply function abc () { alert(arguments) // liste des arguments de la fonction alert(arguments.length) // nombre darguments } fct.call(obj, p1, p2) // équivalent à obj.fct(p1, p2) fct.apply(obj, args) // équivalent à obj.fct(args[0], args[1],...) arguments.length arguments

6 Héritage correct F = function () { this.a = 15 this.arr = [] } G = function (param) { F.call(this, param) // passe les paramètres this.b = 22 // + redéfinit arr dans l'objet } G.prototype = new F

7 G = function ( ) { this.b = 5 } G.prototype = new F G.prototype.constructor = G G.constructor Function() { } G.prototype object F G.prototype.constructor F() { } G() { } F = function ( ) {... } F.constructor Function() {} F.prototype F.prototype.constructor F() { } x = new Gx.constructor function() { this.b=5 } x.b 5 Héritage ( fonctionnement interne ) 1 2 3 4

8 Object et Function Object et Function sont des composants de base de Javascript qui sont automatiquement hérités lors de la construction de fonctions ou d'objets

9 Librairie Object.prototype.upper = function(that){ if ( arguments.length > 1 ) { var args = Array.prototype.slice.call(arguments, 1) ; this.upperConstructor.apply(that, args); } else { this.upperConstructor.call(that); } Function.prototype.extend= function(parent){ function dummy() {} dummy.prototype = parent.prototype; this.prototype = new dummy(); this.prototype.constructor = this; this.upperClass = parent.prototype; this.upperConstructor = parent }

10 Trucs !! function init() { alert( { "stroke-width" : 3 }["stroke-width"] ) } (function() { alert("Bonjour") })()