INTRODUCTION TO JAVASCRIPT OBJECTS Fall 2009 CSCI 3110 Advanced Topics in Web Development Topics Object oriented programming in JavaScript Factory Pattern Constructor t Ptt Pattern Prototype Pattern Dynamic Prototype Pattern 1
Classless Objects JavaScript has no class definitions. Objects are created based on the language defined Object construct. To create multiple objects based on a desired object structure, functions written to guide instantiation. http://einstein.etsu.edu/~pittares/csci3110/examples/6 1.htm JavaScript's class free object oriented structure is a frequently criticized iii element. Factory Pattern One way to create multiple objects with the same properties and functions is to use the Factory Pattern design pattern. Function takes in property values, creates an object, assigns properties and functions to the object, and returns the object. The function becomes an "object factory". http://einstein.etsu.edu/~pittares/csci3110/examples/6 2.htm Use identifiers beginning with capital letters for objects (only) to denote distinction from identifiers used with primitive data types. 2
Constructor Pattern Another alternative is the Constructor Pattern. With this pattern, an object is created (using new) in the function call. http://einstein.etsu.edu/~pittares/csci3110/examples/6 3.htm The constructor function name is the name of the desired object. this is used in parameter/property and function assignment. instanceof instanceof is a JavaScript operator used to see if a particular object is an instance of (an instantiation of) a particular objectpattern. An object created with the Constructor Pattern is an instanceof both Object and the specified constructor name. An object created with the Factory Pattern is an instanceof Object only. http://einstein.etsu.edu/~pittares/csci3110/examples/6 3a.htm 3
Prototype Pattern Another alternative is the Prototype Pattern. With this pattern, memory and resources are used more efficiently as multiple objects share resources. The Constructor function body is (typically) null. and functions are assigned to the constructed object's prototype. prototype is a default property within an object that contains properties and methods available to all instances ofthat object. This technique allows defining 'default values' for objects and object functions. The object creation call does not specify property values. http://einstein.etsu.edu/~pittares/csci3110/examples/6 4.htm Prototype pattern With the Prototype Pattern, value assignments to the instantiated (or instance) object shadow property values in the prototype (they do not replace them). (Creating a 'search order'.) delete can be used to remove a property/value pair from an object. http://einstein.etsu.edu/~pittares/csci3110/examples/6 5.htm 4
Comparing the patterns Factory Pattern and Constructor Pattern Object Prototype Pattern Prototype Object Object Object Object Overridden Overridden Overridden Overridden tostring Each object contains a language defined function tostring which outputs the object as a String. Unless overridden in our object instance, this will output "[object Object]". http://einstein.etsu.edu/~pittares/csci3110/examples/6 5a.htm This function can/should be overridden based on our desire of how the object should be represented as a string. http://einstein.etsu.edu/~pittares/csci3110/examples/6 5b.htm 5
Test your skills In the prototype or the instance? The in operator checks to see whether a specified property is present within an object. http://einstein.etsu.edu/~pittares/csci3110/examples/6 6.htm / / / / object.hasownproperty("x") checks whether property x is present in the object instance. (i.e. it is not there because of the prototype) http://einstein.etsu.edu/~pittares/csci3110/examples/6 7.htm 6
Checking for, enumerating properties The for in loop can be used to enumerate all properties and functions present in an object. http://einstein.etsu.edu/~pittares/csci3110/examples/6 8.htm / / / / http://einstein.etsu.edu/~pittares/csci3110/examples/6 9.htm http://einstein.etsu.edu/~pittares/csci3110/examples/6 10.htm Ordering of properties within anobject is not fixed. Test your understanding 7
Property enumeration When properties of an object are enumerated, some properties are not listed. Somebuilt in properties aredesignated as nonenumerable. Examples include tostring and others. Browsers are inconsistent in their behavior of these non enumerable elements. In IE, if you override the non enumerable property with your own, your override is still non enumerable. In Opera, Safari, and Firefox the behavior varies depending on property. http://einstein.etsu.edu/~pittares/csci3110/examples/6 11.htm Dynamic Prototype Pattern 2 notable disadvantages of using the "pure" Prototype Pattern: 1. Cannot instantiate and set properties in one line. 2. As all instances are references to the prototype, if the prototype contains an object, this single object is shared among all instances. Solution: use a combination of the Constructor and Prototype Patterns the Dynamic Prototype Pattern. set in the Constructor pattern fashion. Each function set on the prototype if notalreadyin existence. http://einstein.etsu.edu/~pittares/csci3110/examples/6 12.htm http://einstein.etsu.edu/~pittares/csci3110/examples/6 13.htm 8
Object Patterns Benefit of object patterns can learn syntax/pattern and reuse with confidence. Other object patterns exist itof varying complexity. Topics Object oriented programming in JavaScript Factory Pattern Constructor t Ptt Pattern Prototype Pattern Constructor/Prototype Pattern 9
Copyrights Presentation prepared by and copyright of Dr. Tony Pittarese, East Tennessee State University, Computer and Information Sciences Dept. (pittares@etsu.edu) Podcast lecture related to this presentation available via ETSU itunesu (http://www.etsu.edu/itunesu/ ). Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iseries, pseries, xseries, zseries, eserver, z/vm, z/os, i5/os, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. Oracle is a registered trademark of Oracle Corporation. HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C, World Wide Web Consortium, Massachusetts Institute of Technology. Java is a registered trademark of Sun Microsystems, Inc. JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP Business ByDesign, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects S.A. in the United States and in other countries. Business Objects is an SAP company. ERPsim is a registered copyright of ERPsim Labs, HEC Montreal. Other products mentioned in this presentation are trademarks of their respective owners. 10