Create an instance using the window object in JavaScript

Having an issue when trying to instantiate a class using the window object. I have a namespace called UTIL and within it, there is a class defined as follows:

var UTIL = { Classes : {}};

UTIL.Classes.ObservationVal = function(state, id, type, context, performer, addresee, query) {
    this.query = query;
    SPEECH.Classes.ActionVal.call(this,state, id, type, context, performer, addresee);
}

UTIL.Classes.ObservationVal.prototype = new SPEECH.Classes.ActionVal();
UTIL.Classes.ObservationVal.prototype.constructor = SPEECH.Classes.ObservationVal;

Later on, I have the following code snippet:

var name = "ObservationVal";
var clStr = "UTIL.Classes." + name;
var obj = new window[clStr]();

However, this last line results in the error: "window[clStr] is not a constructor"

I am confused as to why the instantiation fails, given that the ObservationVal class is defined outside the namespace like this:

function ObservationVal(state, id, type, context, performer, addresee, query) {
//..
}

Instantiating with window works fine in this case. Thank you.

Answer №1

The reason for this discrepancy is that foo["bar.baz"] does not match with foo.bar.baz. It appears that you may require a syntax similar to window.UTIL.Classes[name] in this case.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What are the benefits of declaring variables with JSON in a JavaScript file instead of simply reading JSON data?

Lately, I've been delving into the world of leaflets and exploring various plugins. Some of the plugins I've come across (like Leaflet.markercluster) utilize JSON to map out points. However, instead of directly using the JSON stream or a JSON fi ...

Challenges with Access-Control-Allow-Origin within the website's domain

Why am I encountering an issue when attempting to make an XMLHTTPRequest from a JavaScript file to a web service on the same domain, resulting in: Access-Control-Allow-Origin error stating that the origin is not allowed? Switching mydomain.com to localh ...

The TypeScript datatype 'string | null' cannot be assigned to the datatype 'string'

Within this excerpt, I've encountered the following error: Type 'string | null' cannot be assigned to type 'string'. Type 'null' cannot be assigned to type 'string'. TS2322 async function FetchSpecificCoinBy ...

Add information to the Database seamlessly without the need to refresh the page using PHP in combination with JQuery

Check out my code below: <form action='insert.php' method='post' id='myform'> <input type='hidden' name='tmdb_id'/> <button id='insert'>Insert</button> <p i ...

Troubleshooting: Issues with Angular form validation functionality

I am completely new to Angular and attempting to create a signup form. Despite following tutorials, the form I've built doesn't seem to be validating properly. Below is the code that I have been using: <div class="signup-cont cont form-conta ...

Tips for creating multiple functions within a single JavaScript function

Is there a way to combine these two similar functions into one in order to compress the JavaScript code? They both serve the same purpose but target different CSS classes. The goal is to highlight different images when hovering over specific list items - ...

Is there a way to specifically call the last promise in a loop?

I'm new to promises and could use some help. I have a situation where promises are resolving randomly, how can I ensure that the last promise in the loop is resolved after the full loop executes? For example, if this.selectedValues has 4 values, som ...

Discovering visible ID numbers on the screen

My content includes the following: <div id="sContainer"> <div class="message0" id="l0">Initial Content 111</div> <div class="message1" id="l1">Initial Content 222</div> <div class="message2" id="l2">Initial ...

Three.js Photometric Function

Is there a way to specify a photometric function in Three.js? Currently, I am utilizing a Lambert material: new THREE.MeshLambertMaterial({ color: 0xffffff }) However, I am interested in using a Lommel Seeliger but I am unsure of the process and locatio ...

Contact a relaxation service periodically to pause its operation

To continuously check the status of a webservice, I need to make a REST call every x seconds (3000 ms) until the desired result is obtained or until it has been attempted 12 times. The call should also stop once the expected status is received: function m ...

The p5.play library does not function properly on repl.it

I've recently started using p5.play, but I keep encountering this error whenever I try to run a program (I'm using repl.it); p5 is having issues creating the global function "Animation", possibly because your code already uses that name as a va ...

Utilize v-for to dynamically showcase a variety of images on your

My goal is to showcase several JPG pictures located in the src/assets/images folder by utilizing the v-for directive. However, it seems like the browser is having trouble locating them. Interestingly, manually adding the pictures with the same paths works ...

Show the menu when hovering in reactjs

Currently, in my react project, I am implementing dropdown menus using the reactstrap css framework. Example.Js <Dropdown className="d-inline-block" onMouseOver={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ...

Sending Svelte data to Javascript with an onclick event

In my Svelte store, I have an ASCII-Logo that I want to integrate into a button spanning two symbols ("-."). However, I do not want to split the ASCII into separate parts and just insert the button between them on my +page.svelte. Currently, I h ...

Variable for Ajax success not set even though the other data was returned

UPDATE: While the main question remains unchanged, I have modified the approach to now return a getButtons() function instead of a global buttons array. I am utilizing an AJAX request to fetch data from the server in order to populate a popup box, which i ...

Utilizing the request body value within the .withMessage() function of the Express validator chain

I am looking to showcase my express validator errors with the specific value entered by the user. For instance, if a user types in an invalid username like "$@#" (using a regex that I will provide), I want to return my error message as follows : { "er ...

Passing the value in a td element to a JavaScript function using Thymeleaf onClick

Trying to utilize "Thymeleaf" for the first time, I am attempting to pass a value to JavaScript with the following code: onclick="getPropId('${properties.id}')" The corresponding function is as follows: getPropId(inputID){alert(inputId);} Unf ...

Draggable slider not functioning properly with linear interpolation

Recently, I've been delving into the world of "linear interpolation" and its application in creating easing effects. However, while the easing functionality of the draggable slider seems to be operational, I'm encountering an issue. The slider re ...

Retrieving URL Parameters in Meteor-React's createContainer

In my React/Meteor application that utilizes react-router, I am attempting to pass the URL parameters (for example, /user/P8HDQMAuapRESoWo6) into createContainer. This function fetches the result of the initial MongoDB query: let user = Meteor.users.findO ...

Encountering issues with gulp-angular-templatecache while processing angular templates through pipelining

I've encountered an issue with gulp-angular-templatecache in my gulpfile. Here's the task causing trouble: gulp.task('templates', function() { return gulp.src(paths.angularTemplates) .pipe(templateCache()) ...