Как работает bind? Пишем полифилл для bind

2 912

Доброго времени суток друзья. Сегодня я хотел бы поговорить с вами о bind. Для чего он вообще используется и как с ним работать? Общее определение: «Метод bind() создаёт новую «привязанную функцию» (ПФ).  ПФ — это «необычный функциональный объект» ( термин из ECMAScript 6 ), который является оберткой над исходным функциональным объектом. Вызов ПФ   приводит к исполнению кода обернутой функции.” Взято тут. В практики bind используется для создания функции с предопределенными аргументами. А так же он полезен в случаях, если вы хотите создать сокращение для функции, требующей определенное значение this.

Давайте попрактикуемся и напишем функцию one в которой мы будем ‘бандить’ контекст передав объект { foo: “var”}, а затем повторно ‘бандить’  контакт, передадим null


const one = function(){

return this;

}

const two= one.bind({foo: "var"})

const c = two.bind(null)

console.log(c())

Что мы получим? Контекст первой функции.  Bind может применятся один раз, по этому сколько бы раз мы бы потом не bind’ли контекст мы все равно будем получать контекст первого bind.

В ReactJS контекст ‘бандится’ автоматически.

Пишем свой полифил для bind


function bind(func, context){

	return function(…args) {
		return func.apply(
					context,
					args
				);
	}
}

const a = function () {
	return this;
}

const b = bind(a, {foo: ‘var’ });

const c = bind(b, null);

const d = bind(c, { g: ‘1’ });

console.log(c())

Если посмотреть на результат консоли то наш код работает также один раз как и дефолтный bind. Мы можем “бандить» контекст только один раз.

Для создания полифила полученную функцию нужно добавить в прототип функции


Funtion.proptotype.bind = funtion(context){
	const func = this;
	return function(…args) {

		return func.apply(
			context,
			args
		);
	}
}

Заключение

Вот мы и написали свою реализацию bind. Надеюсь данная статья была вам полезна. Изучайте основы JavaScript что бы стать более лучшим специалистом и тогда любой фреймворк будет вами покорен. Надеюсь что данная статья была вам полезна. Удачно вам покодить!)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *