This value не работает

Что делать, когда “this” теряет ссылку на контекст

Привет, Хабр! Представляю вашему вниманию перевод статьи «What to do when “this” loses context» автора Cristi Salcescu.

Лучший способ избежать потери контекста this – не использовать this. Однако, это не всегда возможно. Например, мы работаем с чужим кодом или библиотекой, которые используют this.

Литерал объекта, функция-конструктор, конструктор объектов класса в системе прототипов. Псевдопараметр this используется в системе прототипирования для того, чтобы дать доступ к свойствам объекта.

Давайте рассмотрим несколько случаев.

Вложенные функции (Nested Functions)

this теряет ссылку на контекст внутри вложенных функций.

У метода doSomething() две вложенные функции: doAnotherthing() и log(). При вызове service.doSomething(), this теряет ссылку на контекст во вложенной функции.

Один из способов решения проблемы – метод bind(). Взгляните на следующий код:

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

function doAnotherThing()< /*…*/>.bind(this) создает версию функции doAnotherThing(), которая берет значение this из doSomething().

that/self

Другой вариант – объявить и использовать новую переменную that/self, которая будет хранить значение this из метода doSomething().

Мы должны объявлять let that = this во всех методах, использующих this во вложенных функциях.

Стрелочные функции (Arrow function)

Стрелочная функция даёт нам еще один способ решения этой проблемы.

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

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

Ниже представлен тот же код с функцией, выраженной через имя переменной:

Функции обратного вызова (Method as callback)

this теряет ссылку на контекст при использовании метода в качестве функции обратного вызова. Посмотрим на следующий класс:

Давайте разберем ситуации, в которых метод service.doSomething() используется как коллбэк-функция.

Во всех случаях выше this теряет ссылку на контекст.

Мы можем использовать bind() для решения этой проблемы. Ниже приведен код этого варианта:

Стрелочная функция

Еще один способ – создание стрелочной функции, которая вызывает service.doSomething().

React-компоненты (React Components)

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

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

Не использовать “this»

Нет this — нет проблем с потерей контекста. Объекты могут создаваться с помощью фабричных функций (factory functions). Посмотрите на этот пример:

Контекст остается если использовать метод в качестве коллбэка.

Заключение

this теряет ссылку на контекст в различных ситуациях.
bind(), использование переменной that/self и стрелочные функции — это способы решения проблем с контекстом.

Фабричные функции дают возможность создавать объекты без использования this.

Источник

javascript this.value не работает?

извините за то, что спросил, что глупо: D. Что же я сделал здесь неправильно?

Что вам нужно сделать:

Если вы должны использовать встроенные события, вам необходимо передать элемент функции prompt() . Проблема в том, что он не знает, что this . Вот почему вы должны привязать событие, как показано выше. В любом случае, вы также можете:

PS Могу ли я также предложить использовать data-* атрибуты для этого вместо недействительных атрибутов?

Значение this зависит от того, как вызывалась функция, с которой она появилась.

Когда браузер вызывает функцию onclick из триггера события, this вход.

Когда вы вызываете prompt() , потому что вы не предоставили контекста, и вы не находитесь в строгом режиме, this window .

Вам нужно явно передать значение.

Еще лучше, не используйте атрибуты внутренних признаков в первую очередь. Они смешивают ваш HTML и логику и имеют целую коллекцию gotchas, чтобы пойти с ними.

Тогда у вас есть вторая проблема.

Элементы Div не имеют значений. Делаются только входы и другие формы. Вам нужно будет использовать .getAttribute(«value») вместо .value . но это все еще оставляет ваш HTML недопустимым (а также неуместным) элементы div не предназначены для взаимодействия, они не дают визуального указания, что они должны быть нажмите, и они не получат фокус, если пользователь не будет использовать мышь или другое указывающее устройство).

Вы должны использовать элемент управления, с которым можно взаимодействовать.

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

Источник

javascript this.value не работает?

Простите за вопрос, что глупо: D Однако, что я здесь не так сделал?

3 ответа

Что вам следует сделать:

Если вы должны использовать встроенные события, то вам нужно передать элемент в функцию prompt() . Проблема в том, что он не знает, что такое this . Вот почему вы должны связать событие, как показано выше. Во всяком случае, вы также можете сделать:

Постскриптум Могу ли я также предложить использовать атрибуты data-* вместо атрибутов недопустимых ?

Значение this зависит от того, как была вызвана функция, в которой оно появляется.

Когда браузер вызывает функцию onclick из триггера события, this является вводом.

Когда вы звоните prompt() , поскольку вы не указали контекст и не находитесь в строгом режиме, this является window .

Вам необходимо явно передать значение.

Еще лучше, не используйте встроенные атрибуты событий. Они смешивают ваш HTML и логику и имеют целую коллекцию ошибок.

Тогда у вас есть вторая проблема.

Элементы Div не имеют значений. Только входы и другие элементы управления формой. Вам нужно будет использовать .getAttribute(«value») вместо .value … но это все равно оставляет ваш HTML недействительным (а также неуместным — элементы div не предназначены для взаимодействия, они не дают визуальной индикации того, что они должны щелкнуть, и они не получат фокус, если пользователь все равно не будет использовать мышь или другое указывающее устройство).

Вы должны использовать элемент управления, предназначенный для взаимодействия с.

Наконец, prompt является встроенной функцией, поэтому вам следует избегать ее перезаписи и выбирать другое имя.

Div не имеет значения атрибута.

Если вам нужно получить значение внутри элемента div, вы можете сделать это с помощью свойства innerHTML.

Источник

javascript this.value не работает?

извините, что спрашиваю об этом stupid:D однако что я здесь сделал не так?

3 ответа

У меня есть форма, которая onchange передает значения функции javascript. Мне удалось получить this.value и student.value пройденных, но this.title ничего не возвращает. Как бы я мог получить название опциона? Спасибо

Что вы должны сделать, так это:

Если вы должны использовать встроенные события, то вам нужно передать элемент в функцию prompt() . Проблема в том, что он не знает, что такое this . Вот почему вы должны привязать событие, как показано выше. В любом случае, вы также можете сделать:

P.S. Могу ли я также предложить использовать для этого атрибуты data-* вместо недопустимых атрибутов?

Значение this зависит от того, как была вызвана функция, в которой она появляется.

Когда браузер вызывает функцию onclick из триггера события, this является входным сигналом.

Когда вы вызываете prompt() , потому что вы не предоставили никакого контекста и не находитесь в строгом режиме, this -это window .

Вам нужно явно передать значение.

Еще лучше, не используйте внутренние атрибуты событий в первую очередь. Они смешивают ваши HTML и логику, и у них есть целая коллекция готчей, чтобы пойти с ними.

Тогда у вас есть вторая проблема.

Элементы Div не имеют значений. Это делают только входные данные и другие элементы управления формой. Вам нужно было бы использовать .getAttribute(«value») вместо .value . но это все равно оставляет ваш HTML недействительным (а также неуместным — элементы div не предназначены для взаимодействия, они не дают визуальных указаний на то, что на них следует нажать, и они не получат фокус, если пользователь все равно не использует мышь или другое указывающее устройство).

Вы должны использовать элемент управления, предназначенный для взаимодействия.

Наконец, prompt -это встроенная функция, поэтому вам следует избегать ее перезаписи и вместо этого выбрать другое имя.

Мой код в значительной степени говорил бы сам за себя о том, чего я собираюсь достичь, но только для того, чтобы прояснить. Я хочу вернуть входное значение после длительного нажатия (mousedown в течение 200 мс). Он отлично работает вне for loop, но внутри цикла кажется, что это не так. Для.

Div не имеет атрибута value.

Если вам нужно получить значение внутри элемента div, вы можете сделать это с помощью свойства innerHTML.

Похожие вопросы:

У меня есть этот код в native javascript, и он работает нормально. он регистрирует текущее значение textbox

Источник

Ключевое слово this в JavaScript для начинающих

Автор материала, перевод которого мы сегодня публикуем, говорит, что когда она работала в сфере бухучёта, там применялись понятные термины, значения которых легко найти в словаре. А вот занявшись программированием, и, в частности, JavaScript, она начала сталкиваться с такими понятиями, определения которых в словарях уже не найти. Например, это касается ключевого слова this . Она вспоминает то время, когда познакомилась с JS-объектами и функциями-конструкторами, в которых использовалось это ключевое слово, но добраться до его точного смысла оказалось не так уж и просто. Она полагает, что подобные проблемы встают и перед другими новичками, особенно перед теми, кто раньше программированием не занимался. Тем, кто хочет изучить JavaScript, в любом случае придётся разобраться с this . Этот материал направлен на то, чтобы всем желающим в этом помочь.

Что такое this?

Предлагаю вашему вниманию моё собственное определение ключевого слова this . This — это ключевое слово, используемое в JavaScript, которое имеет особое значение, зависящее от контекста в котором оно применяется.

Причина, по которой this вызывает столько путаницы у новичков, заключается в том, что контекст this меняется в зависимости от его использования.

This можно считать динамическим ключевым словом. Мне нравится, как понятие «контекст» раскрыто в этой статье Райана Морра. По его словам, контекст всегда является значением ключевого слова this , которое ссылается на объект, «владеющий» кодом, выполняемым в текущий момент. Однако, тот контекст, который имеет отношение к this , это не то же самое, что контекст выполнения.

Итак, когда мы пользуемся ключевым словом this , мы, на самом деле, обращаемся с его помощью к некоему объекту. Поговорим о том, что это за объект, рассмотрев несколько примеров.

Ситуации, когда this указывает на объект window

Если вы попытаетесь обратиться к ключевому слову this в глобальной области видимости, оно будет привязано к глобальному контексту, то есть — к объекту window в браузере.

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

Попробуйте выполнить этот код, например, в консоли браузера:

Использование this внутри объекта

Когда this используется внутри объекта, это ключевое слово ссылается на сам объект. Рассмотрим пример. Предположим, вы создали объект dog с методами и обратились в одном из его методов к this . Когда this используется внутри этого метода, это ключевое слово олицетворяет объект dog .

This и вложенные объекты

Применение this во вложенных объектах может создать некоторую путаницу. В подобных ситуациях стоит помнить о том, что ключевое слово this относиться к тому объекту, в методе которого оно используется. Рассмотрим пример.

Особенности стрелочных функций

Стрелочные функции ведут себя не так, как обычные функции. Вспомните: при обращении к this в методе объекта, этому ключевому слову соответствует объект, которому принадлежит метод. Однако это не относится к стрелочным функциям. Вместо этого, this в таких функциях относится к глобальному контексту (к объекту window ). Рассмотрим следующий код, который можно запустить в консоли браузера.

Если, озадачившись рассматриваемым вопросом, заглянуть на MDN, там можно найти сведения о том, что стрелочные функции имеют более короткую форму записи, чем функциональные выражения и не привязаны к собственным сущностям this , arguments , super или new.target . Стрелочные функции лучше всего подходят для использования их в роли обычных функций, а не методов объектов, их нельзя использовать в роли конструкторов.

Прислушаемся к MDN и не будем использовать стрелочные функции в качестве методов объектов.

Использование this в обычных функциях

Когда обычная функция находится в глобальной области видимости, то ключевое слово this , использованное в ней, будет привязано к объекту window . Ниже приведён пример, в котором функцию test можно рассматривать в виде метода объекта window .

Однако если функция выполняется в строгом режиме, то в this будет записано undefined , так как в этом режиме запрещены привязки по умолчанию. Попробуйте запустить следующий пример в консоли браузера.

Обращение к this из функции, которая была объявлена за пределами объекта, а потом назначена в качестве его метода

Рассмотрим пример с уже известным нам объектом dog . В качестве метода этого объекта можно назначить функцию chase , объявленную за его пределами. Тут в объекте dog никаких методов не было, до тех пор, пока мы не создали метод foo , которому назначена функция chase . Если теперь вызвать метод dog.foo , то будет вызвана функция chase . При этом ключевое слово this , к которому обращаются в этой функции, указывает на объект dog . А функция chase , при попытке её вызова как самостоятельной функции, будет вести себя неправильно, так как при таком подходе this будет указывать на глобальный объект, в котором нет тех свойств, к которым мы, в этой функции, обращаемся через this .

Ключевое слово new и this

Ключевое слово this находит применение в функциях-конструкторах, используемых для создания объектов, так как оно позволяет, универсальным образом, работать со множеством объектов, создаваемых с помощью такой функции. В JavaScript есть и стандартные функции-конструкторы, с помощью которых, например, можно создавать объекты типа Number или String . Подобные функции, определяемые программистом самостоятельно, позволяют ему создавать объекты, состав свойств и методов которых задаётся им самим.

Как вы уже поняли, мне нравятся собаки, поэтому опишем функцию-конструктор для создания объектов типа Dog , содержащих некоторые свойства и методы.

Когда функцию-конструктор вызывают с использованием ключевого слова new , this в ней указывает на новый объект, который, с помощью конструктора, снабжают свойствами и методами.

Вот как можно работать со стандартными конструкторами JavaScript.

Теперь поработаем с только что созданной функцией-конструктором Dog .

Вот ещё один пример использования функций-конструкторов.

О важности ключевого слова new

При вызове функции-конструктора с использованием ключевого слова new ключевое слово this указывает на новый объект, который, после некоторой работы над ним, будет возвращён из этой функции. Ключевое слово this в данной ситуации весьма важно. Почему? Всё дело в том, что с его помощью можно, используя единственную функцию-конструктор, создавать множество однотипных объектов.

Это позволяет нам масштабировать приложение и сокращать дублирование кода. Для того чтобы понять важность этого механизма, подумайте о том, как устроены учётные записи в социальных сетях. Каждая учётная запись может представлять собой экземпляр объекта, создаваемый с помощью функции-конструктора Friend . Каждый такой объект можно заполнять уникальными данными о пользователе. Рассмотрим следующий код.

Итоги

На самом деле, особенности использования ключевого слова this в JavaScript не ограничиваются вышеописанными примерами. Так, в череду этих примеров можно было бы включить использование функций call , apply и bind . Так как материал этот рассчитан на начинающих и ориентирован на разъяснение основ, мы их здесь не касаемся. Однако если сейчас у вас сформировалось начальное понимание this , то и с этими методами вы вполне сможете разобраться. Главное — помните о том, что если что-то с первого раза понять не удаётся, не прекращайте учиться, практикуйтесь, читайте материалы по интересующей вас теме. В одном из них вам обязательно попадётся нечто такое (какая-то удачная фраза, например), что поможет понять то, что раньше понять не удавалось.

Уважаемые читатели! Возникали ли у вас сложности с пониманием ключевого слова this в JavaScript?

Источник