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