Blog

Front End Development topics with a touch of humor

Other facets of this

This--everlasting source of blog posts

October 4, 2020


We saw earlier that the value of this defaults to Window.

             console.log(this);
             //Window
         
            function hi() {
                console.log(this);
            }
            hi();
            //Window
        

Except in strict mode:

            function strictHi() {
                "use strict";
                console.log(this);
            }
            strictHi();
            //undefined
        

Let's try out some different scenarios.

An immediately invoked function expression (IIFE; no one wants to type that more than once a post!) is a function that runs as soon as it's defined. Let's see what happens to this inside one.

            (function () {
                console.log(this);
            })();

            //Window
        

The this inside an IIFE is the same as for a normal function.

            function Pirate(name, motto) {
                this.name = name; 
                this.motto = motto;
                this.sayThis = function() {
                    console.log(this);
                }
            }
            const john = new Pirate("Long John Silver", "Shiver me timbers!");
            john.sayThis();
            //Pirate
        

The this of the instance created by the constructor function points to the instance (in this case, john).

Let's say our pirate, john, attends a ventriloquist's show. Our grizzled man of the sea is astonished, just like everyone else, when the magician uses bind.

            const dummy = { name: "Silent Bob", material: "wood" }; 
            dummy.talk = john.sayThis.bind(dummy);
            dummy.talk();
            //{name: "Silent Bob", material: "wood"}
        

What has happened? From the dummy's inanimate mouth comes john's voice, uttering a new this. The magic trick of bind has momentarily stolen john's sayThis method and bound it to the dummy. Incredible!

Someone, somewhere, thought this would be an appropriate toy for a child.

The ES6 "fat-arrow function" is not just terse and slick-looking; it actually hasa different behavior.

            const arrowFunc = () => console.log(this);
            //Window

            const obj = { 
                X : "Marks the spot",
                arrowMethod : () => console.log(this.X),
                regMethod: function() { console.log(this.X)}
            }

            obj.regMethod();
            //"Marks the spot"

            obj.arrowMethod();
            //undefined
        

This is a contrived example, as you probably wouldn't want to mix old-school function syntax and ES6 syntax in the same object, but it demonstrates the behavior of the language. The regular function uses the object the method is in for the execution context: thus, the this is obj. The fat-arrow function does no define this, so it returns undefined.

How to use these properties? Well, let's say we had an object and we want the method of object to be able to modify the object? This is the basic use-case for this.

            const pirateAgenda = {
                treasureChest: 100,
                loot: function() { this.treasureChest++ },
                wench: () => { this.treasureChest - 50 }
            }
            pirateAgenda.loot();
            console.log(pirateAgenda.treasureChest);
            //101
            console.log(pirateAgenda.wench());
            //undefined
            console.log(pirateAgenda.treasureChest);
            //101
        

Here we've set up an object with three properties--treasureChest with a starting value of 100, loot a normal function which increments ye olde chest, and wench, an expensive activity which decrements it.

Everything works fine when the pirate loots--the treasureChest is augmented! But when he wenches, nothing happens! We subtracted 50 and nothing happened--it didn't work.

Ah, I see what happened! Our clever pirate friend realized that he tended to splurge on shore leave, and so he leaves the treasure chest behind. Whatever doubloons he spends in town, he must have got it in town through other ways. Sly, but not very nice. But then, he is a pirate, so what do you expect?