JavaScrip Objects 101 

Download as a PDF

 

Creating objects

To create an object of class myClass:

 

      function myClass() {

            this.property = "value1";

            this.otherProperty = "value2";

      }

      var myObject = new myClass();

 

      //myObject is an instance of class myClass and it has the following properties

      alert(myObject.property);           //display "value1"

alert(myObject.otherProperty);      //display "value2"

 

Creating an object with methods

 

Below is an example of an object with a private an a public method,

 

      function myClass(vlaueX,vlaueY) {

            this.x = vlaueX;

            this.y = vlaueY;

            this.XandY = myPrivateFunction(this.x,this.y);

            this.myPublicFunction = function ()

            {

                  return this.XandY;

            }; // a semicolon at the end is the correct practice.

 

            //the value x and y are not reachable unless pased as parameters

            function myPrivateFunction(x,y) {

           

                  return x + "-" + y;

            }

      }

     

      //create the object

      var myObject = new myClass("setValueX","setValueY");

      alert(myObject.y);                              //display “setValueY”

      alert(myObject.myPublicFunction()); //display “setValueX – setValueY”

 

The 'toString' method

 

All objects have the 'toString' method. The method returns a string representing the object, and it is called whenever a string representation of the object is needed. For example alert(myObject);

 

Example to define the 'toString' method:

 

            this.toString = function () {

              return "X:" + this.x + "  Y:" + this.y;

            };

Advanced object techniques

 

Quick way of creating an object

 

      myObject1 = { property: "value1", otherProperty: "value2"};

      alert(myObject1.property); //display "value1"

 

      myObject2 = { property: "value1", insideObject:{x:"valueX" , y:"valueY"} };

      alert(myObject2. insideObject.x); //display "valueX"

           

If we want to add a new property to our object (an instance of the class):

 

      myObject.newProperty = 'propertyValue';

 

If we want all objects of class “myClass” to have a new property.

 

      myObject.prototype.newProperty = 'propertyValue';

 

All instances of class myClass will have the property newProperty with value “propertyValue'”.

 

We can add new methods the same way:

 

      myClass.prototype.setX = function (valueForX) {

        this.x = valueForX;

      };

      myObject.setX("valueForX");

      alert(myObject.x);

 

This works on all object classes, such as String, Number and Boolean.

For example, we will add a method on all strings called 'reverse' that will return the string in reverse order

 

      String.prototype.reverse = function() {

            for( var oStr = '', x = this.length - 1, oTmp; oTmp = this.charAt(x); x-- ) {

                  oStr += oTmp;

          }

      return oStr;

      };

 

      text = "hello";

      alert(text.reverse()); //display olleh

 

 

Efficiency considerations http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Functions

It is recommended that methods be declared outside the class using prototype (as shown above) or as the example below:

 

      function myClass(valueX){

            this.x = valueX

            this.addOne = myClass_addOne;

      }

      function myClass_addOne(){

            return this.x + 1;

      }

      var myObject = new myClass(5);

      y = myObject.addOne();

      alert(y);                           //display 6

 

      //Declaring a class this way means a function can be called outside of the calss

      x = 1;                                         

      alert(myClass_addOne());            //display 2

 

 

 

Public and private properties

 

      function myClass() {

            this.property1 = 'value1'; //this creates a public property

            var property2 = 'value2';  //this creates a private property

            this.method1 = function () { alert( property2 ); };

      }

      var myObject = new myClass ();

      alert(myObject.property1); // display 'value1'

      alert(myObject.property2); // display undefined (private property)

      myObject.method1();        // display 'value2'

 

Public and private methods

 

      function myClass() {

            var secretProperty = "";

            function cantBeSeen() {

                  alert(secretProperty);

            }

            this.method1 = function () {

                  secretProperty = "myValue";

                  cantBeSeen();

            };

            this.method2 = cantBeSeen; //makes a private function into a public function

      }

      var myObject = new myClass();

      myObject.method1(); //alerts "myValue"

      myObject.method2(); //alerts "myValue"

 

Inheritance

 

Create a new type of object, based on the mycircle

 

function mysphere(x,y,z,r) { ... constructor code ... }

mysphere.prototype = new mycircle();

 

Create a mycircle then assign that to the mysphere constructor prototype. As a result, the mysphere constructor has the mycircle object added to its prototype chain.