Prototypes (1/2) JavaScript: fundamentals, concepts, Every object - PDF document

Prototypes (1/2) JavaScript: fundamentals, concepts, Every object has always a prototype specifying object model its basic properties The prototype itself is an object Prof. Ing. Andrea Omicini If P is prototype of X, every property of P is II Facoltà di Ingegneria, Cesena also available as a property of X and thus Alma Mater Studiorum, Università di Bologna rede fi nable by X andrea.omicini@unibo.it The prototype is stored in a typically invisible system property called __proto__ Prototypes (2/2) Prototypes: architecture Object Every constructor has a building prototype prototype de fi ned in its prototype property __proto__ speci fi c It serves to de fi ne the properties of the properties for objects it builds the object By default, the building prototype coincides Constructor with the prototype, but while the latter is unchangeable, the former can be modi fi ed prototype __proto__ The modi fi ability of the building prototype building prototype prototype leads to prototype-based inheritance techniques (by default it is the properties same as the prototype) Prede fi ned prototypes Taxonomy of prototypes (1/2) Since constructors themselves are objects, they JavaScript makes available a series of prede fi ned constructors whose prototype is the have a prototype too prototype for all the objects of that kind A taxonomy of prototypes is created, rooted in the The prototype of the Function constructor is prototype for the Object constructor the prototype for every function The prototype of Object de fi nes the properties: The prototype of the Array constructor is the prototype of all the arrays constructor - the function which built the object The prototype of the Object constructor is toString() - a method to print the object the prototype of all user de fi ned objects valueOf() - returns the underlying primitive type built using the new operator Other prede fi ned constructors are Number , These properties are available for every object Boolean , Date , RegExp (functions and constructors included)

Taxonomy of prototypes (2/2) Experiments Object chain of prede fi ned prototypes... The prede fi ned method isPrototypeOf() tests if Function Array Number Boolean an object is included in another object’ s chain of prototypes Object.prototype.isPrototypeOf(Function) // true Constructors Special case: Object.prototype.isPrototypeOf(Array) // true constructor of Point The Point constructor is both a function and an object All functions and in particular all constructors are attached to the prototype of Function Function.prototype.isPrototypeOf(Point) // true That prototype de fi nes common properties (e.g. Object.prototype.isPrototypeOf(Point) // true arguments ) for every function (including constructors) and inherits properties from the prototype of Object (e.g. constructor ) The prototype property Example (1/2) The building prototype exists only for constructors Given the constructor and de fi nes properties for all the objects built by Point = function(i, j) { that constructor this.x = i To de fi ne a speci fi c building prototype you need to: this.y = j } de fi ne an object with desired properties playing we want to associate a prototype to it so that the prototype role getX and getY functions will be de fi ned assign that object to the prototype property of Note that the form function Point() does not the constructor make the Point identi fi er global, leading to The prototype property can be dynamically problems if the prototype is added from an changed but it affects only newly created objects environment where Point is invisible Example (2/2) Architecture Constructor De fi ne the constructor for the object which will BEFORE play the prototype role __proto__ prototype = building prototype GetXY = function() { prototype this.getX = function() { return this.x } this.getY = function() { return this.y } properties } Create it and assign it to the prototype property of the Point constructor Constructor myProto = new GetXY(); Point.prototype = myProto prototype __proto__ AFTER You can invoke getX and getY on newly created building prototype myProto prototype Point objects only getX properties p4 = new Point(7, 8); alert(p4.getX()) getY

Searching properties New experiments (1/2) Constructor constructor constructor __proto__ null Function Object prototype prototype __proto__ AFTER building prototype myProto prototype p4 constructor constructor getX properties constructor __proto__ getY Object myProto Point GetXY constructor __proto__ constructor prototype __proto__ speci fi c Searching order for properties properties for using the __proto__ property the object prototype Building prototypes: an New experiments (1/2) alternative approach Searching for p4 identity Instead of associating a new prototype to an myProto.isPrototypeOf(p4) // true existing constructor, it is possible to add new GetXY.prototype.isPrototypeOf(p4) // true properties to the existing constructor Point.prototype.isPrototypeOf(p4) // true Object.prototype.isPrototypeOf(p4) // true Point.prototype.getX = function() { ... } Function.prototype.isPrototypeOf(p4) // false Point.prototype.getY = function() { ... } Searching for myProto and GetXY identities The two approaches are not equivalent A change in the existing prototype affects Point.prototype.isPrototypeOf(myProto) // true Object.prototype.isPrototypeOf(myProto) // true also existing objects Function.prototype.isPrototypeOf(myProto) // false A new prototype affects only objects newly Point.prototype.isPrototypeOf(GetXY) // false created from then on Object.prototype.isPrototypeOf(GetXY) // true Function.prototype.isPrototypeOf(GetXY) // true Example (1/2) Example (2/2) Create a fi rst object Given the constructor p1 = new Point(1, 2) The function getX is not supported Point = function(i, j) { this.x = i p1.getX // returns undefined this.y = j } Modify the existing prototype we want to modify the existing prototype so that getX and getY functions will be included Point.prototype.getX = function() { return this.x } Point.prototype.getY = function() { return this.y } Note that those functions will work for existing Now getX works even on existing objects objects and for objects created from then on p1.getX() // returns 1

Prototype-based Expressing inheritance inheritance To express the idea of a subclass Student Chains of prototypes are the mechanism offered inheriting from an existing class Person you by JavaScript to support a sort of inheritance need to It is an inheritance between objects, not between classes as in object-oriented languages explicitly link Student.prototype with a new Person object When a new object is created using new , the system links that object with the building explicitly change the constructor property of prototype for the constructor used Student.prototype (which now would link the This is also true for constructors, which have Person constructor) to make it reference the Function.prototype as their prototype Student constructor Example (1/2) Example (2/2) Setting the chain of prototypes Base constructor Student.prototype = new Person() Person = function(n, y) { Student.prototype.constructor = Student this.name = n; this.year = y Test this.toString = function() { return this.name + ‘ was born in ‘ + this.year function test() { } } var p = new Person(“Andrew”, 1965) Derived constructor var s = new Student(“Luke”, 1980, “001923”) Student = function(n, y, m) { // displays: Andrew was born in 1965 this.name = n; this.year = y; this.matr = m; alert(p) this.toString = function() { // displays: Luke was born in 1980 and has return this.name + ‘ was born in ’ + this.year matriculation 001923 + ‘ and has matriculation ’ + this.matr } alert(s) } } Inheritance: an Inheritance: “ super ” in alternative (1/2) constructors Base constructor An alternative approach can be employed Person = function(n, y) { without touching prototypes: reusing by call this.name = n; this.year = y the base constructor function, simulating other this.toString = function() { return this.name + ‘ was born in ‘ + this.year languages, e.g. the use of super in Java } } Rectangle = function(a, b) { Derived constructor this.x = a; this.y = b this.getX = function() { return this.x } Student = function(n, y, m) { this.getY = function() { return this.y } Person.call(this, n, y); this.matr = m; } this.toString = function() { Square = function(a) { return this.name + ‘ was born in ’ + this.year + ‘ and has matriculation ’ + this.matr Rectangle.call(this, a, a) } } }