написать впереди
JavascriptЭто объектно-ориентированный динамический язык, то есть все является объектом Типичным примером является то, что функции также рассматриваются как обычные объекты.
Среди них это очень важная функция для реализации объектно-ориентированного подхода, но в Javascript ее очень легко неправильно понять, особенно для студентов, которые долгое время знакомились со статическими языками. Более того, это высший приоритет в интервью и реальных проектах, поэтому мне придется придумать отдельную статью, чтобы разобраться в этом досконально.
Как упоминалось выше, параметр this является важной частью объектно-ориентированного программирования Javascript, представляя объект, связанный с вызовом функции, также известный как контекст функции. Я знаю, вы можете быть новичком в JS, если вы не понимаете его, ничего страшного, не волнуйтесь, потому что ниже есть анимации для лучшего понимания.
карта разума
1. Что это?
Что это? Выше мы сказали, что это объект, что это за объект? Давайте начнем вводить код и распечатывать его. Чаще всего это происходит в функции. Есть два способа вызвать функцию в JS. Один — вызвать ее напрямую, а другой — через новый. Мы используем два способа вывести, является ли значение this значением то же самое. .
Вывод консоли выглядит следующим образом:
кричать? Хм? Хотя они все в функции, почему распечатка отличается? Это, напечатанное непосредственно вызовом функции, указывает на глобальную переменную Window, функция, вызываемая новым методом, используется как конструктор, Чтобы создать объект пары экземпляров, его значение this указывает на сгенерированный объект экземпляра.
Затем мы знаем, что это объект, посредством вышеописанной беспорядочной операции, но объекты, на которые указывает this, различны для наших разных операций. После написания этого достаточно знать, что это такое.Давайте углубимся в принцип этого.
2. Как об этом судить?
Теперь, когда мы знаем, что это такое, как нам оценить ценность этого? Это также проблема, которую мы не решили выше. Есть три ситуации, в которых это указывает. Пока вы понимаете эти три ситуации, вам не нужно запоминать их наизусть. Вы можете судить об этом как о утке в воде и хорошо рассказать интервьюеру в интервью.
Три случая этого указывают на:
1. Когда вызывается объект, this указывает на объект (кто бы ни вызывал this перед ним, указывает на).
В первом случае, судя по тому, как называется объект, на кого это указывает? Чтобы узнать, нужно потренироваться. Маленький олень, загрузи код, хорошо~.
Отпечатки консоли:
В ходе нашего собственного тестирования мы обнаружили, что this указывает на obj, поэтому мы заключаем, что кто бы ни вызывал функцию, на которую this указывает, это очень просто, давайте продолжим смотреть вниз.
2. Функции вызываются напрямую, это указывает на глобальный объект окна.
На самом деле это тоже относится к первому случаю.Если мы напрямую вызываем функцию в глобальной функции, то на самом деле глобальный объект Window вызывает функцию.Согласно первому выводу, который мы делаем, кто бы ни вызывал функцию, это указывает на who, предположительно Вы уже знаете, что во втором случае это указывает на Window.
3. Через новый метод this всегда привязывается к вновь созданному объекту, и смысл this никак не может быть изменен.
Мы также только что протестировали третий метод. Он указывает на сгенерированный экземпляр объекта. Многие любопытные друзья будут спрашивать Xiaolu. Им интересно узнать внутреннюю реализацию new и что он делает. На самом деле это не сложно. Вы оцениваете, что можете также сделать из приведенных выше два вывода.
Мы обращаем результат из полученного результата.С помощью new это указывает на сгенерированный экземпляр объекта.Затем мы предполагаем, что этот экземпляр объекта должен был вызывать функцию внутри, поэтому это указывает на сгенерированный экземпляр объекта.
Это реальная ситуация? Действительно, наш новый процесс фактически создает внутри себя пустой объект, а затем навешивает параметры и свойства, переданные конструктором, на этот пустой объект, а затем возвращает объект. Это также включает в себя монтирование пустого объекта в цепочку прототипов.Если вы хотите узнать больше, вы можете изучить это самостоятельно.Я не буду здесь много говорить.
Расширение: на кого указывает this функции стрелки?
Все мы знаем, что после ES6, для более удобного использования функций, мы будем использовать в проекте стрелочные функции, написанные следующим образом:
Запускаем программу, вывод в консоль:
Мы можем сделать вывод, что это недопустимо в стрелочных функциях, потому что стрелочные функции не имеют отдельного значения this. this для стрелочной функции совпадает с контекстом, в котором она была объявлена. То есть при вызове стрелочной функции этот параметр не будет вызываться отшельником, а контекст будет унаследован от функции в момент определения.
Что касается функции стрелки, вы должны обратить внимание, и вы часто будете копать для вас дыры во время интервью!
3. Как изменить это значение?
Наша ориентация на это перевернула его с ног на голову, но не будьте высокомерными, вам нужно найти некоторые вопросы интервью об этом самостоятельно, чтобы закрепить и углубить ваше понимание.
это может указывать на разные объекты, хотим ли мы как-то это изменить? Да, есть три способа изменить это Давайте подробно рассмотрим реализацию и различия между этими тремя способами, которым также посвящено интервью!
1. метод вызова
Метод call используется, чтобы изменить это.Давайте сначала посмотрим на пример:
Вывод консоли выглядит следующим образом:
2. Применить метод
Давайте еще раз посмотрим на метод apply, а также приведем пример:
Мы обнаружили, что выходные значения одинаковы, давайте не будем сравнивать разницу между ними, давайте продолжим смотреть на функцию связывания.
3. метод привязки
Мы используем функцию связывания в качестве примера:
Вывод консоли выглядит следующим образом:
4. В чем разница между вызовом, применением и привязкой?
Мы выполнили примеры для всех трех и начинаем подводить итоги. Давайте сначала выясним, что общего у этих трех?
- Общая основа:
1. Оба могут изменить точку this, и первый переданный параметр — это объект, на который указывает this.
2,Все три принимают форму последующей передачи параметров.
Сходство трех можно увидеть на поверхности, и функции одинаковы, но для различий важны детали, интересно, нашли ли вы это?
- разница:
1. Параметры, передаваемые call, передаются по отдельности, а параметры, передаваемые впоследствии apply, — в виде массивов, а bind не оговаривает, что можно передавать как значения, так и массивы.
2. Выполнение функций вызова и применения выполняется напрямую, в то время как функция связывания вернет функцию, а затем она будет выполнена, когда мы захотим ее вызвать.
У тебя могут возникнуть сомнения, олень, так ли ты видишь это на поверхности? Хотя мы можем видеть это на поверхности, мы могли бы также сами написать вызов, применить и привязать.Прочитав реализацию исходного кода, вы подумаете, что эти три функции несложны. Поскольку это требует времени, мы не будем говорить об этом. Сяолу вставил код ниже, и вы можете изучить его, если вам интересно.
1. Функция рукописного вызова
3. Функция рукописного связывания
PS: Что произойдет, если мы используем описанный выше метод для изменения указателя this функции стрелки? Можно ли изменить расклад?
Так как стрелочные функции не имеют собственного указателя this, при вызове функции через методы call() или apply() могут быть переданы только параметры (это нельзя привязать), а их первый параметр будет проигнорирован.
4. Резюме
Сегодня мы познакомились с использованием этого в JS. Предположительно, если вы новичок или друг, который уже знаком с JS, эта статья должна быть в основном понятна. Необходимо усердно учиться с большими парнями в следующем -up и старайтесь писать более сложные и качественные статьи, чтобы делиться ими со всеми.
В итоге на написание статьи и рисование картинки каждый раз уходит несколько часов.На самом деле не просто быть оригинальным.Пожалуйста, поставьте лайк и отправьте Блинк.Спасибо за поддержку!
❤️ Не забывайте оставлять следы своего обучения [Нравится + Избранное + Комментарий]
Статья + анимация писалась несколько часов, ставьте лайк и поддержите. Хи-хи, если вам это не нравится, это показывает, что вы очень эгоистичны, и вы боитесь, что такую хорошую статью увидят другие. Просто шучу.
Вы можете подписаться на официальный аккаунт Xiaolu: «Xiaolu Animation Learning Programming», а фоновый ответ: «Ресурсы». Я пришлю вам копию материалов для самостоятельного изучения Сяолу и приглашу вас в группу бесплатного обучения!
Информация об авторе:
【Автор】：Сяолу
[Исходный публичный аккаунт]: Программирование обучения анимации Xiaolu.
[Введение]: вместе с Xiaolu изучите программирование с нуля с помощью анимации и представьте друзьям интерфейсный веб-домен, структуру данных и алгоритм, сетевые принципы и т. д. в простой для понимания форме. Сначала поставьте небольшую цель, создайте 1000 оригинальных технических статей по анимации и работайте вместе с друзьями, чтобы учиться вместе!Официальный аккаунт отвечает на «данные», чтобы получить множество материалов для самостоятельного изучения с нуля!
【Инструкции по перепечатке】: Пожалуйста, укажите источник перепечатки, спасибо за сотрудничество! ~