An object is just a container for a collection of named values (aka properties). Before we look at any JavaScript code, let's first reason this out. Take myself, for example. Using plain language, we can express in a table, a "cody":
| Property | Property Value |
| living | True |
| age | 33 |
| gender | Male |
The word "cody" in the table is just a label for the group of property names and corresponding values that make up exactly what a cody is. As you can see from the table, I am living, 33, and a male.
JavaScript, however, does not speak in tables. It speaks in objects, which are similar to the parts contained in the "cody” table. Translating the cody table into an actual JavaScript object would look like this:
Sample: sample1.html
01
02
03
04
05
06
07
08
09
10
11
12
13
| <!DOCTYPE html><html lang="en"><body><script> // Create the cody object var cody = new Object(); // then fill the cody object with properties (using dot notation). cody.living = true; cody.age = 33; cody.gender = 'male'; console.log(cody); // Logs Object {living = true, age = 33, gender = 'male'}</script></body></html> |
Keep this at the forefront of your mind: objects are really just containers for properties, each of which has a name and a value. This notion of a container of properties with named values (i.e. an object) is used by JavaScript as the building blocks for expressing values in JavaScript. The cody object is a value which I expressed as a JavaScript object by creating an object, giving the object a name, and then giving the object properties.
Up to this point, the cody object we are discussing has only static information. Since we are dealing with a programing language, we want to program our cody object to actually do something. Otherwise, all we really have is a database akin to JSON. In order to bring the cody object to life, I need to add a property method. Property methods perform a function. To be precise, in JavaScript, methods are properties that contain a
Function() object, whose intent is to operate on the object the function is contained within.
If I were to update the cody table with a getGender method, in plain English it would look like this:
| Property | Property Value |
| living | True |
| age | 33 |
| gender | Male |
| getGender | return the value of gender |
Using JavaScript, the
getGender method from the updated cody table would look like so:
Sample: sample2.html
01
02
03
04
05
06
07
08
09
10
11
| <!DOCTYPE html><html lang="en"><body><script> var cody = new Object(); cody.living = true; cody.age = 33; cody.gender = 'male'; cody.getGender = function () { return cody.gender; }; console.log(cody.getGender()); // Logs 'male'.</script></body></html> |
The
getGender method, a property of the cody object, is used to return one of cody’s other property values: the value "male" stored in the gender property. What you must realize is that without methods, our object would not do much except store static properties.
The cody object we have discussed thus far is what is known as an
Object() object. We created the cody object using a blank object that was provided to us by invoking theObject() constructor function. Think of constructor functions as a template or cookie cutter for producing predefined objects. In the case of the cody object, I used theObject() constructor function to produce an empty object which I named cody. Because cody is an object constructed from the Object() constructor, we call cody anObject() object. What you really need to understand, beyond the creation of a simpleObject() object like cody, is that the majority of values expressed in JavaScript are objects (primitive values like "foo", 5, and true are the exception but have equivalent wrapper objects).
Consider that the cody object created from the
Object() constructor function is not really different from a string object created via the String() constructor function. To drive this fact home, examine and contrast the following code:
Sample: sample3.html
01
02
03
04
05
06
07
08
09
10
11
12
13
14
| <!DOCTYPE html><html lang="en"><body><script> var myObject = new Object(); // Produces an Object() object. myObject['0'] = 'f'; myObject['1'] = 'o'; myObject['2'] = 'o'; console.log(myObject); // Logs Object { 0="f", 1="o", 2="o"} var myString = new String('foo'); // Produces a String() object. console.log(myString); // Logs foo { 0="f", 1="o", 2="o"}</script></body></html> |
As it turns out, myObject and myString are both . . . objects! They both can have properties, inherit properties, and are produced from a constructor function. The myString variable containing the 'foo' string value seems to be as simple as it goes, but amazingly it’s got an object structure under its surface. If you examine both of the objects produced you will see that they are identical objects in substance but not in type. More importantly, I hope you begin to see that JavaScript uses objects to express values.
You might find it odd to see the string value 'foo' in object form because typically a string is represented in JavaScript as a primitive value (e.g.,
var myString = 'foo';). I specifically used a string object value here to highlight that anything can be an object, including values that we might not typically think of as an object (e.g., string, number, Boolean). Also, I think this helps explain why some say that everything in JavaScript can be an object.
JavaScript bakes the
String() and Object() constructor functions into the language itself to make the creation of a String() object and Object() object trivial. But you, as a coder of the JavaScript language, can also create equally powerful constructor functions. In the following sample, I demonstrate this by defining a non-native customPerson() constructor function so that I can create people from it.
Sample: sample4.html
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html><html lang="en"><body><script> // Define Person constructor function in order to create custom Person() objects later. var Person = function (living, age, gender) { this.living = living; this.age = age; this.gender = gender; this.getGender = function () { return this.gender; }; }; // Instantiate a Person object and store it in the cody variable. var cody = new Person(true, 33, 'male'); console.log(cody); /* The String() constructor function that follows, having been defined by JavaScript, has the same pattern. Because the string constructor is native to JavaScript, all we have to do to get a string instance is instantiate it. But the pattern is the same whether we use native constructors like String() or user-defined constructors like Person(). */ // Instantiate a String object stored in the myString variable. var myString = new String('foo'); console.log(myString);</script></body></html> |
The user-defined
Person() constructor function can produce Person objects, just as the native String() constructor function can produce string objects. The Person()constructor is no less capable, and is no more or less malleable, than the nativeString() constructor or any of the native constructors found in JavaScript.
Remember how the cody object we first looked at was produced from an
Object(). It’s important to note that the Object() constructor function and the new Person()constructor shown in the previous code example can give us identical outcomes. Both can produce an identical object with the same properties and property methods. Examine the two sections of code that follow, showing that codyA and codyB have the same object values even though they are produced in different ways.
Sample: sample5.html
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <!DOCTYPE html><html lang="en"><body><script> // Create a codyA object using the Object() constructor. var codyA = new Object(); codyA.living = true; codyA.age = 33; codyA.gender = 'male'; codyA.getGender = function () { return codyA.gender; }; console.log(codyA); // Logs Object {living=true, age=33, gender="male", ...} /* The same cody object is created below, but instead of using the native Object() constructor to create a one-off cody, we first define our own Person() constructor that can create a cody object (and any other Person object we like) and then instantiate it with "new". */ var Person = function (living, age, gender) { this.living = living; this.age = age; this.gender = gender; this.getGender = function () { return this.gender; }; }; var codyB = new Person(true, 33, 'male'); console.log(codyB); // Logs Object {living=true, age=33, gender="male", ...}</script></body></html> |
The main difference between the codyA and codyB objects is not found in the object itself, but in the constructor functions used to produce the objects. The codyA object was produced using an instance of the
Object() constructor. The Person()constructor produced codyB, but can also be used as a powerful, centrally defined object "factory" to be used for creating more Person() objects. Crafting your own constructors for producing custom objects also sets up prototypal inheritance forPerson() instances.
Both solutions resulted in the same complex object being created. Its these two patterns that are most commonly used for constructing objects.
JavaScript is really just a language that is prepackaged with a few native object constructors used to produce complex objects which express a very specific type of value (e.g., numbers, strings, functions, objects, arrays, etc.), as well as the raw materials via
Function() objects for crafting user-defined object constructors (e.g.,Person()). The end resultno matter the pattern for creating the objectis typically the creation of a complex object.
Understanding the creation, nature, and usage of objects and their primitive equivalents is the focus of the rest of this book.
JavaScript Constructors Create and Return Object Instances
The role of a constructor function is to create multiple objects that share certain qualities and behaviors. Basically, a constructor function is a cookie cutter for producing objects that have default properties and property methods.
If you said, "A constructor is nothing more than a function," then I would reply, "You are correctunless that function is invoked using the
new keyword." (For example, new String('foo')). When this happens, a function takes on a special role, and JavaScript treats the function as special by setting the value of this for the function to the new object that is being constructed. In addition to this special behavior, the function will return the newly created object (i.e. this) by default instead of the value false. The new object that is returned from the function is considered to be an instance of the constructor function that constructs it.
Consider the
Person() constructor again, but this time read the comments in the following code sample carefully, as they highlight the effect of the new keyword.
Sample: sample6.html
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html><html lang="en"><body><script> /* Person is a constructor function. It was written with the intent of being used with the new keyword. */ var Person = function Person(living, age, gender) { // "this" below is the new object that is being created (i.e. this = new Object();) this.living = living; this.age = age; this.gender = gender; this.getGender = function () { return this.gender; }; // When the function is called with the new keyword, "this" is returned instead of false. }; // Instantiate a Person object named cody. var cody = new Person(true, 33, 'male'); // cody is an object and an instance of Person() console.log(typeof cody); // Logs object. console.log(cody); // Logs the internal properties and values of cody. console.log(cody.constructor); // Logs the Person() function.</script></body></html> |
The sample6.html code leverages a user-defined constructor function (i.e.
Person()) to create the cody object. This is no different from the Array() constructor creating anArray() object (e.g., new Array()) in the following code.
Sample: sample7.html
01
02
03
04
05
06
07
08
09
10
11
12
13
| <!DOCTYPE html><html lang="en"><body><script> // Instantiate an Array object named myArray. var myArray = new Array(); // myArray is an instance of Array. // myArray is an object and an instance of the Array() constructor. console.log(typeof myArray); // Logs object! What? Yes, arrays are a type of object. console.log(myArray); // Logs [ ] console.log(myArray.constructor); // Logs Array()</script></body></html> |
In JavaScript, most values (excluding primitive values) involve objects being created, or instantiated, from a constructor function. An object returned from a constructor is called an instance. Make sure you are comfortable with these semantics, as well as the pattern of leveraging constructors to produce objects.
The Native JavaScript Object Constructors
The JavaScript language contains nine native (or built-in) object constructors. These objects are used by JavaScript to construct the language, and by "construct" I mean these objects are used to express object values in JavaScript code, as well as orchestrate several features of the language. Thus, the native object constructors are multifaceted in that they produce objects, but are also leveraged in facilitating many of the languages programming conventions. For example, functions are objects created from the
Function() constructor, but are also used to create other objects when called as constructor functions using the new keyword.
The nine native object constructors that come prepackaged with JavaScript are:
Number()String()Boolean()Object()Array()Function()Date()RegExp()Error()
JavaScript is mostly constructed from these nine objects (as well as string, number, and Boolean primitive values). Understanding these objects in detail is key to taking advantage of JavaScript’s unique programming power and language flexibility.
The
Math object is the oddball here. It's a static object rather than a constructor function, meaning you cant do this: var x = new Math(). But you can use it as if it has already been instantiated (e.g., Math.PI). Truly, Math is just an object namespace set up by JavaScript to house math functions.
The native objects are sometimes referred to as "global objects" since they are the objects that JavaScript has made natively available for use. Do not confuse the term global object with the "head" global object that is the topmost level of the scope chain, for example, the
window object in all web browsers.
The
Number(), String(), and Boolean() constructors not only construct objects; they also provide a primitive value for a string, number, and Boolean, depending upon how the constructor is leveraged. If you call these constructors directly, then a complex object is returned. If you simply express a number, string, or Boolean value in your code (primitive values like 5, "foo", and true), then the constructor will return a primitive value instead of a complex object value.User-Defined/Non-Native Object Constructor Functions
As you saw with the
Person() constructor, we can make our own constructor functions from which we can produce not just one, but multiple custom objects.
In the following sample, I present the familiar
Person() constructor function:
Sample: sample8.html
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
| <!DOCTYPE html><html lang="en"><body><script> var Person = function (living, age, gender) { this.living = living; this.age = age; this.gender = gender; this.getGender = function () { return this.gender; }; }; var cody = new Person(true, 33, 'male'); console.log(cody); // Logs Object {living=true, age=33, gender="male", ...} var lisa = new Person(true, 34, 'female'); console.log(lisa); // Logs Object {living=true, age=34, gender="female", ...}</script></body></html> |
As you can see, by passing unique parameters and invoking the
Person() constructor function, you could easily create a vast number of unique people objects. This can be pretty handy when you need more than two or three objects that possess the same properties, but with different values. Come to think of it, this is exactly what JavaScript does with the native objects. The Person() constructor follows the same principles as the Array() constructor. So new Array('foo','bar') is really not that different thannew Person(true, 33, 'male'). Creating your own constructor functions is just using the same pattern that JavaScript itself uses for its own native constructor functions.
It is not required, but when creating custom constructor functions intended to be used with the new operator, its best practice to make the first character of the constructor name uppercase:
Person() rather than person().
One tricky thing about constructor functions is the use of the
this value inside of the function. Remember, a constructor function is just a cookie cutter. When used with thenew keyword, it will create an object with properties and values defined inside of the constructor function. When new is used, the value this literally means the new object or instance that will be created based on the statements inside the constructor function. On the other hand, if you create a constructor function and call it without the use of thenew keyword, the this value will refer to the "parent" object that contains the function. More detail about this topic can be found in Chapter 6.
It's possible to forgo the use of the new keyword and the concept of a constructor function by explicitly having the function return an object. The function would have to be written explicitly to build an
Object() object and return it: var myFunction = function() {return {prop: val}};.
No comments:
Post a Comment