Как сделать стрелку в js
Обновлено: 04.07.2024
Если единственным оператором в выражении стрелочной функции является return , можно удалить return и окружающие фигурные скобки:
Особенности стрелочных функций JS:
- более лаконичный (краткий) синтаксис;
- отсутствие псевдомассива аргументов arguments ;
- лексическое определение this ( this стрелочной функции постоянно замкнут на this внешней функции, в которой она создана);
- не могут использоваться :
- в качестве конструкторов (с оператором new );
- для создания генераторов;
- всегда анонимны , в результате чего:
- вы не сможете отследить имя функции или точный номер строки, где произошла ошибка;
- нет самопривязки, т.е. ваша функция не может ссылаться на саму себя (например, рекурсия, обработчик событий, который необходимо отменить, не сработают).
Проблема отсутствия arguments в стрелочных функциях решается путём сочетания стрелочной функции с rest оператором:
Так как rest оператор всегда возвращает нативный массив (а не псевдомассив), то переменная props (или params ) будет истинным массивом, следовательно, можно записать короче:
Синтаксис (объявление) стрелочных функций в JavaScript
1. Без параметров (пустые круглые скобки перед) => :
2. Одиночный параметр (круглые скобки необязательны):
3. Несколько параметров (требуются скобки):
4. Тело функции (блок кода) должно иметь фигурные скобки и return :
5. Если возвращается объектный литерал, его нужно заключить в круглые скобки:
В некоторых случаях стрелочные функции позволяют использовать более короткую запись функции:
Когда следует использовать стрелочные функции:
- В качестве callback функций.
- Когда от this требуется привязка к контексту, а не к самой функции.
- Удобно использовать с такими методами, как map и reduce (в некоторых случаях делает код более удобочитаемым).
Когда не следует использовать стрелочные функции:
- Если нужно, чтобы контекст был динамическим.
- В методах объектов.
- В сложном коде ( затрудняют чтение кода ).
Особенности this в стрелочных функциях
Утверждение о том, что при обращении к this в методе объекта этому ключевому слову соответствует объект, которому принадлежит метод, не относится к стрелочным функциям. Стрелочные функции не содержат собственный контекст this , а используют значение this окружающего контекста.
Стрелочные функции (arrow functions) являются исключением из правила в случае определения значения this : их this всегда лексический (статический), а не динамический. Т.е. их функциональная запись окружения не предоставляет значение this , и оно наследуется из родительского окружения ( this стрелочной функции постоянно замкнут на this внешней функции, в которой она определена) .
Таким образом, в отношении стрелочных функций действует правило:
- this будет таким, каким он был на момент создания стрелочной функции, т.е. захватывается из текущего контекста (и вовсе не обязательно это будет window ).
console . log ( objReg . hello ( ) ) ; // возвращает объект objReg
console . log ( objArrow . hello ( ) ) ; // возвращает объект Window (т.к. стрелочная и контекст формируется внешней console.log())
console . log ( objReg . objReg_1 . by ( ) ) ; // возвращает объект objReg_1
console . log ( objReg . objReg_1 . hello ( ) ) ; // возвращает объект Window (т.к. стрелочная и контекст формируется внешней console.log())
Так как значение this определяется лексикой:
- правила строгого режима ( strict mode ) относительно this игнорируются;
- вызов стрелочных функций с помощью методов call() или apply() , даже если передать аргументы в эти методы, не влияет на значение this .
В выражении obj.method() можно заметить две операции:
- оператор точка '.' возвращает свойство объекта – его метод obj.method (если вывести obj.method в консоль - это будет код метода, т.е. код функции);
- скобки () вызывают этот метод (исполняется код метода).
Каким же образом информация о this передаётся из первой части во вторую?
Если мы поместим указанные выше операции ( '.' и () ) в отдельные строки, то значение this будет потеряно:
Здесь hi = user.hi сохраняет функцию метода объекта user в переменной как отдельный объект (отдельную функцию, не привязанную к объекту user ). Поэтому, если её далее вызывать hi() , то она вызывается в глобальном контексте, при этом в строгом режиме значением this внутри функции становится undefined (в обычном режиме значением this станет глобальный объект Window ).
Для сохранения значения this при вызове метода объекта используется синтаксис obj.method() , который корректно передает this.
- base – это объект;
- name – это имя свойства объекта;
- strict – это режим исполнения ( true , если действует строгий режим use strict ).
Таким образом, результатом доступа к свойству user.hi при использовании синтаксиса obj.method() является не функция, а значение ссылочного типа, которое в строгом режиме будет таким:
Когда скобки () применяются к значению ссылочного типа (происходит вызов), то они получают полную информацию об объекте и его методе, и могут поставить правильный this по значению base (в данном случае base = user ).
Ссылочный тип – исключительно внутренний, промежуточный, используемый чтобы передать информацию от точки . до вызывающих скобок () . При любой другой операции, например, присваивании hi = user.hi , ссылочный тип заменяется на собственно значение user.hi (т.е. функцию без привязки к объекту), и дальше работа уже идёт только с ней.
Таким образом, значение this передаётся правильно, только если функция вызывается напрямую с использованием следующего синтаксиса:
- точечной нотации obj.method() или
- скобочной нотации obj['method']() .
Для сохранения значения this можно применить, например, методы CALL(), APPLY() и BIND(), которые рассмотрены ниже. Например:
Лексическое окружение — это область спецификации, описывающая связывание идентификаторов с переменными и функциями, основанная на лексической вложенности кода, написанного на ECMAScript (JavaScript). Лексическое окружение состоит из таблицы символов и ссылки на внешнее лексическое окружение (нулевой для глобального окружения, т.к. глобальное окружение не имеет внешнего окружения).
Каждый контекст выполнения имеет лексическое окружение, которое хранит переменные и их значения, а также имеет ссылку на внешнее окружение. Лексическим окружением может быть:
- глобальное окружение, или
- окружение модуля (содержащее привязки имён к символам, объявленным в этом модуле), или
- окружение функции (созданное в процессе её вызова).
Обычно лексическое окружение связано с синтаксической конструкцией в коде на ECMAScript, такой как объявление функции, блок кода (окружённый фигурными скобками), или блок catch в try-инструкции.
Новое лексическое окружение создаётся каждый раз при исполнении такого кода (например, при вызове функции).
Создаем объект obj , содержащий метод bar , который возвращает функцию, которая, в свою очередь, возвращает свой this . Возвращаемая функция создана как стрелочная функция, таким образом её this постоянно замкнут на this функции, в которой она создана. Значение bar может быть установлено в вызове, который, в свою очередь, устанавливает значение возвращаемой функции.
Я работаю над веб-сайтом (, созданным на Wordpress, пользовательская тема ), в которую я хочу добавить стрелки вверх / вниз в поле ввода select в CSS . HTML-код, который я использую для создания стрелки вверх / вниз для выбранного поля ввода:
Вот полная скрипка > Для приведенного выше кода. На данный момент у него есть только стрелка вниз.
В приведенной выше скрипке я хочу добавить обе стрелки вверх / вниз синего цвета. В данный момент он показывает только стрелку вниз.
Постановка проблемы:
Мне интересно, какой код CSS мне нужно добавить в приведенную выше скрипку, чтобы я мог видеть стрелку вверх / вниз (, как показано на скриншоте ниже, отмечен стрелкой ) в поле ввода выбора в css. Я не могу вносить какие-либо изменения в HTML-код, так как он исходит от проверки из WordPress
Это простой и понятный пример использования значка Font Awesome в кодировке base64 в качестве фонового изображения для поля выбора.
Вы можете проверить это в jsFiddle
Кроме того, имеется ссылка на приложение Icomoon, используемое для создания png-изображения используемого значка.
Значок стрелки выбора по умолчанию отображается браузером. Нет никакого API для вас, чтобы сказать браузеру заменить значок стрелки, поэтому вам нужно будет изменить стиль элемента select и наложить ваши собственные стрелки. Вы можете нарисовать свои собственные стрелки, которые имеют стиль, идентичный стрелкам вашего браузера, но помните, что значок по умолчанию будет отличаться для других браузеров и операционных систем.
Чтобы изменить стиль элемента select с использованием только CSS, вам нужно настроить таргетинг как на элемент select, так и на его родительский элемент p . У select есть идентификатор, на который легко ориентироваться, но нацеливание на этот конкретный элемент p не просто из предоставленного вами кода. Однако, глядя на предоставленную ссылку на сайт Wordpress, перед p есть форма Name of Institution . Это означает, что на элемент p можно ориентироваться с помощью селектора CSS label[for=search-box-filter_31] + p .
Сначала вы должны убедиться, что у вас достаточно места для новой стрелки. Это достигается путем увеличения ширины выделения на ширину ваших новых стрелок и добавления того же количества к правому отступу родительского p . Один из способов изменить ширину выделения - использовать calc(100% + 30px) . Если ваши новые стрелки имеют такую же ширину, что и значки по умолчанию, вам может не понадобиться делать это, но в некоторых конфигурациях ваши стрелки могут перекрывать содержимое выбора.
Кроме того, элемент p должен сжаться, чтобы соответствовать его содержимому. Есть несколько способов сделать это, но в вашей ситуации наименее вероятным нарушением форматирования является установка display: table .
Наконец, вы можете использовать псевдоэлемент ::after в p , чтобы создать нужные стрелки и наложить их на конец элемента select, скрывая стрелку по умолчанию. В приведенном ниже примере я создал стрелки со встроенным SVG, но вы можете использовать любое фоновое изображение, которое лучше всего подходит для вашей ситуации. Установите для элемента ::after значение position:absolute и стилизуйте его так, чтобы он точно совпал с правой стороной выделения. Чтобы создать синий градиентный фон под стрелками, которые есть на изображении, используйте несколько фонов, первый из которых - стрелки, а второй - CSS-градиент.
Обратите внимание, что, поскольку элемент ::after находится в верхней части элемента выбора, нажатие на стрелки не отобразит параметры. Вы можете установить pointer-events: none; для прохождения кликов, но это не сработает в IE.
Результат (за которым следует выбор по умолчанию, как он отображается в Firefox в Linux):
Конечно, стрелки и их синий фон можно стилизовать любым другим способом. Обратите внимание, что добавление пользовательского стиля к стрелкам выбора сделает его отличным от стиля браузера по умолчанию. Вы можете настроить его так, чтобы он легко помещался в одном браузере, например Chrome, но другой браузер, например Firefox, будет отображать вещи по-другому, и ваш собственный стиль не будет соответствовать. Чтобы иметь беспрепятственный внешний вид во всех браузерах и операционных системах, вам необходимо убедиться, что все элементы выбора / ввода соответствуют друг другу.
Может быть, это дает вам некоторое утешение, поскольку вы говорите, что не можете коснуться HTML. Я играл с CSS!
Узнайте, как создавать стрелки/треугольники с помощью CSS.
Как создать стрелки
Шаг 1) добавить HTML:
Пример
Шаг 2) добавить CSS:
Пример
i <
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
>
.right transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
>
.left transform: rotate(135deg);
-webkit-transform: rotate(135deg);
>
.up transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
>
.down transform: rotate(45deg);
-webkit-transform: rotate(45deg);
>
Добавить стрелки к блоку (tooltip) можно с помощью псевдо-элемента :before .
Стрелки сверху
Слева
По центру
Справа
Стрелки снизу
Слева
По центру
Справа
Стрелки слева
Сверху
По центру
Снизу
Стрелки справа
Сверху
По центру
Снизу
Комментарии
Другие публикации
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а.
К сожалению разработчики прекратили поддержку и разработку проекта, но PHPExcel все равно остается популярной.
Пара примеров как сделать блок с адаптивным видео в качестве фона на основе видеоплеера HTML5, YouTube и JQuery.
В отличии предыдущего меню, где есть отступы у каждого элемента, часто возникает задача сделать резиновое меню без них. Пункты меню должно идти с одинаковыми интервалами и без отступов по бокам.
Читайте также: