Skip to main content

Javascript in all its weirdness: Constructors

Here is another one that has gotten me before, again ECMAScript 5 will take care of this mostly but until then it's tricky

given an object defined like this

var Obj = function(name) {
this.name=name;
};

What will the following do?
var o = new Obj('anewwin');
console.log(o.name);

As guessed, it will print 'anewwin' to the console

How about this?
var o = Obj('anewwin'); // No 'new' this time
console.log(o.name);

This time you get an error saying o.name does not exist. Why? Because Javascript interpreted 'this' inside the function as the global 'window' object instead. To prove this, add the following:

console.log(window.name); // This prints 'anewwin'

So, behind the scenes, in the absence of 'new', javascript is assigning 'this' to the global window object, thus causing confusion. ECMAScript 5 is supposed to stop assigning 'this' to the global object, for everyone's good.

Until then, the recommended fix is to never call without new, or for safety, do the following

function Obj() {
if (!(this instanceof Obj) ) {
return new Obj(); // To protect against invocations not using new, bounces back to this constructor but with proper object syntax
}
// continue with rest...
}

This makes sure the constructor does not mistakenly use the global 'this' object.

Reference: "Javascript Patterns", Stoyan Stefanov
Labels:

Comments

Post a Comment

Popular posts from this blog

Unit testing code that uses environment variables and system properties with fakes

I did not exactly learn this today, but I am sharing it as I have found it extremely useful when unit testing code that depends on environment or system property settings. While I am using Java as an example, the general concepts apply any where. Problem : You have a piece of code you are unit testing that uses settings from env variables or system properties passed to the VM (System.getProperty), but you don't want the tests to be affected by the 'real' environment or system properties in the VM. So, your unit tests should not get different results or fail when the real environment changes. Solution : There are several. But the most straightforward is to use a mocking library to mock out the environment or fake it out, whatever your prefer. You can create a fake using a library like EasyMock, PowerMock etc. This I won't discuss in this post, since there are numerous articles for that. Or you can write a simple class that acts as a proxy, using the proxy pattern...
Post a Comment
Read more

Sending Form data to a backend REST API using Axios

This need is incredibly common and useful, and hopefully will save you a lot of time when doing server side calls from your UI application (or even non UI clients like NodeJS applications) Example here is to send a POST request to an endoint /api/item/new (which will create a new item in the database). We will just assume tbhe backend is already setup (it's not relevant to this article). All we need to know is that we can do a POST /api/item/new and send it form data with two pieces of info     name, filter So, if you have a node.js application (I was using Vue-cli generated project, but it does not matter), install 'axios' (a most popular tool to make server calls these days) npm i axios --save OR yarn add axios (my preferred method) Now, in your service JS file (which is generally when I keep all my api calls) do something like this createNew ( name , filter ) { let formData = new FormData (); formData . append ( "name" , ...
Post a Comment
Read more

CSS: em vs rem font sizes

 When do you use em and when do you use rem? If you have ever asked this, you are like me :) So welcome. Basically, to save you time here it is: - If you want your font-size relative to the container's font-size, use em - If you want your font-size relative to the 'root' (or html) element's font-size, use rem! If you just stop reading now that might be sufficient, but if you are more curious, go on. Example companion codepen: https://codepen.io/binodpanta/pen/RwLWRra Basically your page should ideally always have a default font-size specified for the root, such as  :root { font-size: 1em; } This typically becomes 16px default for the base font size. Now, if you use rems in your elements' styles you get a consistent scaling wrt this number! so if you do div.someclass { font-size: 0.5rem; } you are going to always get a nice scaled font size regardless of screen size. So all your fonts will scale relatively throughout the app!  If you had used 0.5em, your calculated ...
Post a Comment
Read more