client-side web technologiesjmussits/08724/lectures/8/js2.pdf · prototypes (continued) • when a...
TRANSCRIPT
![Page 1: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/1.jpg)
Client-Side Web TechnologiesJavaScript Part II
![Page 2: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/2.jpg)
Object Constructors• Any function called with the new operator acts as a
constructor function
• When a constructor is called the following takes
place:
• A new object instance is created
• The this variable inside the constructor function is
assigned to point to the newly created instance
• Code inside the constructor is executed
• The new instance is returned
![Page 3: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/3.jpg)
Prototypes• A big disadvantage of constructors is that each
method of an object (being a function and functions
are objects) is created once for each instance
• A prototype is an object containing properties and
methods that are shared among all instances of a
reference type
• Each constructor function has a prototype
property that points to its prototype object
• Each prototype object has a constructor
property that points back to the constructor on
which it is a property
![Page 4: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/4.jpg)
Prototypes (continued)• Each instance of an object created with a
constructor gets an internal pointer to the
constructor’s prototype
• In ECMAScript it is referred to as [ [ Prototype ] ]
• In ECMAScript it can be accessed via the Object.getPrototypeOf() method
• The isPrototypeOf() method can be used to
determine if an instance’s prototype pointer points to a
certain prototype
• Examples at: http://csw08724.appspot.com/Prototypes.html
![Page 5: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/5.jpg)
Prototypes (continued)• When a property is accessed on an object for reading
• The object instance is checked to see if it exists
• Otherwise the prototype is checked to see if it exists on the
prototype
• If the prototypes are chained, then the search will continue all
the way along the chain until the property is found or the end is
reached
• When a property is added to an instance it shadows any
property on the prototype with the same name
• So we can “override” the prototype
• The hasOwnProperty() method can be used to
determine if a property or method exists on the instance
![Page 6: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/6.jpg)
![Page 7: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/7.jpg)
![Page 8: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/8.jpg)
![Page 9: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/9.jpg)
![Page 10: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/10.jpg)
![Page 11: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/11.jpg)
![Page 12: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/12.jpg)
![Page 13: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/13.jpg)
![Page 14: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/14.jpg)
![Page 15: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/15.jpg)
![Page 16: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/16.jpg)
![Page 17: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/17.jpg)
![Page 18: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/18.jpg)
![Page 19: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/19.jpg)
![Page 20: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/20.jpg)
![Page 21: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/21.jpg)
![Page 22: Client-Side Web Technologiesjmussits/08724/lectures/8/JS2.pdf · Prototypes (continued) • When a property is accessed on an object for reading •The object instance is checked](https://reader034.vdocuments.site/reader034/viewer/2022051901/5ff0018abdbb5040e620b342/html5/thumbnails/22.jpg)
Embracing ECMAScript’s Prototypal Nature
• Some people advocate not trying to force classical
inheritance patterns on ECMAScript objects
• No new operator
• No constructor functions
• We create new objects based on existing ones and
add features to the new objects
• See the PurePrototypes.html example