В Function.prototype есть три похожих метода: call, apply и bind, эти три метода могут изменить динамическое `this` в функции, я не буду слишком много говорить об `this`, а подробнее об этих методах. ауты

Китайский: [JavaScript] 函數原型最實用的 3 個方法 — call、apply、bind

Итак, в этой статье я сравню с a(apply)/b(bind)/c(call), и немного концепции функции this, наконец, возьму практический пример использования self, bind , функция стрелки.

Начнем наше путешествие.

Зачем нам нужно применять/привязывать/вызывать?

JavaScript (так называемый ECMAScript) — это язык динамического программирования, слово «динамический» звучит абстрактно, вы можете подумать: «Да… но я также изучил другие языки динамического программирования», но дело в том, что функция «this» является динамической.

Давайте посмотрим на распространенный вариант использования apply/bind/call:

Вы получите тот же результат, эти три могут делать то же самое, что и L8–9.

Пожалуйста, расскажите мне, в чем магия этих трех методов!

Давайте классифицируем call, apply и bind:

  • вызов, применить результат функции возврата
  • метод bind возвращает функцию с привязкой `this`

Мы можем выяснить, что метод связывания не хочет вызывать функцию.

Использование Function.prototype.call()

Метод call() вызывает функцию с заданным значением this и индивидуально предоставленными аргументами. （источник. МДН）

Честно говоря, я не очень понял это, когда впервые увидел это…

Как я уже говорил, мы можем просто сдвинуть «аргументы» вправо и указать функции «это», что мы хотим использовать в первом параметре.

За исключением первого параметра, он на 87% похож на исходный вызов функции:

func(1, 2, 3) против func.call(null, 1, 2, 3)

Итак, Function.prototype.apply() — это просто ярлык

func.apply(thisArg, [argsArray])

Интерфейс apply() получает только два параметра, первый вы знаете (ага, опять this), а второй — это аргументы, но это массив.

func(1, 2, 3) vs func(null, [1, 2, 3])

Особый момент, есть сохраняемая переменная `arguments`, это массив, так что если вы используете метод `apply`, вам не нужно делать деструктурирование assign :

Только что сказал, что в верхнем случае мы можем легко решить это, используя `bind`.

Как работает Function.prototype.bind()?

Когда вы будете искать в Интернете, вы обнаружите, что есть тысячи статей, которые рассказывают вам, как здорово вы можете делать «каррирование» с помощью метода «bind», почему это хорошая практика, бла-бла…

Давайте углубимся в привязку, что нужно сделать привязке.

bind — в отличие от двух верхних, нам не нужно передавать параметр функции, и она тоже не вернет результат, она вернет «Функция с фиксированным вот что вы передаете», да, фиксированная, когда вы делаете , вы больше не можете изменить функцию `this`.

В L6 мы сначала привязываем функцию wtf_bind_window, поэтому эта функция использует фиксированное окно this —, вы больше не можете его изменить, даже вызвать, применить или снова выполнить привязку.

Вам действительно нужен bind()?

Это классический случай, вы могли видеть это, когда вы делаете функцию обратного вызова в классе:

Когда вы запускаете `laterHello`, обратный вызов таймера не может получить правильный this (который должен указывать на экземпляр класса), вы можете видеть, что это очень распространенный случай в классе Node и компоненте класса React/Vue.

Есть 3 идеи, чтобы решить эту проблему, `bind` — одна из них, но не лучшая:

1 Self — то, что JS-разработчики любят использовать на занятиях…

Когда вы поддерживаете устаревший проект, вы будете видеть это чаще всего.

Почему я поставил его первым? Поскольку это решение с низкими затратами на обдумывание, просто используйте себя, просто следуйте исходному шаблону, без магии, без ошибок и легко просматривайте.

2 Binding — да, после прочтения этой статьи у вас есть другой выбор.

В этом решении есть большое преимущество, вам не нужно вносить какие-либо изменения во внутреннюю функцию обратного вызова, а просто скажите, какое правильное «это» вы хотите применить.

В реальном мире вы не хотите делать много изменений, а просто повторно используете функцию в обратном вызове, у нее может быть много «этого», которое вам нужно обновить до «я».

Но после ES6 есть другое решение.

3 Функция стрелки — ikr, вам не нужно self, но привязке сложно научиться.

В JavaScript есть лучшая вещь: если вы не хотите изучать функцию, вы можете просто отказаться от нее, есть другой другой шаблон для решения того же сценария. ЛМАО.

В большинстве случаев стрелочная функция ничем не отличается от обычной функции, единственная особенность заключается в том, что функция `this` стрелочной функции всегда указывает на область контекста, и она фиксирована, даже если вы применяете, связываете и вызываете, стрелочная функция всегда получает this из области контекста.

Вывод

Я, наконец, закончил эту статью, лучшая польза от написания статей в том, что я мог бы лучше понять, представляя их другим, надеюсь, вам, ребята, понравится!

И в следующий раз, когда вы изучите что-то вроде каррирования или функции, вы можете просто обратиться к этой статье, надеюсь, она поможет!