Понимание «этого» в call(), apply(), bind()

Привет народ🌹! В этой статье будет рассмотрено использование this в call(), apply() и bind().

call(), apply() и bind() используются для определения контекста this внутри функции метода.

//Line 7
console.log(‘Hello’ + “ “ + this.type + “ “ + x); //Hello Person Tony Strak

В приведенном выше примере 'this' внутри функции приветствия относится к объекту окна, поэтому this.typeвозвращает 'Person'. Но что, если мы хотим, чтобы this ссылался на объект животное? ?

call() и apply() на помощь😁

console.log(‘Hello’ + “ “ + this.type + “ “ + x + ‘’ + y);// Hello Human Tony Strak Iron Man

Первый параметр в методе call() — это объект, на который вы хотите ссылаться this, для которого вызывается функция. В данном случае это объект «животное» выше.

Посмотрим, как применить()

console.log(‘Hello’ + “ “ + this.type + “ “ + x + ‘ ’ + y);// Hello Human Tony Strak Iron Man

Первый параметр в методе apply() — это объект, на который вы хотите ссылаться, для которого вызывается функция.

Единственная разница между apply() и методом call() заключается в том, что второй параметр метода apply() принимает аргументы в виде массива.

Давайте возьмем еще один пример call()-

dog1.fullName.call(dog2); // GoldenR 6
console.log(dog1.name); //null
console.log(dog2.name); //GoldenR 6

Мы также можем видеть, что когда мы регистрируем dog1.name и dog2.name , мы получаем результат для последнего, а не для первого, что означает, что функция dog1.fullName.call(dog2) была действительно вызывается dog2 , а не dog1.

привязать()🎪

console.log(ownerName + “, this is your dog: “ + this.breed + this.name); //Harry, this is your dog: LabraShery

Ждать! Но что, если мы хотим позаимствовать метод??

var myDog = dog.details;
myDog(); //undefined, this is your dog: undefined

Это не работает, потому что this теперь относится к глобальному контексту и нет переменной с именемпородаи имя в глобальном контексте. На помощь приходит bind()!!

//Line 10
myDog(); //Harry, this is your dog: LabraShery

Метод bind() создает новую функцию, где «это» относится к параметру в скобках в приведенном выше случае «собака».

.call()
FunctionName.call(value of this, arg1, arg2, …)//Will execute Function
.apply()
FunctionName.apply(value of this, [arg1, arg2, ..])//Will execute Function
.bind()
newFunction = FunctionName.bind(value of this, arg1, arg2 …) //Will return a new function

Спасибо, что прочитали эту статью 🙏🌺