Utilizing a class instance as a static property - a step-by-step guide

Question

Utilizing a class instance as a static property - a step-by-step guide

In my code, I am trying to establish a static property for a class called OuterClass. This static property should hold an instance of another class named InnerClass.

The InnerClass definition consists of a property and a function as shown below:

// InnerClass.gs

function InnerClass() {
  this.myProperty = 42;
}

InnerClass.prototype.myFunction = function() {
  return 43;
};

On the other hand, here is the OuterClass definition which only contains the static property:

// OuterClass.gs

function OuterClass() {
}
OuterClass.innerClass = new InnerClass();

However, when I attempt to invoke methods from the inner class, I encounter the following error message:

TypeError: Cannot find function myFunction in object [object Object].

// myScript.gs

function myScript() {

  console.log(OuterClass.innerClass.myProperty);   // 42.0
  console.log(OuterClass.innerClass.myFunction()); // TypeError: Cannot find function myFunction in object [object Object].

  var anotherInnerClassInstance = new InnerClass();
  console.log(anotherInnerClassInstance.myFunction()); // 43.0
}

Based on my analysis, it seems that the issue lies with the static property OuterClass.innerClass due to the following reasons:

The constructor for InnerClass gets hoisted, while InnerClass.prototype.myFunction does not.
During the instantiation of OuterClass.innerClass, it becomes incomplete because InnerClass.prototype.myFunction was not hoisted and therefore not attached to the created instance yet.

I wonder if there is a way to utilize a class instance as a static variable? It's worth noting that I have to work with prototype-based classes since I'm using Google Apps Script which relies on an outdated version of JavaScript.

If you are unable to reproduce this issue, here is the link to the Google Sheet causing the error: https://docs.google.com/spreadsheets/d/1Gxylcrbg9rWHGmc68CgHFmZqJ20E5-pLgA6fmHkxhAA/edit?usp=sharing

Additionally, here is a direct link to the script project: https://script.google.com/d/1V0FYrgiB3a4rTtvd9StyDtWAZ13AqlPl4rpgauCWSKk46UbcdIj9nqJC/edit?usp=sharing

javascript google-apps-script

Answer 1

Answer №1

To work around the issue, I opted for using a getter to lazily initialize the static property class instance. While it may be more verbose, this approach ensures that hoisting is not a concern.

// OuterClass.gs

function OuterClass() {
}

OuterClass.getInnerClass = function() {
  if (OuterClass.innerClass === undefined) {
    OuterClass.innerClass = new InnerClass();
  }
  return OuterClass.innerClass;
}

Answer 2

To work around the issue, I opted for using a getter to lazily initialize the static property class instance. While it may be more verbose, this approach ensures that hoisting is not a concern.

// OuterClass.gs

function OuterClass() {
}

OuterClass.getInnerClass = function() {
  if (OuterClass.innerClass === undefined) {
    OuterClass.innerClass = new InnerClass();
  }
  return OuterClass.innerClass;
}

Answer 3

Answer №2

Parsing sequence

While the exact internal parsing process of script files in Rhino runtime remains unknown to me (assuming you utilized it instead of the newer V8 as indicated by your project), the migration guide states that file order does not impact Rhino's execution. It is implied that the codebase is concatenated before being parsed.

The process appears to rely somewhat on file creation order. Through simple closures examining call orders, I consistently replicated the issue in Rhino. Here is an illustration:

//bbbb.gs - created first

function Parent() {}
Parent.child = (function () {
  console.log("child assigned");
  return new Child();
})();

//aaaa.gs

function Child() {
  console.log("child constructor");
}
Child.myMethod = (function () {
  console.log("child static method assigned");
  return function () {}
})();

Child.prototype.myMethod = (function () {
  console.log("child method assigned");
  return function () {}
})();

function testCP() {
  console.log( Parent.child.myMethod );  
}

When running testCP, the expected call order in the log is observed:

https://i.stack.imgur.com/xj2of.png

Switching the code between files alters the logs (achieving the desired outcome):

https://i.stack.imgur.com/HjGNz.png

Alternate resolution

Your suggested lazy loading (singleton pattern) solution should suffice; however, incorporating dependency inversion for added flexibility and making InnerClass a strict dependency could be beneficial:

//bbbb.gs

function Parent() {}
Parent.setChild = function (child) {
  Parent.child = new child();
}

//aaaa.gs (unchanged code)

function testCP() {
  Parent.setChild(Child);
  
  console.log(Parent.child.myMethod); //function () {}
}

Now, the functionality operates smoothly regardless of the direction:

https://i.stack.imgur.com/tWwBU.png

Answer 4

Parsing sequence

While the exact internal parsing process of script files in Rhino runtime remains unknown to me (assuming you utilized it instead of the newer V8 as indicated by your project), the migration guide states that file order does not impact Rhino's execution. It is implied that the codebase is concatenated before being parsed.

The process appears to rely somewhat on file creation order. Through simple closures examining call orders, I consistently replicated the issue in Rhino. Here is an illustration:

//bbbb.gs - created first

function Parent() {}
Parent.child = (function () {
  console.log("child assigned");
  return new Child();
})();

//aaaa.gs

function Child() {
  console.log("child constructor");
}
Child.myMethod = (function () {
  console.log("child static method assigned");
  return function () {}
})();

Child.prototype.myMethod = (function () {
  console.log("child method assigned");
  return function () {}
})();

function testCP() {
  console.log( Parent.child.myMethod );  
}

When running testCP, the expected call order in the log is observed:

https://i.stack.imgur.com/xj2of.png

Switching the code between files alters the logs (achieving the desired outcome):

https://i.stack.imgur.com/HjGNz.png

Alternate resolution

Your suggested lazy loading (singleton pattern) solution should suffice; however, incorporating dependency inversion for added flexibility and making InnerClass a strict dependency could be beneficial:

//bbbb.gs

function Parent() {}
Parent.setChild = function (child) {
  Parent.child = new child();
}

//aaaa.gs (unchanged code)

function testCP() {
  Parent.setChild(Child);
  
  console.log(Parent.child.myMethod); //function () {}
}

Now, the functionality operates smoothly regardless of the direction:

https://i.stack.imgur.com/tWwBU.png

Answer 5

Answer №3

After reading through the comments on this question, it seems that your code functions perfectly for me whether it's all in one script or spread across three separate files. The only adjustment I made (as mentioned by Diego) was swapping out console for Logger.

When I run the function myScript(), the logs generated in Apps Script are as follows:

[20-07-11 09:45:12:345 PST] 42.0

[20-07-11 09:45:12:346 PST] 43.0

[20-07-11 09:45:12:347 PST] 44.0

If you prefer to write your code initially in either pure JavaScript or TypeScript before transitioning to Apps Script, I recommend utilizing Clasp.

Answer 6

After reading through the comments on this question, it seems that your code functions perfectly for me whether it's all in one script or spread across three separate files. The only adjustment I made (as mentioned by Diego) was swapping out console for Logger.

When I run the function myScript(), the logs generated in Apps Script are as follows:

[20-07-11 09:45:12:345 PST] 42.0

[20-07-11 09:45:12:346 PST] 43.0

[20-07-11 09:45:12:347 PST] 44.0

If you prefer to write your code initially in either pure JavaScript or TypeScript before transitioning to Apps Script, I recommend utilizing Clasp.

Utilizing a class instance as a static property - a step-by-step guide

Answer №1

Answer №2

Answer №3

Similar questions

Encountered an error while attempting to access property 'someProperty' of an undefined value in a React application

What is the best way to show static files from the backend in a React application?

explore the route with the help of jquery scrolling feature

How can I set up flat-pickr for date and time input with Vue.js?

Methods for updating the value of a `<select>` element in an AngularJS controller

Error: Vue.js application requires the "original" argument to be a Function type

Guide to toggling the anchor tag functionality as a button with JavaScript

Stopping a build programmatically in Next.js involves implementing specific steps that aim to halt

Tips for Drawing Lines and Preserving Them When a Condition is Met

What could be causing my callback function to fail when used within a nested function?

Regex: Enabling commas in the name of an Excel file

The data type 'string[]' cannot be assigned to the data type '[{ original: string; }]'

Creating a pie chart with a legend in the realm of the dojo

Creating a simulation of a JavaScript callback within a C# host program

Looking to incorporate CGST and SGST into the Subtotal using JQuery?

Utilizing the Twitter API 1.1 to retrieve a list of tweets

Why does getElementById work when getElementsByClassName doesn't?

Assessing the validity of a boolean condition as either true or false while iterating through a for loop

The AJAX request fails to trigger following the onbeforeunload event except when the page is manually refreshed

Ways to identify when the scroll bar reaches the end of the modal dialog box