Dr. Charles W. Kann III ckann@comcast.net JavaScript Objects Dr. Charles W. Kann III ckann@comcast.net

Overview What are JavaScript Objects? What are prototypes?

What are JavaScript Objects?

First Thing… Forget almost everything (80%) you learned about objects in Java. JavaScript is a prototype language. It has objects, but not in the Java sense. https://en.wikipedia.org/wiki/JavaScript https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript https://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain http://javascript.info/tutorial/constructor http://stackoverflow.com/questions/9267157/why-is-it-impossible-to-change-constructor-function-from-prototype http://stackoverflow.com/questions/5030739/javascript-how-to-define-a-constructor

The first half of this class will: Will implement simple objects that can be serialized to a JSON object. Try to avoid too much talk of how prototypes and closures work, but cover enough that you can use it and identify when it is used. Explain how to do OOP in JavaScript (w/o inheritance, which I will never need anyway). Note that this is definitely not a class in JavaScript.

Simple Global Objects An object in JavaScript is any unordered collection of key-value pairs. If it’s not a primitive (undefined, null, boolean, number or string) it’s an object. The most basic type of object is one which does not have a constructor function, and so exists as a global variable (only one instance, so kind-of like a java class used as an object(?) It is not really a singleton…). Functions are assigned to the object. These functions can be assigned when the object is created, or later.

How to use simple global objects Global objects can efficiently add properties to the object itself, so no prototype is created. The prototype of all global objects is Object. This is the [[prototype]] property of the object. The prototype property is the names of property, not the real property. To get the real Prototype property use obj.getPrototypeOf(object).

Simple Object 1 fname: "Chuck", lname: "Kann", debug: function() { var Chuck = { fname: "Chuck", lname: "Kann", debug: function() { console.log(this.fname + " " + this.lname); } Chuck.debug();

Simple Object 1 fname: "Chuck", lname: "Kann", } var Chuck = { fname: "Chuck", lname: "Kann", } // Adding property to object prototype Chuck.debug = function () { console.log(this.fname + " " + this.lname); Chuck.debug();

The problem with this type of object The problem with this type of global object is that you can only create one of them. It is more of a class definition. We will use this anonymous object a lot, but not to define objects. It will be used to define the state of an object, or to define properties.

JSON objects JavaScript Object Notation (JSON) is a way to externally represent JavaScript objects. JSON does not natively support functions, just property-value pairs. Because functions are first-class objects in JavaScript, we could support them with JSON by evaluating string on input… But gosh, why? And what a security nightmare. (I know there are reasons to support functions, but we will not look at them).

JSON Example var Chuck = { fname: "Chuck", lname: "Kann", debug: function() { console.log(this.fname + " " + this.lname); } alert(JSON.stringify(Chuck)); // note: no function

Are global object useful? Mostly no … We need to create instances of the objects. So we will have the new operator… OOP can be implemented using a prototype or a closure http://stackoverflow.com/questions/111102/how-do-javascript-closures-work?rq=1 http://stackoverflow.com/questions/3564238/object-oriented-javascript-with-prototypes- vs-closures http://stackoverflow.com/questions/3029421/how-to-preserve-the-state-of-javascript- closure

Objects using Prototype In the next two slides, objects will be created using the JavaScript functions “this” keyword. This is what I understand to be defining objects using prototypes… I could be wrong, but the pattern is common. The Person function is called a constructor function, and (for now) you can think about it as an object constructor (don’t get too comfortable thinking about JavaScript like Java though). The difference is how we call the constructor.

Simple Object Definition function Person(fname, lname) { this.fname = fname; this.lname = lname; } Person.prototype.age = 59; Person.prototype.debug = function () { console.log(this.fname + " " + this.lname + " " + this.age); }; var Chuck = new Person("Chuck", "Kann"); var Patty = new Person("Patty", "Jordan"); Patty.age = 58; Chuck.debug(); Patty.debug();

Object Definition with optional parameters function Person(options) { this.fname=""; this.lname=""; this.age=undefined; for (var prop in options) { this[prop] = options[prop]; } Person.prototype.debug = function () { console.log(this.fname + " " + this.lname + " " + this.age); }; var Chuck = new Person({fname:"Chuck", lname:"Kann", age: 59}); var Patty = new Person({fname:"Patty", lname:"Jordan"}); Chuck.debug(); Patty.debug();

Making an object a string If we have the object, we can make it a string easily by calling JSON.stringify. A JSON object can be parsed to a global object by calling JSON.parse. Note the object does not have a type (literally a constructor). The next example fixes that by creating a variable called “instanceType”, and creating a variable of this type by calling the constructor function with the JSON object to provide the properties.

JSON Example - Object function Person(options) { this.instanceType = "Person"; this.fname = ""; this.lname = ""; this.age = undefined; for (var prop in options) { if (!this.hasOwnProperty(prop)) console.log("Property " + prop + " not recognized in object " + this.instanceType); this[prop] = options[prop]; } this.printFirstName = function () { console.log("First name = " + this.fname);

JSON Example – getObjectFromJSON function getObjectFromJSON(string) { parsedObject = JSON.parse(string); objType = parsedObject.instanceType; return new window[objType](parsedObject); }

JSON Example – Creating, Reading, and Writing Object // create a person object, and show that the printFirstName function is accessible. chuck = new Person({fname: "Chuck", lname: "Kann", age: 59}); chuck.printFirstName(); // Note that there is no encapsulation chuck.fname="Anything else"; // make the object a JSON string, and then parse the string. // the obj.constructor is set by the getObjectFromJSON call. jsonObj = JSON.stringify(chuck); newChuck = getObjectFromJSON(jsonObj); // Show that this gets the correct object by calling the method of the object. newChuck.printFirstName();

Encapsulation and Information Hiding These definitions are great, but as seen in the previous example, there is no Encapsulation or Information Hiding. To provide Encapsulation and Information Hiding, remember that JavaScript is function scoped. Local variables in the function are not visible outside of the function. However using closure, variables defined in a function are available in functions defined inside of another function, even after the enclosing function has exited!

Closure The problem of closure existed in Java in anonymous inner classes, for example listeners. It was solved by making method local variables “final” so that they could be copied to the listener class. Closure is sort of the same thing. Method local variables are copied to a “closure stack” which is not deallocated after the method exits (it is sort of like a heap allocation). Let’s look at an example to see if it will make more sense…

Closure Object Person Definition function Person(options) { var instanceType = "Person"; var fname=""; var lname=""; var age=undefined; for (var prop in options) { if (prop == "fname") fname = options[prop]; else if (prop == "lname") lname = options[prop]; else if (prop == "age") age = options[prop]; else this[prop] = options[prop]; } this.printFirstName = function () { console.log("First name = " + fname); this.printLaastName = function() { console.log("Last name = " + lname); this.printAge = function() { console.log("Age = " + age); return this; // Just to be explicit

Closure Object Usage chuck = new Person({fname: "Chuck", lname: "Kann", age: 59}); chuck.printFirstName(); patty = new Person({fname: "Patty", lname: "Jordan", age: 58}); // Note that now there is encapsulation patty.printFirstName(); // works chuck.printFirstName(); // works thanks to closure patty.printAge(); chuck.printAge(); console.log(chuck.fname); // does not work // But what you have is no longer the object. It is functions that have accessible // to object fields through closure... jsonObj = JSON.stringify(chuck); alert(jsonObj);

Where did the object go? We have information hiding and encapsulation, but we lost the object… To get it back, we will use our old friend an anonymous class and a pattern called an Immediately-Invoked Function Expression (IIFE) (I think I am using the term correctly). In this pattern, an internal state variable is defined to store the information for the object. This state variable can be manipulated to a JSON object… http://stackoverflow.com/questions/3029421/how-to-preserve-the-state-of- javascript-closure

New Person Definition function Person(options) { var state = { instanceType : "Person", fname : "", lname : "", age : undefined } for (var prop in options) { if (!state.hasOwnProperty(prop)) console.log("Property " + prop + " not recognized in object " + state.instanceType); state[prop] = options[prop]; this.printFirstName = function () { console.log("First name = " + state.fname); this.printLaastName = function() { console.log("Last name = " + state.lname); this.printAge = function() { console.log("Age = " + state.age); this.toJSON = function() { return JSON.stringify(state); return this; // Just to be explicit

And the program now works… // create a person object, and show that the printFirstName function is accessible. chuck = new Person({fname: "Chuck", lname: "Kann", age: 59}); chuck.printFirstName(); patty = new Person({fname: "Patty", lname: "Jordan", age: 58}); // Note that now there is still encapsulation patty.printFirstName(); // works chuck.printFirstName(); // works thanks to closure // But we can get to the object to stringify it. jsonObj = chuck.toJSON(); alert(jsonObj); jsonObj = patty.toJSON();

Now we have an object model we can use This object model has encapsulation and information hiding, and is a good one we can use. I am not saying you cannot break encapsulation and information hiding, but you have to try hard to do it. And why bother… More about objects later, but for now there is enough to do a simple form…