Differences

This shows you the differences between two versions of the page.

--- docs:programming:javascript:objects [2007/07/15 21:50] – billh
+++ docs:programming:javascript:objects [2008/08/03 00:25] (current) – external edit 127.0.0.1
@@ Line 1: / Line 1: @@
-====== objects ======
+====== Objects ======
-===== An Object =====
+  * objects are created with the "new" keyword
-An object is a collection of properties. These properties can either be primitive data types, other objects, or functions (which in this case are called methods, but more on this later). A constructor function (or simply, constructor) is a function used to create an object - this too we'll discuss in detail later. JavaScript comes with many built-in objects, such as the Array, Image, and Date objects. Many of you are familiar with Image objects from creating those ever-so-cute rollover effects. Well, when you use the code
+  * constructors for objects are simply functions
+  * the "this" keyword indicates the current instance of the object
+  * property variables can be defined within the function, but are not required to be, and can be added at any time
+===== Creating an object =====
+===== using Object() =====
 <code javascript>
-var Image1 = new Image();
+var dog = new Object();
-Image1.src = "myDog.gif";
+dog.name = "fido";
+dog.weight = 50;
+dog.color = "Brown";
 </code>
-you have in fact created a new Image object, and assigned a property of your new Image object: the src property. Image1 is a new Image object; in other words, it is an instance of the Image object. Using JavaScript's dot-structure ( . ), the code above then accesses and sets the src property of your new Image object. Now, let's learn how to create our own objects.
+===== using a constructor =====
 <code javascript>
-function myFunc(){
+function animal(){
 }
-var myObject = new myFunc();
+var dog = new animal();
-alert(typeof myObject);  // displays "object"
 </code>
-We've just created out own object. In fact we've created a myFunc object. myFunc() is a constructor function; it lays out the blueprint from which objects that are created from it will follow (although, in this case, it doesn't lay out much of a blueprint). So, how does JavaScript know to create an instance of the myFunc object, rather than to return its results? Let's compare the example above with the following, more conventional use of a function:
+===== using a constructor with arguments =====
 <code javascript>
-function myFunc(){
+function animal(name, weight, color){
- return 5;
+	this.name = name;
+	this.weight = weight;
+	this.color = color;
 }
-var myObject = myFunc();
+var dog = new animal("fido", 50, "Brown");
-alert(typeof myObject); // displays "number"
 </code>
-In this case, we've assigned 5 to myObject. So, what's the difference between these two scripts? Answer: the new keyword. It tells JavaScript to create an object following the blueprint set forth in the myFunc() constructor function. In fact, when we create an Image object, we do the same thing, except that instead of using our own constructor function, we use one of JavaScript's built-in constructor functions, the Image() constructor function.
+===== using shortcut brackets =====
-So far, we've learned how to create a constructor function, and how to create an object from that constructor function. In our example, we've created a myFunc() constructor and created an instance of the myFunc object, which we assigned to the variable myObject.
-This is all fine and dandy, but what's the point? Well, just like our Image object, myObject can be assigned properties:
 <code javascript>
-function myFunc(){
+var dog = {name:"fido", weight:50, color:"Brown};
-}
-var myObject = new myFunc();
-myObject.StringValue = "This is a String";
-alert(myObject.StringValue); // displays "This is a String"
 </code>
-And voila, we've now created a property for our object. However, if we create another instance of the myFunc object (using the myFunc() constructor function), we also have to assign the StringValue property to this new instance. For example:
+===== See Also =====
+  * [[copy prototype]]
-<code javascript>
-function myFunc(){
-}
-var myObject = new myFunc();
-myObject.StringValue = "This is a String";
-var myObject2 = new myFunc();
-alert(myObject2.StringValue); // displays "undefined"
-</code>
-So, how can we create properties that exist for all myFunc objects? Within the myFunc() constructor function, we can do just that. The this keyword inside a constructor function refers to the object that's being created. Example:
-<code javascript>
-function myFunc(){
- this.StringValue = "This is a String";
-}
-var myObject = new myFunc();
-var myObject2 = new myFunc();
-alert(myObject2.StringValue); // displays "This is a String"
-</code>
-Now, all myFunc objects will have a StringValue property, assigned with the initial value of "This is a String", but every object can have its own distinctive value for StringValue. In other words, we can change the StringValue property for one myFunc object, without affecting the others:
-<code javascript>
-function myFunc(){
- this.StringValue = "This is a String";
-}
-var myObject = new myFunc();
-myObject.StringValue = "This is myObject's string";
-var myObject2 = new myFunc();
-alert(myObject.StringValue); // displays "This is myObject's string"
-alert(myObject2.StringValue); // displays "This is a String"
-</code>
-We can also achieve similar results if we pass arguments to our constructor function:
-<code javascript>
-function myFunc(StringValue){
- this.StringValue = StringValue;
-}
-var myObject = new myFunc("This is myObject's string");
-var myObject2 = new myFunc("This is a String");
-alert(myObject.StringValue); // displays "This is myObject's string"
-alert(myObject2.StringValue); // displays "This is a String"
-</code>
-In the myFunc() constructor, this.StringValue refers to the property being assigned to the newly created object, while StringValue refers to the function's local variable that was passed as an argument. So, now that we've assigned properties to objects, what about methods?
-===== Object Methods =====
-In addition to properties, objects can have methods. An object's method is a function it can perform. Let's take a look at this example. For this one, let's create a Circle object. First, we're going to have to define our functions, and then make them methods of our Circle object. Let's define our Circle() constructor and a Circle object or two:
-<code javascript>
-function Circle(radius){
- this.radius = radius;
-}
-var bigCircle = new Circle(100);
-var smallCircle = new Circle(2);
-</code>
-Now, let's define some functions that we might use:
-<code javascript>
-function getArea(){
- return (this.radius*this.radius*3.14);
-}
-function getCircumference(){
- var diameter = this.radius*2;
- var circumference = diameter*3.14;
- return circumference;
-}
-</code>
-Note that if you were going for accuracy, you could use Math.PI instead of 3.14, but we'll use this simplified representation of pi to keep the numbers in our examples nice and round.
-These functions are easy, except for one thing: what does this.radius refer to? this always refers to the current object, in this case, the Circle object. So this.radius refers to the radius property of the Circle object. So, how do we attach these functions to our object? It's not as hard as you might think. Let's change our Circle() constructor:
-<code javascript>
-function Circle(radius){
- this.radius = radius;
- this.getArea = getArea;
- this.getCircumference = getCircumference;
-}
-</code>
-The above assigns the functions getArea and getCircumference to our Circle object, making them methods—functions belonging to our Circle object. We can use methods just like any normal function, but we must first access the object in which the method is encapsulated:
-<code javascript>
-alert(bigCircle.getArea()); // displays 31400
-alert(bigCircle.getCircumference()); // displays 618
-alert(smallCircle.getArea()); // displays 12.56
-alert(smallCircle.getCircumference()); // displays 12.56
-</code>
-===== Keeping Things Tidy =====
-Let's say we want to keep all our properties and methods in the same place - in the Circle() constructor function. There are many ways to do this. Let's first examine inner functions. An inner function is a function within a function (say that sentence quickly ten times!). Here's what they let us do:
-<code javascript>
-function Circle(radius){
- function getArea(){
-   return (this.radius*this.radius*3.14);
- }
- function getCircumference(){
-   var diameter = this.radius*2;
-   var circumference = diameter*3.14;
-   return circumference;
- }
-this.radius = radius;
-this.getArea = getArea;
-this.getCircumference = getCircumference;
-}
-</code>
-It's the same code, except that we've moved the functions. Now, inside our two functions, instead of this.radius, we could use just plain old radius because inner functions can access local variables within outer functions. Thus, it would be able to access the radius local variable passed as an argument to the Circle() constructor. Therefore, we could have just as easily used:
-<code javascript>
-function Circle(radius){
- function getArea(){
-   return (radius*radius*3.14);
- }
- function getCircumference(){
-   var diameter = radius*2;
-   var circumference = diameter*3.14;
-   return circumference;
- }
- this.radius = radius;
- this.getArea = getArea;
- this.getCircumference = getCircumference;
-}
-</code>
-Ok, now let's change the radius of an object and get its area:
-<code javascript>
-bigCircle.radius=50;
-alert(bigCircle.getArea()); // displays 31400
-</code>
-But wait! It returns 31400, rather than the expected 7850. What's wrong? Well, radius refers to the value we passed to the Circle() constructor function, not the value of the object. So when we change the object's radius, the methods getArea() and geCircumference(), keep on using the old radius. So, we really shouldn't use just plain old radius. Instead, we need to use this.radius, as it refers to the current object's radius, whether this property changes after the object is created or not.
-Ok, so now we've created a self-contained object constructor - the function that defines an object. Let's look at another way we can create functions inside our Circle() constructor:
-<code javascript>
-function Circle(radius){
- this.radius = radius;
- this.getArea = function(){
-   return (this.radius*this.radius*3.14);
- }
- this.getCircumference = function(){
-   var diameter = this.radius*2;
-   var circumference = diameter*3.14;
-   return circumference;
- }
-}
-var bigCircle = new Circle(100);
-var smallCircle = new Circle(2);
-alert(bigCircle.getArea()); // displays 31400
-alert(smallCircle.getCircumference()); // displays 12.56
-</code>
-Here, we've encountered another way to define a function. We can use:
-<code javascript>
-functionName = function([parameters]){
- // function body
-}
-</code>
-In this way, we can create parameters:
-<code javascript>
-functionName = function(parameter1,parameter2,parameter3){
- //function body
-}
-</code>
-While functions aren't created this way very often, when we're creating objects, they can be useful shortcuts. These processes also help avoid conflicts with function names. For instance, another object can have a different function with the same name, for example getArea(), without causing a conflict. This is possible because these functions are encapsulated inside an object constructor.