Javascript function objects.

Details about function objects.

Create objects using function objects.

• All function objects have a constructor that we can use to create new objects with the keyword 'new'.
• The name of a function or reference to a function that has not been named is the variable we can use as a reference to the constructor of the function.

  function Func1() {} // a function that contains nothing
  var obj1= new Func1(); // obj1 is a standard ordinary object.
  var Func2 = function() {} // an unnamed function that contains nothing
  var obj2= new Func2(); // obj2 is a standard ordinary object.

• We can also create new objects using the constructor of an object.
  
  Example:

  <script type="text/javascript">
  var Person=function(name,age) {
    this.name=name;
    this.age=age;
  }
  // using the reference to an unnamed function to create an object
  var person1= new Person("Ricard",52);
  document.write(person1.name+" is "+person1.age+" years old."+"<br>");
  // using the contructor of an object to create a new object
  var person2= new person1.constructor("Julian",56);
  document.write(person2.name+" is "+person2.age+" years old."+"<br>");
  </script>

Common properties for objects.

• In contrast to standard ordinary object, function objects have also a prototype property that we can use to add properties. These properties will then be common to all new objects we create.
• The prototype property is a reference to a standard ordinary object that contains all the properties that are common to all objects that will be created.
  
  Example:

  <script type="text/javascript">
    function Func1() {} // a function that contains nothing
    // Create a property, desc, that are common to all objects we creates  
    Func1.prototype.desc="This is an object";
    var obj1= new Func1(); // obj1 is a new standard ordinary object.
    document.write(obj1.desc+"<br>");
    var obj2= new Func1(); // obj2 is a new standard ordinary object.
    document.write(obj2.desc+"<br>");
  </script>

Own properties for objects.

• All created objects can have their own properties.
• To create these properties we must use a this keyword, which is defined to be a reference to the object that is created by the function object.
  
  Example:

  <script type="text/javascript">
  function Rectangle(w, h) {
  // First - we define 3 properties in the Rectangle function object
      this["width"] = w; // This is the same as 'this.width=w;'
      this.height = h;
      this.area = function( ) { return this.width * this.height; }
  }
  // To create object we use the keyword 'new' 
  // and the Rectangle as a constructor function
  var r1 = new Rectangle(7, 11);
  var r2 = new Rectangle(8, 34);
  document.write("Area of r1: "+r1.area()+"<br>");
  document.write("Area of r2: "+r2.area()+"<br>");
  // change a property
  r1.width=16;
  document.write("New area of r1: "+r1.area()+"<br>");
  </script>

• Since we here can create objects with properties that have unique values, then the methods assigned properties in such objects will be unique as well. The area() function should be defined on the prototype object, since it is not unique to any of the objects.
• For all created objects, we can add, remove or change properties to each of the objects.
  
  Example 1:

  <script type="text/javascript">
  function func1() {} // a function that contains nothing
  var obj= new func1(); // obj is a standard ordinary object.
  // Add the method, show(), to the object
  func1.show=function() {return "I have been added.";}
  document.write(func1.show()+"<br>");
  // Change a method of the object
  func1.show=function() {return "I have been changed.";}
  document.write(func1.show()+"<br>");
  // Delete a method of the object
  delete func1.show;
  document.write(func1.show()+"<br>"); // this shows nothing;
  </script>

  
  Example 2:

  <script type="text/javascript">
    function AppColor(red, blue, green) {
      this.red=red;
      this.blue=blue;
      this.green=green;
      // All this defined properties are public
      this.getHexValue= function() {
        var rStr = this.red.toString(16);
        if (rStr.length == 1) rStr = '0' + rStr;
        var gStr = this.blue.toString(16);
        if (gStr.length == 1) gStr = '0' + gStr;
        var bStr = this.green.toString(16);
        if (bStr.length == 1) bStr = '0' + bStr;
        return "#"+rStr+gStr+bStr;
      }
    }
    var color1= new AppColor(0,0,200);
    var colVal1= color1.getHexValue();
    document.write("<h1 style='color: "+colVal1+"'>Color: "+colVal1+"</h1>");
    var color2= new AppColor(200,36,200);
    var colVal2= color2.getHexValue();
    document.write("<h2 style='color: "+colVal2+"'>Color: "+colVal2+"</h2>");
    // add a new function to the first object (not the last)
    color1.SetHexString = function(hexString) {
      if(hexString == null || typeof(hexString) != "string")
        return false;
      if (hexString.substr(0, 1) == '#')
        hexString = hexString.substr(1);
      if(hexString.length != 6)
        return false;
      this.red = parseInt(hexString.substr(0, 2), 16);
      this.blue = parseInt(hexString.substr(2, 2), 16);
      this.green = parseInt(hexString.substr(4, 2), 16);
    };
    color1.SetHexString("#9090B0");
    colVal1= color1.getHexValue();
    document.write("<h2 style='color: "+colVal1+"'>Color: "+colVal1+"</h2>");
  </script>

Test for own properties in objects.

• All object types inherit properties from the built-in Object object. The Object object has a prototyped method, hasOwnProperty(propname) to test whether a property is defined inside an object or not.
• The hasOwnProperty(propname) method returns true if the propname property is an property defined inside an object, else the method will return false.
• The hasOwnProperty(propname) method only works on the object being tested and not on inherited properties, such as the prototype properties. You must test on the prototype property object for the last.
  
  Example:

  <script type="text/javascript">
    function Rectangle(w, h) {
      this.width = w;
      this.height = h;
    }
    Rectangle.prototype.area = function( ) {
      return this.width * this.height;
    }
    var rect = new Rectangle(22, 55);
    // Tests whether onSource() method is own property or not.
    document.write("Is onSource() own property - returns: "+
      rect.hasOwnProperty("onSource")+ "<br>");
    // Tests whether area() method is own property or not.
    document.write("Is area() own property - returns: "+
      rect.hasOwnProperty("area")+ "<br>");
    // Tests whether width is own property or not.
    document.write("Is width own property - returns: "+
      rect.hasOwnProperty("width")+ "<br>");
  </script>

Enumerable properties in objects.

• Javascript defines a separation between the enumerable properties on not enumerable properties. Enumerable properties are properties that will appear in a for/in loop.
• All predefined properties are NOT enumerable, but user defined properties are ALL enumerable.
• This mean that we can find all the user defined properties for an object with a for/in loop.
  
  Example:

  <script type="text/javascript">
    function Rectangle(w, h) {
      this.width = w;
      this.height = h;
    }
    Rectangle.prototype.area = function( ) {
      return this.width * this.height;
    }
    var rect = new Rectangle(27, 10);
    // finding all enumerable properties in the rect object
    for (var prop in rect) {
      document.write(prop + ' = ' + rect[prop]+"<br>");
    }
  </script>

• All object types inherit properties from the built-in Object object. The Object object has a prototyped method, propertyIsEnumerable(propname) to test whether a property in an object is enumerable or not.
• The propertyIsEnumerable(propname) method returns true if the propname property is an enumerable property, else the method will return false. This includes all inherited user-defined properties as well.
• The propertyIsEnumerable (propname) method only works on the object being tested and not on inherited properties, such as the prototype properties. You must test on the prototype property object for the last.
  
  Example:

  <script type="text/javascript">
    function Rectangle(w, h) {
      this.width = w;
      this.height = h;
    }
    Rectangle.prototype.area = function( ) {
      return this.width * this.height;
    }
    var rect = new Rectangle(27, 10);
    // Tests whether onString() method is enumerable or not.
    document.write("Is onString() enumerable - returns: "+
      rect.propertyIsEnumerable("onString")+ "<br>");
    // Tests whether area() method is enumerable or not.
    // For this test we must look in the prototype object
    document.write("Is area() enumerable - returns: "+
      rect.constructor.prototype.propertyIsEnumerable("area")+ "<br>");
    // Tests whether width is enumerable or not.
    document.write("Is width enumerable - returns: "+
      rect.propertyIsEnumerable("width")+ "<br>");
  </script>

Create properties on the constructor.

• So far, all the properties we have talked about are either unique to an object or common to several objects, and in those cases we use the "this" keyword to get access to them.
• We can create properties linked to a constructor, and these properties are not related to instances of any objects.
• You may think that this is the right place to define constants. Yes, you are right, but the bad thing is (may be) that you cannot make them read-only in Javascript.
  
  Example:

  <script type="text/javascript">
    function Company(name, turnover) {
      this.name = name;
      this.turnover = turnover;
    }
    // defines a property, description, on the Company constructor
    Company.description="This is a description for all the Company objects.";
    var comp = new Company("DotCom", 5000000);
    // using the constructor name to fetch the constructor property
    document.write("Company description: "+Company.description+ "<br>");
    // using the object constructor property to fetch the constructor property
    document.write("Company description: "+comp.constructor.description+ "<br>");
    // defines a property, showMe, (method) on the Company constructor
    Company.showMe=function(company) {
      return company.name+" has a turnover of "+company.turnover;
    }
    document.write(Company.showMe(comp)+ "<br>");
   </script>

• Normally, one does not use 'this' keyword in a function that is associated with a constructor, but if you want to use call () or Apply () method (both are inherited from Function object), then you can use 'this' keyword inside those functions as well.
  
  Example:

  <script type="text/javascript">
    function Company(name, turnover) {
      this.name = name;
      this.turnover = turnover;
      this.getInfo= function() {
        return this.constructor.showMe.call(this);
      }
    }
  // defines a property, showMe, (method) on the Company constructor
  // You must use the call () method or the Apply () method to perform this function.
    Company.showMe=function() {
      return this.name+" has a turnover of "+this.turnover;
    }
    var company1=new Company("MyCompany", 4500000);
    document.write(company1.getInfo()+ "<br>");
    var company2=new Company("GameOver.com", 4000000);
    document.write(company2.getInfo()+ "<br>");
  </script>