DEV Community

Kaziu
Kaziu

Posted on β€’ Edited on

😎 imposter of "this". apply(), call(), bind()

πŸ’Ž Imposter of 'this'

At first show you this sample of call(), it's ok if you don't get it so far

class MyHouse {
  constructor() {
    this.ownerName = 'Kaziu'
  }
  enter() {
    console.log(`${this.ownerName} enter house`)
  }
}

class Thief {
  constructor() {
    this.ownerName = 'Thief'
  }
}

const myHouse = new MyHouse()
myHouse.enter()
// => "Kaziu enter house"

const thief = new Thief()
// ⭐ Thief class doesn't have enter method, but it can invoke by call
myHouse.enter.call(thief)
// => "Thief enter house"
Enter fullscreen mode Exit fullscreen mode

Why gets like this result? at first this in enter() shows MyHouse instance.

class MyHouse {
  constructor() {
    this.ownerName = 'Kaziu'
  }
  enter() {
    console.log(this)
    // ⭐ "MyHouse {ownerName: 'Kaziu'}"
  }
}

const myHouse = new MyHouse()
myHouse.enter()
Enter fullscreen mode Exit fullscreen mode

but when executes call(), we can change this this

class MyHouse {
  constructor() {
    this.ownerName = 'Kaziu'
  }
  enter() {
    console.log(this)
    // ⭐ "Thief {ownerName: 'Thief'}"
    // 😳 now instance of Thief !!!!!!!!!!!!!!!!!!!!!
  }
}

class Thief {
  constructor() {
    this.ownerName = 'Thief'
  }
}

const thief = new Thief()
myHouse.enter.call(thief) // β¬… here invoke call()

Enter fullscreen mode Exit fullscreen mode

basic pattern of call() is like that, actually apply() as well

someFunction.call(imposter of "this");
Enter fullscreen mode Exit fullscreen mode

πŸ™„ So what is difference between call() and apply() ???

difference between call and apply is apply can takes array in second argument

class MyHouse {
  constructor() {
    this.ownerName = 'Kaziu'
  }
  // ⭐ add arguments date and age
  enter(date, age) {
    console.log(this) // Thief {ownerName: 'Thief'}
    console.log(date) // 2021-8-21
    console.log(age) // 76
  }
}

class Thief {
  constructor() {
    this.ownerName = 'Thief'
  }
}

const thief = new Thief()
myHouse.enter.call(thief, '2021-8-21', 76) 

// ⭐ In case of apply, need to add array in second argument
myHouse.enter.apply(thief, ['2021-8-21', 76])
Enter fullscreen mode Exit fullscreen mode

This is simple sample of call() and apply(), They can control of this, it's keyword


bind()

There is similar method bind in javascript. Between call, apply and bind is that bind doesn't invoke function immediately.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

πŸ‘‹ Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay