💎 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"
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()
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()
basic pattern of call()
is like that, actually apply()
as well
someFunction.call(imposter of "this");
🙄 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])
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.
Top comments (0)