VBA->JS: More about objects (Syntax & Concept)

So, if JavaScript is so mutable, how can the developer be sure what an object actually has in the way of properties and methods? The language provides some properties that return useful information about an object.

When a function is used to construct an object it’s possible to loop through the properties defined for the object in a for-in loop. Starting with the example in a previous post, a new Person object (p) is created. A new property, MiddleInitial, is appended to the object. Finally, the code loops through all the properties of the object and prints them out (console.log()) with their values (methods are not evaluated).

function Person(firstname, lastname, birthday) {
  this.FirstName = firstname;
  this.LastName = lastname;
  this.Birthday = birthday;
  this.FullName = function() {
    return this.FirstName + " " + this.LastName;
  };
  this.Age = function() {
    var dtToday = Date();
    var todayYear = new Date(dtToday).getFullYear();
    var bdayYear = this.Birthday.getFullYear();
    return todayYear - bdayYear;
  };
}

var p = new Person("Sally", "Jones", new Date(1970, 01, 15));
p.MiddleInitial = "Z.";
for (var prop in p) {
  console.log(prop + " = " + p[prop]);
}

/* Returns:
FirstName = Sally
LastName = Jones
Birthday = Sun Feb 15 1970 00:00:00 GMT+0100
FullName = function () {
    return this.FirstName + " " + this.LastName;
  }
Age = function () {
    var dtToday = Date();
    var todayYear = new Date(dtToday).getFullYear();
    var bdayYear = this.Birthday.getFullYear();
    return todayYear - bdayYear;
  }
MiddleInitial = Z. */

Something that’s not discussed very much in the VBA world is inheritance. It exists and we do use it, but may not realize it. A case in point is the Shape object. A Shape object is actually defined in the Office object model – not in Word, Excel or PowerPoint. All three inherit this basic object, make it accessible through their own object model (Word.Shape, etc.), and modify it with properties and methods specific to how Shape objects work in the particular application environment. For example, in PowerPoint Shapes can work with Connectors, but this is not supported in Word. And how to know that Shapes come from the Office object model? The enumerators, such as type, begin with the prefix mso

JavaScript supports inheritance: you can set up a basic schema for an object type, then create additional object types that inherit common properties and methods from the “parent”, augmenting it with properties and methods specific to that “child” type.

For example, an Employee object could inherit the Person object’s properties and methods, adding its own such as HireDate and PayRate:

function Person(firstname, lastname, birthday) {
  this.FirstName = firstname;
  this.LastName = lastname;
  this.Birthday = birthday;
  this.FullName = function() {
    return 
    this.FirstName + " " + this.LastName;
  };
  this.Age = function() {
    var dtToday = Date();
    var todayYear = 
        new Date(dtToday).getFullYear();
    var bdayYear = 
        this.Birthday.getFullYear();
    return todayYear - bdayYear;
  };
}

function Employee(hireDate, payRate) {
  this.HireDate = hireDate;
  this.PayRate = payRate;
}
Employee.prototype = new Person();
var emp = new Employee(Date(), 15);
emp.FirstName = "John";
emp.LastName = "Smith";
emp.Birthday = new Date(1991, 13, 25);
console.log("Age when " + emp.FirstName + " " + 
             emp.LastName + " was hired: " + 
             (new Date(emp.HireDate).getFullYear() - 
             new Date(emp.Birthday).getFullYear()));
// Returns: Age when John Smith was hired: 23

In this scenario, the function/object Person is called a prototype. I won’t go into more detail about prototypes as the topic is specialized and can get quite complex. It’s well-documented in books and articles if you’re interested in creating your own complex objects.

As soon as a prototype relationship exists, the for-in loop returns not only the Employee properties are returned, but the Person properties (and methods), as well:

for (var prop in emp) {
  console.log(prop + " = " + emp[prop]);
}
/* Returns:
HireDate = Mon Jul 27 2015 19:12:29 GMT+0200
PayRate = 15
FirstName = John
LastName = Smith
Birthday = Tue Feb 25 1992 00:00:00 GMT+0100

FullName = function () {
    return 
    this.FirstName + " " + this.LastName;
  }

Age = function () {
    var dtToday = Date();
    var todayYear = 
        new Date(dtToday).getFullYear();
    var bdayYear = 
        this.Birthday.getFullYear();
    return todayYear - bdayYear;
  }  */

Starting with the next post I’ll look at incorporating JavaScript into an html page environment, since that’s the host environment in a Web Add-in.



Leave a Reply