JS - Objects

JavaScript objects are associative arrays of key, value pairs. The keys are strings and the values can be any JavaScript type even functions and other objects.

  var ex1 = {
    name="Fawcett";
    class="CSE686 - Internet Programming";
    semester="Spring 2019";
  }

JavaScript is a prototype language. We build objects with a constructor function, capitalized by convention, using the syntax:

    var Akash = new Person(
      "Bhosale", "CSE686 - IP", "Spring 2019"
    );

Every object has a prototype determined by its constructor function. If you add properties and methods to the prototype they will be available to every object created with the constructor. You can do that by adding them to the constructor code or by adding them directly to the prototype, using the syntax:

  Jim.__proto__.jobDescription = "Instructor";
  Jim.__proto__.show = function() { /* some code here */ };

ECMA5 does not have classes or inheritance, but prototypes serve a lot of the same needs. One important point - Javascript does not directly support making properties private. There are a lot of ways to approximate this, each with its own weaknesses. It's probably best to just use the language as it was designed. ECMA6 introduced classes, which are thin wrappers around the prototype model.

JavaScript objects are created either by using the new operator on a constructor function or by assigning a variable an object literal. If we define a Constructor function, by convention its first letter is capitalized.

Create object using the Object function constructor:

In this section, we are executing the script code shown on the right. What you see is all the code embedded in a <script> block which is an element of this section. The code was copied into a <pre> element, with markup replaced by escape sequences, and floated to the right. The output is being written by the script, and appears on the left.

  <script>
    /* create with new */
    var myObj = new Object();  /* using Object constructor */
    myObj.name = "Jim";
    myObj.job = "instructor";
    myObj.affil = "Syracuse University";
    showJSon(myObj);
    putline();

    showline('We can add new properties at any time:');

    myObj.age = "old as the hills";
    myObj.location = "Syracuse, NY";
    showJSon(myObj);
    putline();
    var line1 = "And we can add methods - here";
    line1 += ' we\'re adding a method "show":';
    showline(line1);
    myObj.show = function () {
      for (var p in this) {
        document.write(p + ' : ' + this[p]);
        putline();
      }
    }
    showline(myObj.show);
    showline("Now let's invoke it:")
    myObj.show();
    putline();

    var line2 = "Here are all the parts of myObj";
    line2 += " that are accessible from your code";
    showline(line2);
    showAllJSon(myObj, true);
    putline();
    var msg = "Note that we can use properties added to myObj"
    msg += " and to those in its prototype chain. ";
    msg += "That includes myObj and its prototype Object."
    showline(msg);
  </script>

  <script>
    function Person(name, age, street, city, state) {
      this.name = name;
      this.age = age;
      this.address = street + ", " + city + ", " + state;
    }
    showline(Person.toString());

    var Jim = new Person(
      "Jim", "Old as the hills", 
      "Syracuse University", "Syracuse", "NY"
    );
    showline('var Jim = new Person("Jim", ...)');
    showJSon(Jim);
    putline();
    showline("Showing properties from Jim and Jim.__proto__");
    var inherited = true;  // show prototype's properties too
    showAllJSonFormatted(Jim, true);
    putline();
    showline("Here's Jim's prototype and its prototype, Object:")
    showAllJSonFormatted(Jim.__proto__, inherited);
    putline();
  </script>

Create an object from a custom function constructor:

When processing a selection of a property or method, JavaScript looks first at the object, then it's prototype, and then all the way up the prototype chain until it gets to Object.

Create an object from an Object literal:

This works because JavaScript will convert literals to instances of Objects with almost no provocation.

  var obj2 = {
    "name": "Lucretia Borgia",
    "lived": "18 April 1480 – 24 June 1519",
    "job": "poisoner",
    "affil": "politician's wife",
    "location": "Venice, Italy"
  };

Brief look at some Standard Objects:

Date:

  <script>
    var now = new Date();
    showline("today\'s date is " + now.toString());
    showline("Hour is " + now.getHours());
    putline();
  </script>

Math:

<script>
  showvalue("2^8 = " + Math.pow(2, 8).toString());
  showline("sqrt(3) = " + Math.sqrt(3).toString());
  putline();
</script>

Global Object:

We've mentioned the global object. Here it is in all its glory:

  <script>
    showAllJSon(this);
    putlines(2);
  </script>