Please enable JavaScript.

Coggle requires JavaScript to display documents.

4.4: this with call(), apply() and bind() - Coggle Diagram

4.4: this with call(), apply() and bind()

example of call

let user1 = {
  firstName: 'Renay',
  lastName: 'Earnshaw',
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

let user2 = {
  firstName: 'Philip',
  lastName: 'Earnshaw',
  fullName: function() {
    return this.firstName + ' ' + this.lastName;
  }
}

let greeting = function(term) {
  console.log(term + ' ' + this.firstName)
}

greeting.call(user1, 'Good morning')

greeting.call(user2, 'Good afternoon')

outputs

> Good morning Renay
> Good afternoon Philip

add another argument

let greeting = function(term, punctuation) {
  console.log(term + ' ' + this.firstName + punctuation)
}

greeting.call(user1, 'Good morning', '!')

greeting.call(user2, 'Good afternoon', '!')

outputs

> Good morning Renay!
> Good afternoon Philip!

equivalent with apply

let greeting = function(term, punctuation) {
  console.log(term + ' ' + this.firstName + punctuation)
}

greeting.apply(user1, ['Good morning', '!'])

greeting.apply(user2, ['Good afternoon', '!'])

outputs

> Good morning Renay!
> Good afternoon Philip!

bind

passing in one argument

let greeting = function(term, punctuation) {
  console.log(term + ' ' + this.firstName + punctuation)
}

let morningGreet = greeting.bind(user1, 'Good morning')
let afternoonGreet = greeting.bind(user1, 'Good afternoon')

morningGreet('!')
afternoonGreet('.')

outputs

> Good morning Renay!
> Good afternoon Renay.

can we override the this binding?

NO:!: