AJAX In Action [285]
The simplest way to create a new JavaScript object is to invoke the built-in constructor for the Object class: var myObject=new Object();
We’ll look at other approaches, and what the new keyword really does, in section B.2.2. Our object myObject is initially “empty,” that is, it has no properties or methods. Adding them in is quite simple, so let’s see how to do it now. B.2.1 Building ad hoc objects
As already noted, the JavaScript object is essentially just an associative array, with fields and methods keyed by name. A C-like syntax is slapped on top to make it look familiar to C-family programmers, but the underlying implementation can be exploited in other ways, too. We can build up complex objects line by line, adding new variables and functions as we think of them. There are two ways of building up objects in this ad hoc fashion. The first of these is to simply use JavaScript to create the object. The second is to use a special notation known as JSON. Let’s start with the plain old JavaScript technique. Using JavaScript statements
In the middle of a complicated piece of code, we may want to assign a value to some object’s property. JavaScript object properties are read/write and can be assigned by the = operator. Let’s add a property to our simple object: myObject.shoeSize="12";
In a structured OO language, we would need to define a class that declared a property shoeSize or else suffer a compiler error. Not so with JavaScript. In fact, just to emphasize the array-like nature, we can also reference properties using array syntax:
myObject['shoeSize']="12";
This notation is clumsy for ordinary use but has the advantage that the array index is a JavaScript expression, offering a form of runtime reflection, which we’ll return to in section B.2.4.
Licensed to jonathan zheng Objects in JavaScript 593 We can also add a new function to our object dynamically: myObject.speakYourShoeSize=function(){ alert("shoe size : "+this.shoeSize); } Or borrow a predefined function: function sayHello(){ alert('hello, my shoeSize is '+this.shoeSize); } ... myObject.sayHello=sayHello; Note that in assigning the predefined function, we omit the parentheses. If we were to write myObject.sayHello=sayHello(); then we would execute the sayHello function and assign the return value, in this case null, to the sayHello property of myObject. We can attach objects to other objects in order to build up complex data models and so on: var myLibrary=new Object(); myLibrary.books=new Array(); myLibrary.books[0]=new Object(); myLibrary.books[0].title="Turnip Cultivation through the Ages"; myLibrary.books[0].authors=new Array(); var jim=new Object(); jim.name="Jim Brown"; jim.age=9; myLibrary.books[0].authors[0]=jim; This can quickly become tedious (often the case where turnips are involved, I’m afraid), and JavaScript offers a compact notation that we can use to assemble object graphs more quickly, known as JSON. Let’s have a look at it now. Using JSON The JavaScript Object Notation (JSON) is a core feature of the language. It provides a concise mechanism for creating arrays and object graphs. In order to understand JSON, we need to know how JavaScript arrays work, so let’s cover the basics of them first. JavaScript has a built-in Array class that can be instantiated using the new keyword: myLibrary.books=new Array(); Licensed to jonathan zheng 594 APPENDIX B JavaScript for object-oriented programmers Arrays can have values assigned to them by number, much like a conventional C or Java array: myLibrary.books[4]=somePredefinedBook; Or they can be associated with a key value, like a Java Map or Python Dictionary, or, indeed, any JavaScript Object: myLibrary.books["BestSeller"]=somePredefinedBook; This syntax is good for fine-tuning, but building a large array or object in the first place can be tedious. The shorthand for creating a numerically indexed array is to use square braces, with