005_1_this.md

This keyword

This references the object executing the function.

What is this...?

1. This on an object's method refers to the object itself
2. This on a constructor function's method refers to the constructor function
3. This on a function refers to the global scope
4. This on a function in a method as callback function refers to the global scope

Note: In relation to 3 and 4, if the container function uses strict mode, the value of this will be undefined instead of the global object.

On an object's method

const person = {
  name: 'Peter',
  logThisContext() {
    console.log(this);
  }
}

person.logThisContext();
// {
//   name: 'Peter',
//   logThisContext: ƒ logThisContext()
// }

On a constructor function method

function Person() {
  this.name = 'Peter';
  this.logThisContext = function() {
    console.log(this);
  }
}

const peter = new Person('Peter');

peter.logThisContext();
// Person {
//   name: 'Peter',
//   logThisContext: ƒ (),
//   __proto__: { constructor: ƒ Person() }
// }

On a function

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

logContextOfThis(); // Window object

On a function WITH strict mode

function logContextOfThis() {
  'use strict'
  console.log(this);
}

logContextOfThis(); // undefined

On a function in a method as callback

const person = {
  name: 'Peter',
  nicknames: ['Pet', 'P', 'Pe'],
  logNicknames() {
    this.nicknames.map(function() { console.log(this) });
  }
}

person.logNicknames(); // Window object

On a function in a method as callback WITH strict mode

const person = {
  name: 'Peter',
  nicknames: ['Pet', 'P', 'Pe'],
  logNicknames() {
    'use strict'
    this.nicknames.map(function() { console.log(this) });
  }
}

person.logNicknames(); // undefined

Changing this context

1. Arrow function
2. Assign this to a variable
3. Using Function.prototype.call() or Function.prototype.apply() or Function.prototype.bind()

We can use an arrow function which will inherit this from the container function, in this case logNicknames()

const person = {
  name: 'Peter',
  nicknames: ['Pet', 'P', 'Pe'],
  logNicknames() {
    this.nicknames.map(() => console.log(this));
  }
}

person.logNicknames();
// {
//   name: 'Peter',
//   nicknames: [ 'Pet', 'P', 'Pe' ],
//   logNicknames: ƒ logNicknames()
// }
// {
//   name: 'Peter',
//   nicknames: [ 'Pet', 'P', 'Pe' ],
//   logNicknames: ƒ logNicknames()
// }
// {
//   name: 'Peter',
//   nicknames: [ 'Pet', 'P', 'Pe' ],
//   logNicknames: ƒ logNicknames()
// }

We can assign this to a variable

const person = {
  name: 'Peter',
  nicknames: ['Pet', 'P', 'Pe'],
  logNicknames() {
    const self = this;
    this.nicknames.map(function() { console.log(self) });
  }
}

person.logNicknames();
// {
//   name: 'Peter',
//   nicknames: [ 'Pet', 'P', 'Pe' ],
//   logNicknames: ƒ logNicknames()
// }
// {
//   name: 'Peter',
//   nicknames: [ 'Pet', 'P', 'Pe' ],
//   logNicknames: ƒ logNicknames()
// }
// {
//   name: 'Peter',
//   nicknames: [ 'Pet', 'P', 'Pe' ],
//   logNicknames: ƒ logNicknames()
// }

We can use function() {}.bind(this);

const person = {
  name: 'Peter',
  nicknames: ['Pet', 'P', 'Pe'],
  logNicknames() {
    this.nicknames
      .map(function() { 
          console.log(this);
        }.bind(this)
      )
  }
}

person.logNicknames();
// {
//   name: 'Peter',
//   nicknames: [ 'Pet', 'P', 'Pe' ],
//   logNicknames: ƒ logNicknames()
// }
// {
//   name: 'Peter',
//   nicknames: [ 'Pet', 'P', 'Pe' ],
//   logNicknames: ƒ logNicknames()
// }
// {
//   name: 'Peter',
//   nicknames: [ 'Pet', 'P', 'Pe' ],
//   logNicknames: ƒ logNicknames()
// }