Best Guide for Javascript Objects
- 1. ObjectOriented Programmingin JavaScript Dr. Charles Severance www.wa4e.com http://www.wa4e.com/code/javascript-objects http://www.wa4e.com/code/javascript-objects.zip
- 2. Definitions • Class - atemplate- Dog • MethodorMessage-A definedcapabilityofa class - bark() • Attribute- Adefineddataitem in aclass -color • Object orInstance- Aparticularinstance ofa class - Lassie Image CC-By 2.0: https://www.flickr.com/photos/dinnerseries/23570475099
- 3. Terminology:Class Defines theabstractcharacteristicsof athing(object), includingthething'scharacteristics (its attributes,fields,orproperties)and thething’sbehaviors (the thingsit can do,ormethods, operations,orfeatures).One might saythataclass is ablueprint orfactorythatdescribes the natureof something.Forexample,the class Dog wouldconsist of traitssharedbyalldogs,such as breedandfurcolor(characteristics), andthe abilitytobarkandsit (behaviors). http://en.wikipedia.org/wiki/Object-oriented_programming
- 4. Terminology:Class http://en.wikipedia.org/wiki/Object-oriented_programming Apattern(exemplar) of aclass. The class of Dogdefines all possible dogsbylistingthe characteristics andbehaviors theycan have;the object Lassieis one particulardog,with particularversions ofthe characteristics. ADoghas fur; Lassiehasbrown-and-whitefur.
- 5. Terminology:Instance Onecan have aninstance ofa class oraparticularobject.The instanceis theactualobject created atruntime.In programmerjargon,the Lassieobject is aninstanceof theDogclass.The set of values ofthe attributesof aparticularobject is calledits state.The object consists of state andthebehaviorthat’sdefinedin the object’s class. Object andInstance areoften used interchangeably. http://en.wikipedia.org/wiki/Object-oriented_programming
- 6. Terminology:Method Anobject’s abilities. In language,methods areverbs. Lassie,beingaDog,has theabilityto bark. Sobark() is oneofLassie’s methods. Shemayhave other methods as well,forexample sit() or eat() orwalk()orsave_timmy(). Within theprogram,usinga methodusuallyaffectsonly one particularobject;allDogs canbark,butyouneed onlyoneparticulardogto dothebarking Method andMessage areoften used interchangeably. http://en.wikipedia.org/wiki/Object-oriented_programming
- 7. Objects in JavaScript • The OO patterninJavaScriptis alittledifferent. • The functionis indeed astoreandreuse pattern. • Thefunctionkeywordreturnsavaluewhich is thefunctionitself - itmakes a function!
- 8. First-ClassFunctions http://en.wikipedia.org/wiki/First-class_function In computer science, a programming language is said to have first-class functions if it treats functions as first-class citizens. Specifically, this means the language supports passing functions as arguments to other functions, returning them as the values from other functions, and assigning them to variables or storing them in data structures.
- 10. function PartyAnimal() { this.x = 0; this.party = function () { this.x = this.x + 1; console.log("So far "+this.x); } } an = new PartyAnimal(); an.party(); an.party(); an.party(); This is thetemplate formaking PartyAnimalobjects. Each PartyAnimalobject has a bit ofdata. Each PartyAnimalobject has abit of code. CreateaPartyAnimalobject Tell the object torunthe party() code. js01.htm
- 11. an x: party() function PartyAnimal() { this.x = 0; this.party = function () { this.x = this.x + 1; console.log("So far "+this.x); } } an = new PartyAnimal(); an.party(); an.party(); an.party(); js- 01.htm
- 13. Object Life Cycle • Objects arecreated,used, anddiscarded • Constructorsareimplicit in JavaScript- natural • Aconstructorina class is a special blockof statementscalled whenan object is created • Destructors arenotprovidedby JavaScript http://en.wikipedia.org/wiki/Constructor_(computer_science)
- 14. js03.htm function PartyAnimal() { this.x = 0; console.log("In the 'constructor'"); this.party = function () { this.x = this.x + 1; console.log("So far "+this.x); } } an = new PartyAnimal(); an.party(); an.party(); an.party();
- 15. Many Instances • Wecan createlots ofobjects -the class is thetemplate forthe object. • Wecan storeeach distinct object inits own variable. • Wecall this havingmultiple instances of thesame class. • Each instancehas its owncopy ofthe instance variables.
- 16. function PartyAnimal(nam) { this.x = 0; this.name = nam; console.log("Built "+nam); this.party = function () { this.x = this.x + 1; console.log(nam+"="+this.x); } } s = new PartyAnimal("Sally"); s.party(); j = new PartyAnimal("Jim"); j.party(); s.party(); Constructorscanhaveadditional parameters. Thesecanbeusedtoset up instancevariablesforthe particular instanceofthe class(i.e., forthe particularobject). js04.htm
- 17. s x: name: j x: name: function PartyAnimal(nam) { this.x = 0; this.name = nam; console.log("Built "+nam); this.party = function () { this.x = this.x + 1; console.log(nam+"="+this.x); } } s = new PartyAnimal("Sally"); s.party(); j = new PartyAnimal("Jim"); j.party(); s.party(); js04.ht m
- 18. Definitions • Class - atemplate- Dog • MethodorMessage-A definedcapabilityofa class - bark() • Object orInstance- Aparticularinstance ofa class - Lassie • Constructor- Amethod which is called when theinstance /object is created
- 19. Summary • The key forthis lecture is tounderstandhowtoreadOO documentationfor JavaScriptandhowtouse objects. • Buildingbrandnewcomplex objects is more advanced. • Itis importanttoremember thatJavaScriptuses objects as its “Associative Array”.
- 20. Acknowledgements / Contributions These slides are Copyright 2010- Charles R. Severance (www.dr-chuck.com) as part of www.wa4e.com and made available under a Creative Commons Attribution 4.0 License. Please maintain this last slide in all copies of the document to comply with the attribution requirements of the license. If you make a change, feel free to add your name and organization to the list of contributors on this page as you republish the materials. Initial Development: Charles Severance, University of Michigan School of Information Insert new Contributors and Translators here including names and dates ContinuenewContributorsandTranslatorshere
- 21. Additional Source Information • “SnowmanCookieCutter”byDidriksislicensedunderCCBY https://www.flickr.com/photos/dinnerseries/23570475099 • PhotofromthetelevisionprogramLassie.Lassiewatchesas Jeff(TommyRettig)worksonhisbikeisPublicDomain https://en.wikipedia.org/wiki/Lassie- /media/File:Lassie_and_Tommy_Rettig_1956.JPG
Editor's Notes
- #21: Note from Chuck. Please retain and maintain this page as you remix and republish these materials. Please add any of your own improvements or contributions.