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.
How can I dynamically populate a select statement with options retrieved from PHP code? <select name='friends[]' id='friends' class='selectpicker show-tick form-control' data-live- search='true' multiple& ...
I'm having some issues with my code. I am attempting to use passport authenticate in order to save patient information that is specific to the token generated for each individual. router.get("/current", passport.authenticate("jwt", { session: false }) ...
My system includes an input search field where I can enter the make and/or model of a vehicle to conduct a search based on that term. The challenge arises when attempting to distinguish between the make and model, especially for makes with multiple words ...
I am currently working on creating a comments section for a web application. The front end of the app displays information about the threading level of each comment. When users submit comments, I need to pass this threading information to the back end in o ...
Currently, I am using Postman to test the API that I am developing with express. In this process, I am creating a series of tests. Below is a brief example: tests["Status code is 200"] = responseCode.code === 200; // Verifying the expected board var expe ...
(function( $ ){ var functions = { init : function( options ) { var settings = $.extend({ //Declaring default settings that can be overridden in the plugin call code: 7, listHe ...
Trying to move away from using the likes of Grunt or Gulp in my projects, I've been exploring npm-scripts as a potential replacement. While npm-scripts makes use of `package.json`, I've found that more advanced build processes require command lin ...
<?php $i = 1; $query1 = mysql_query("SELECT * FROM `alert_history` ORDER BY `alert_history`.`id` DESC LIMIT ".$start.",".$per_page.""); while($result = mysql_fetch_array($query1)){ echo '<td colspan = "2">& ...
How can I set a default value for a dynamically filled dropdown menu featuring all 12 months in KnockoutJS? I want the default value to be the current month. This is how I am populating the dropdown with information: self.setMonthData = (data ...
Featuring multiple elements with an ng-class that behaves similarly to a ternary operator: ng-class="$ctrl.something ? 'fa-minus' : 'fa-plus'" To access these elements, we can compile all the ones with fa-minus and store them in a lis ...
Despite the fact that several questions have been answered on this topic, none of them seem to be effective in this particular scenario. function login(u,p) { console.log(1); return $.post(url, {u,p}); } function out() { console.log(3); //a f ...
I'm having trouble validating route parameters in my page component using the following code: async validate({ params, store }) { await store.dispatch(types.VALIDATE_PARAMS_ASYNC, params.id) } And here's the corresponding code in the store: ...
I've implemented fancybox to display certain pages on my website, but I'm struggling with setting a fixed height and enabling scrolling for content that exceeds this height within the fancybox. Here are the parameters I have used: <script> ...
Utilizing the 'soft-assert' library (soft-assert library) allows me to implement assertions in my test steps without halting the entire test if any of them fail. While softAssertAll() command works effectively to verify all soft-assert at the en ...
I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...
I have a challenging JavaScript task that I've been struggling with for quite some time. The goal is to display a div for 5 seconds, hide it, wait for 15 minutes, then show it again for another 5 seconds, and continue this process in an infinite loop. ...
Ever since updating to ColdFusion 2016 Update 4, I've been experiencing a new issue. Here's the code snippet: <input type='button' name='btn' value='Click me' onclick='proxyFunc();'> Incorporating ...
I am currently experimenting with incorporating an infinite loop before the prodNum and quantity prompts to consistently accept user input and display the output in a table. Although the program is functional when executed, it fails to showcase the table ...
I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...
click here to see the image $(document).ready(function() { $('.editbtn').on('click', function(){ $('#editmodal').modal('show'); $tr=$(this).closest('tr'); var da ...