1. Technology

Object Oriented JavaScript

7. Dot Notation and "this"

By

We have already looked at using dot notation when referencing our JavaScript objects when we use them - using object.property and object.method() - what we are going to look at next is using that notation within the code of our object constructor.

When we create an object using an object constructor rather than just copying an existing object we have a function into which we can put some code that will be run each time we create an object from the constructor. The code that we would normally place within the constructor is the code to initialise all of the properties of our object so that they will all have proper values once our object is created. We can define the methods there too although doing so is less common.

Let's return to the code that we had in the last tutorial and add some content into our constructor.


function myObject(arg1, arg2) {
myObject.p1 = arg1;
myObject.p2 = arg2;
}

This object constructor when called will now create an object called myObject which has two properties that will be set to the values that are passed to the constructor when we call it.

There are two disadvantages to coding things this way. The first of these is that we are assigning the values to properties of the object constructor rather than to the object that we are creating from it and secondly with the alternate way of calling the constructor that we looked at the constructor doesn't need to have a name and so we can't do the assignments that way.

The JavaScript keyword "this" resolves these issues.

"this" refers to whichever object is considered to be current when the code using it is being run. The two main places where you will use "this" are when defining objects and in processing attached to event handler/listeners (where "this" refers to the object that the event is attached to.

The reason that I have mentioned this second situation is that if you have object methods that you attach to event handlers "this" within those methods may end up referring to the object that called the event rather than the object to which the method belongs. We'll look at how to sove that in a later tutorial. For the moment we are looking at how we use "this" in our object constructor function.


function myObject(arg1, arg2) {
this.p1 = arg1;
this.p2 = arg2;
}

We can now have the following code without the properties in myNewObj1 being affected by the creation of the corresponding properties of myNewObj2 since the properties belong to the individual objects and not the constructor on which they are based.


var myNewObj1 = new myObject(parm1, parm2);
var myNewObj2 = new myObject(parm3, parm4);

Using "this also allows us to use an anonymous constructor and still assign the properties within the constructor.


var myNewObj = new function(arg1,arg2) {this.p1 = arg1;this.p2 = arg2;){parm1,parm2);

All the Object Oriented JavaScript Tutorials

  1. What is Object Oriented JavaScript?
  2. The Benefits of OO JavaScript
  3. JavaScript's Built in Objects
  4. Extending Built In Objects
  5. Creating Objects from Existing Objects
  6. Creating New Objects Without Copying Existing Ones
  7. Dot Notation and "this"
  8. prototype
  9. Inheritance and "constructor"
  10. Associative Array Notation
  11. Create Method if Doesn't Exist
  12. "self" and Multiple Objects
  13. Defining Objects with JSON
  14. Namespaces
  15. Lazy Definition
  16. Extending Methods
  17. Copying Objects
  18. Private Properties and Privileged Methods
  19. Public Access to Private Methods
  20. Chaining Methods
  21. Singletons
  1. About.com
  2. Technology
  3. JavaScript
  4. Javascript Tutorials
  5. Object Oriented JavaScript
  6. Dot Notation and "this"

©2014 About.com. All rights reserved.