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

2. Overview
What are JavaScript Objects?
What are prototypes?

3. What are JavaScript Objects?

4. 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.

5. 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.

6. 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.

7. 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).

8. 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();

9. 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();

10. 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.

11. 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).

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

13. 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
vs-closures
closure

14. 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.

15. 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();

16. 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();

17. 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.

18. 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);

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

20. 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();

21. 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!

22. 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…

23. 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

24. 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);

25. 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…
javascript-closure

26. 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

27. 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();

28. 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…