what is `this`?

20th May 2017

Vitor Fernandes

github.com/vmlf01

 

Toptal Developer at

KWAN: Love, Respect & Community

 

Angular PT organizer

 

Angular

Node.js

.Net

Given:


const foo = {
  log: function () {
    console.log(this);
  }    
};

 

What is the output of:

 

 

foo.log();

 

 

 

Given:


const foo = {
  log: function () {
    console.log(this);
  }    
};

 

What is the output of:

 

 

foo.log.call();

 

 

 

Given:


const foo = {
  log: function () {
    console.log(this);
  }    
};

 

What is the output of:

 

 

foo.log.call('me');

 

 

 

`this` definition:

`this` is a keyword that is evaluated at runtime using the lexical environment of the running execution context

say what???

important things:

runtime and execution context

 

`this` doesn't really depend on your source code structure

 

It depends on how the code is getting executed

function execution modes

  • function
  • method
  • constructor
  • apply/call

function

 

function printThis() {

  console.log(this);

}

 

// function form

printThis();

 

`this` will have the value of the global object (`window` or `global`), or `undefined` if the function being called is in strict mode.

Problems:

No problems, you're using strict, right?

method

 

function printThis() {

  console.log(this);

}

const obj = {

  printThis: printThis

};

 

// method form

obj.printThis();

 

`this` will have the value of the object on which the method is being invoked on

 

Problems:

Inner functions

define their own this

constructor

 

function printThis() {

  console.log(this);

}

 

// constructor form

const obj = new printThis();

 

`this` will have the value of the new object being constructed

 

Problems:

Can be called without `new`, which can lead to global scope pollution

apply

 

function printThis() {

  console.log(this);

}

 

// apply form

printThis.apply('a', <arg1>, <arg2>, ...);

 

// call form

printThis.apply('b', [<arg1>, <arg2>, ...]);

 

`this` will have the value of the argument we provide

 

Problems:

none?

apply special case: bind


function printThis() {

  console.log(this);

}


// bind form

const printThat = printThis.bind('that');

printThat();


`this` will have the value of the argument we provide

 

Problems:

none?

arrow functions

 

const printThis = () => {

  console.log(this);

};

 

// arrow function

printThis();

 

arrow functions don't define a `this` binding, so it will use the value from its lexical scope

 

Problems:

Not appropriate for defining methods

samples

Sample 1: function form
Sample 2: function form, strict mode
Sample 3: method form
Sample 4: duck typing
Sample 5: this is where the fun starts
Sample 6: fixing it with apply
Sample 7: fixing it with arrow functions
Sample 8: problems with callbacks

 

recap

`this`is a mechanism to provide context information to the function being executed, making it possible for a function to change behaviour based on its contents.

 

It depends on how

the function is called

when to use

In reality, I only see its usefullness when dealing with objects.

 

My advice: stay away from it in all other cases

Q&A

References

Made with Slides.com