Skip to main content

Javascript in all its weirdness: What is 'this' ?

The this pointer, people's favorite in languages including Javascript was a great source of pain for me when I was developing a Javascript drop down custom component. I learned today that it was 'this' that caused me problems!

Generally, 'this' refers to the global object. It also takes on different values based on your scope/context.
-In a global constructor, global function and global code, this refers to the global object ( the first should not be the case in strict mode in ECMAScript5)
-In a method of an object, 'this' refers to the object


// this pointer
name='what?'  // same as this.name

var p = function () {
     console.log(this.name);  // changes the global name, as no var name is defined locally
     name = 'again?';
     console.log(this.name);
}
p();

// the global this.name was modified by the function p
// Why? because p is a global function,
// and this refers to the global object in that function
console.log(name);


Now see how it works in object scope. The first and last log() statements print the global this.name, while the method p of the object q understands 'this' to be the object aQ which is an instance of q.


name='what?'
console.log(name);

var q = function(newname) { this.name = newname;}
q.prototype.p = function () {
     console.log(this.name); // 'this' here is the object instance of q
    };

aQ = new q('new Name');   
aQ.p();

bQ = new q('new Name2');   
bQ.p();
bQ.name='changed Name2'; // this changes the name of the instance bQ
bQ.p(); // this lines proves the previous statement

console.log(this.name); // this is still the global this.name
 
This is especially important to know in callbacks, when a function is passed as an argument to another function, the use of this should be done carefully

Comments

Post a Comment

Popular posts from this blog

Using Sublime Text build system to open your files in your favorite Mac app

A quick hack on Sublime text when working on Macs is to get the editor to invoke the 'open' command so that you can hit command+B to 'open' the file in your favorite app. My favorite use for it is when editing html files, i want it to open in my favorite browser. On a Mac, 'open' is the equivalent of the default file association in Windows, such as when you click on a text file, you can have it open in your favorite editor. In sublime, go to Tools > Build System Select New build system In the file that opens type this in into the pre-filled section and save the file with a name you want, such as 'open.sublime-build': { "cmd": ["open", "$file"] } Then go back to the file you were editing, Tools > Build System. Now select your newly saved build system. Now every time you hit command + B you get the file to open on Chrome (which is what my Mac is setup by default to open html files with)! Obvi...
Post a Comment
Read more

Two cool ways to center content in CSS

You may have seen this question, center a div, or whatever, in interviews or other places. I am sure there are other approaches than I am sharing here, but I found these two cool ideas from multiple places (see refs at the end). These are not my original ideas so I will be sure to share where I learned these from:   Using display:flex  Make sure you know how flex works, but to do centering with flex, it's ridiculously simple: div .container { display : flex ; justify-content : center ; /* horizontal alignment */ align-items : center ; /* vertical alignment */ flex-direction : column ; /* since we are doing a vertical column */ padding : 1rem 3rem ; /* not related to centering */ }  Now everything inside <div class="container"> </div> will be centered in both directions! Using display:grid  You are so going to thank for me this one, you are welcome. This one is so simple it does not even need an explanation does it?   div .conta...
Post a Comment
Read more

How to use function closure to capture common arguments in python

Sometimes you need a function that already 'captures' some information you don't want to repeat when calling it. For example, logging may require you to pass in a lot of contextual information for each call. Instead you can capture the common/unchanging contextual information in a function (using its clsoosure) then call the resulting function with less args (only those that are changing in each call site)   class AClass:   def __init__(self):     self.make_log_msg = lambda m: f"a={self.a}, b={self.b}, message={m}"  def do_something(self):     doStuff();     logger.info(self.make_log_msg('test message')) In the absence of the make_log_msg() function you would need to pass all of a,b,c into every logging function call as in self.make_log_msg(self.a, self.b, message) .  This is possible because make_log_msg returns a function (lambda function in this case) that already captures the values self.a and self.b in its closure at the t...
Post a Comment
Read more