Who is the keyword “this”?

`this` – NBA Edition

The keyword `this` is a difficult javascript topic that has been debated and pondered over for centuries – more or less. Its meaning is ambiguous at first glance mainly because what the keyword `this` refers to changes depend on where it is called. Here we explore some of the various ways in which this will be changed throughout your use and we will use the NBA as the backdrop to the conversation. * Feel free to open your console in Chrome and follow along with the examples. The global scope is the NBA. If we open up our console in Chrome and type this, Chromes returns back the window object – or the NBA in our context. The same occurs with console.log(this).

Free Floating Functions belong to the NBA

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

whoIsThis(); // returns current context; 

When we call a free floating function like this, the keyword `this` is assigned to the context in which its called. If we type whoIsThis() in our console, `this` refers to the our global window scope. If we tried this in server side code, the keyword this refers to an internal node.js object.

Players and Methods use this Lets create Kevin Durant. Kevin has a method that references our whoIsThis function from above.

var kevinDurant = {
    shoot3pct: 0.391,
    jersey: "Durant",
    findOutWhoIsThis: whoIsThis
}

If a function is invoked as a method of a player/object the keyword `this` now refers to the player. Type `kevinDurant.findOutWhoIsThis()` in the console and the function returns the object! Remember, keyword `this` is set at run time. Using the same whoIsThis function above, `this` is now Kevin Durant and not the NBA.

Steal moves with Apply and Call Lets create a function to shoot 3 pointers

var shoot3PT = function() {
    if (this.shoot3pct === undefined) { 
        return "Error: NBA has no 3pt percentage";
    }
    if (Math.random() > this.shoot3pct) {
        return "3 points for "+ this.jersey +"!";
    } else {
        return "Shot missed, try again!";
    }
}

Try calling `shoot3PT()` in the console. Error! The first argument of the apply or call functions will set the context of the function. Since KD has a shoot3pct property, we will simulate a three point shot by Durant with these functions.

    shoot3PT.apply(kevinDurant) 
    // or shoot3PT.call(kevinDurant) 
    // both simulate a 3 pointer

Nightmare mode: Remember we can always refer to `shoot3PT` as a method on Kevin Durant. Imagine another player, say Stephen Curry, wants to also use that function. We could use `apply` to set the context to him.

    
    kevinDurant.shoot3PT = shoot3PT

    stephenCurry = {
       this.shoot3pct: 0.99,
       this.jersey: "Curry"
    } 

    // Here we call apply on a method 
    // from another Player object!

    kevinDurant.shoot3PT.apply(stephenCurry)

Stephen Curry is the context for the shoot3PT function because of apply. Think of the possibilities –
We can simulate an entire basketball game with Javascript!

Stay tuned: next week we will explore the Game of Thrones edition. 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s