I am currently working with ES6 Classes and I'm struggling to grasp why I am able to access the this variable within one of the methods.
//CODE
class Form{
constructor(){
var self = this;
}
assemble(){
log(self);
}
}
//INVOCATION
var form = new Form();
form.assemble();
//RESULT
window object (not a reference to the class object)
this is not a variable. It functions more like a concealed argument in functions.
In the given example, you cannot access self because it is a local variable confined within the constructor and therefore unavailable to your assemble method.
For this particular scenario, you actually do not require self at all; simply utilize this:
class Form {
assemble(){
log(this); // ***
}
}
var form = new Form();
form.assemble();
If you were passing form.assemble into something where the correct usage of this was not guaranteed, you could define assemble as an instance function member by defining it within the constructor; thus closing over self. Nonetheless, in ES2015 and beyond, there is no need for self; instead, use an arrow function which closes over this:
class Form {
constructor(){
var self = this;
this.assemble = () => {
log(this);
};
}
}
var form = new Form();
form.assemble(); // Functions correctly
var f = form.assemble;
f(); // Also works fine
However, chances are high that this additional step is unnecessary.
Simply put, I am working on a design where a gradient bar moves above a specific element when hovered, creating a visual effect of a triangle. I am now looking for a way to center an SVG inside the element on hover, to create a similar triangular gradient ...
I'm facing an issue where I am trying to store data in an Express session, but it seems that Express is treating each AJAX request as a new session and not saving my data consistently. Here's the client-side code: $.ajax({ url: '/orders& ...
I recently implemented react-snap to generate static HTML for my website. However, I encountered some SEO issues after implementing react-snap. The old URLs (which were without slashes) are now redirecting to new URLs with slashes. For example: This URL: ...
Are there ways to debug GLSL code or display variable values directly from within the GLSL code when using it with WebGL? Does three.js or scene.js offer any features for this purpose? ...
Within my template, I have an img tag that is linked to a state known as "imageBuffer" <img v-bind:src="imageBuffer" alt="" /> In the logic of the page, there are two file inputs and I've utilized a single function to manag ...
I'm currently working on displaying and parsing JSON data in the success function of an AJAX call. This is what I have so far: AJAX: data = "Title=" + $("#Title").val() + "&geography=" + $("#geography").val(); alert(data); url= "/portal/getRe ...
Currently, I am working with Angularjs Protractor for end-to-end testing and faced an issue while trying to calculate the sum of values in a column. Although I am able to print out each value within the loop successfully, I am struggling to figure out ho ...
Can anyone offer assistance with creating three radio button fields that will display yearly, monthly, or weekly data on a column chart? I have searched through numerous examples in JQchart but haven't found one for this specific scenario. Are there o ...
Whenever a user logs in, I want to update their data in Firestore. However, the code I am using does not seem to work as expected. It fails to create a custom User object from the firebase.User. Can anyone help me understand why this is happening and how ...
When opening a popup window with a specific URL, I typically use the following code: $("#OpenFolder").click(function () { var url = "https://stackoverflow.com"; windowObjectReference = window.open(url, "ModulesList", " ...
I am currently developing a web application utilizing a three-tier architecture with express and docker. I am integrating mysql as the database to store user accounts. Below is my initialize-database.sql file: CREATE TABLE accounts( personId INT NOT N ...
The Material UI (React) Select component is not expanding in width as expected, even with the autoWidth property. <FormControl margin="dense"> <InputLabel id="prefix-label">Prefix</InputLabel> ...
<TableBody> {(() => { var result = []; let key = Object.keys(genericResultList)[1]; var list = genericResultList[key]; for (var i = 0; i < list.length; i++) { ***\<!-- Add in the \<T ...
After utilizing the localization helper created by Matt Hawley, I found it to be incredibly effective. However, I am encountering an issue when attempting to retrieve the values in javascript/jQuery. For example, I am unable to fetch the resource text usi ...
I am currently developing a Chrome extension where I want to display both images and text in the popup window. Everything seems to be working fine, however, when the JSON data for the image src is empty, I'm struggling to set a default image. Despite ...
Our project utilizes NPM in conjunction with Browserify for managing third-party dependencies, which pairs well with AngularJS due to the CommonJS-modules. Below is a code snippet showcasing the dependency structure that integrates seamlessly with Angular ...
Encountering issues with creating an object store in IndexedDb while trying to build a Metro app using Javascript. The code snippet below shows my attempt within the 'dbReq.onsuccess' function that is supposed to create the object store upon succ ...
In the structure of my code, I have the following setup. <!-- first.tpl --> <script> $(document).ready(function() { objIns.loadNames = '{$names|json_encode}'; } ) </script> {include file="second.tpl"} <! ...
I'm currently facing an issue with setting up routing for my angular portfolio. Despite checking my code against a previous app, I am unable to identify the error as there are no console logs when I compile. Can someone please review my code layout an ...
<div class="navigation"> <a class="prev" href="index.php?month=__prev_month__" onclick="$('#calendar').load('index.php?month=__prev_month__&_r=' + Math.random()); return false;"></a> <!-- <div class="title" & ...