this Basics; call/apply/bind (intro)

Intro to this

Method call this

// Method call: this is the object before the dot
const user = {
  name: "Ayla",
  say() {
    console.log("I am", this.name);
  }
};

user.say();

Plain call this

// Plain function call: this is undefined in strict mode
function show() {
  console.log("this is", this);
}

show();

Arrow this (lexical)

// Arrow functions do not have their own this
// They capture this from the surrounding scope
const team = {
  title: "Blue",
  start() {
    const report = () => {
      console.log("Team:", this.title);
    };
    report();
  }
};

team.start();

call vs apply

// call/apply invoke the function with a chosen this
function intro(lang1, lang2) {
  console.log("User:", this.name, "knows", lang1, "and", lang2);
}

const person = { name: "Mina" };

// call passes arguments normally
intro.call(person, "JS", "TS");

// apply passes arguments as an array
intro.apply(person, ["JS", "TS"]);

bind basics

// bind creates a new function with this fixed
function sayHi() {
  console.log("Hi from", this.name);
}

const dev = { name: "Lena" };

const sayHiFromLena = sayHi.bind(dev);

sayHiFromLena();
sayHiFromLena();

bind vs call/apply quiz

Recap