Форум
Справочник
Описание, примеры
Текущий объект не является жестко фиксированным и зависит от контекста вызова функции. Он является, своего рода, скрытым параметром.
Есть четыре различных варианта его передачи.
| Тип | Способ | this |
| неявно, через вызов метода | object.method(. ) | object |
| явно, через call | function.call(object. ) | object |
| явно, через apply | function.apply(object. ) | object |
| неявно, через вызов new | new constructor(. ) | новый, создаваемый объект |
Если ни один из этих способов не задействован, то this указывает на глобальный объект: в браузере это window.
При манипуляциях с DOM при помощи javascript, this обычно используется для работы с событиями. При этом значение this указывает на текущий DOM-элемент, в контексте которого вызван обработчик.
Привязка методов
Так как this не привязано жестко к объекту, то можно привязывать один и тот же метод к любым классам.
См. также
Здравствуйте, А как быть с многоуровневыми объектами?
Точнее: как получить доступ к старшему объекту?
Если ничего не путаю, необходимо будет обращаться напрямую. чтобы получить subO в f, необходимо обращаться как o.subO, и так далее.
Помогите, пожалуйста. Весь вечер голову ломаю.
function Round(px, py, pR) <
this.x=px;
this.y=py;
this.R=pR;
this.getLength=mGetLength();
>
function mGetLength() <
return this.x;
>
var d=new Round(1, 2, 3);
var f=d.getLength;
Почему возвращает undefined?
если написАть var f=d.x; или var f=d.y; то их возвращает, а вот метод getLength не реализуется почему то
мне кажется, что ошибка здесь:
«function mGetLength() <
return this.x;
>»
думаю, в данном случае не «Round» выступает в качестве объекта, а «mGetLength».. а у mGetLength параметра «х» нету, поэтому и «undefined».
И вообще странная функция какая-то.. у тебя же уже есть параметр «х», для чего длину добавлять отдельно, да еще и функцией? О_о или я не правильно понял что?
Если кому-то еще интересно, то ошибки две:
this.getLength=mGetLength;
скобки не нужны, если мы хотим, чтоб getLength была не переменной, а методом.
А вот при вызове метода наоборот нужны скобки:
var f=d.getLength();
Там return this.x для примера только, там мат. действие в оригинале должно быть, умножение this.x, this.y и this.pR, к примеру, это я пока для примера поставил, пока разбирался)
«думаю, в данном случае не «Round» выступает в качестве объекта, а «mGetLength».. а у mGetLength параметра «х» нету, поэтому и «undefined».»
Я тоже так думал, кстати, но у меня книга есть, оттуда пример, там так написАно 0_о
А как сделать, чтоб mGetLength обращался за переменной в Round?
Только не сильно меняя код, я именно с назначением методов пытаюсь разобраться
Попробуй перед функцией this.getLength=mGetLength();
поставить строку that = this;
и внутри функции mGetLength() использовать that вместо this.
Доброго времени суток, созрел вопрос. Вот почему this может затеряться при, например, присваивании функции, в которой он прописан, какому-либо другому выражению или переменной? Например:
Форум
Справочник
Ключевое слово «this» в деталях
Ключевое слово this в javascript работает своеобразно, не так, как в других языках.
В отличие от PHP, Java, C++ и т.п, значение this в javascript не привязывается статически ни к какому объекту, а зависит от контекста вызова.
Разберем все 4 возможных случая.
Режим конструктора
Если функция вызывается через new как конструктор объекта, то this ставится на создаваемый объект:
Метод объекта
Если функция запущена как свойство объекта, то в this будет ссылка на этот объект.
При этом совершенно неважно, откуда эта функция взялась. Важно лишь, какой перед func стоит объект.
Пример
Создадим два любых объекта:
Определим никак не связанную с ними функцию say :
Присвоим функцию свойству sayHi для обоих объектов:
И теперь тестовый запуск:
Apply/Call
Вызов через apply удобен тем, что можно самостоятельно сформировать массив аргументов или модифицировать существующий.
Простейший вызов
Шпаргалка
Если кратко срезюмировать все вышесказанное, то получится такая вот шпаргалка:
4 варианта вызова
[a href=»#» onclick=»myFunction(this)»]
при таком вызове this будет указывать на [a] я так понимаю
[a href=»#» onclick=»myFunction(this)»]
при таком вызове this будет указывать на [a] я так понимаю
А если [a href=»javascript:myFunction(this);»]? У меня почему-то при таком вызове this ведет «на Марс».
Я тоже сталкивался с такой проблемой, href=»javascript: func(this);» в this был window
Да, но вот переменная this внутри myFunction буде указывать на window
Допустим у нас есть такой набор функций
тогда как сделать чтобы внутри вызова
this указывало на объект полученный через $(‘id’)?
Этот вопрос очень подробно разобран в статье про замыкания. Там в конце разобран пример, очень похожий на ваш.
Спасибо.
Собственно проблема была только в ИЕ, изменил код следующим образом:
только теперь непонятно как реализовать detachEvent, может существует какойто другой способ?
Данный код подтверждает, что this ведет как раз себя не так в PHP и С++.
«I am A!» и не выведется никогда, поскольку вы не запрашивали вывод сообщения с переменной из а
Разберемся с вашими тестами:
Будет выведено «I am A->B->C. «, поскольку this ссылается на a.b.c.who
Вне зависимости от того, где описана ваша функция в этой случае this будет ссылаться на a.b.who
Так, что все верно. А чтобы вывелось «I am A!», необходимо
добавить строку:
Подскажите плиз, как избавиться от переполнения стэка. Я головой понимаю, что что-то глупое делаю, но найти второй день не могу.
Аналог кода:
Прошу прощения, уже нашел, здесь же, на сайте, так что все равно еще раз спасибо)) (сделал через
вар селф = зис;
сетТаймаут(функция () <селф.б()>, 100)
)
к ней обращщается объект TABLE:
Но this все равно определяется,как window. Почему?
Это частая ошибка. this правильный в самом обработчике:
Если ты вызываешь функцию из него, то у нее будет свой this. Можно явно указать нужный this через call :
[quote]При таком вызове this ставится равным глобальному объекту window.[/quote]
Есть тут, imho, две ошибки, причем первая по всей статье прослеживается.
Про глобальный объект добавил упоминание и поправил фразу про указатель.
Респект автору, достойная инфа по теме.
По-моему, этот код из примера надо исправить:
Параметр phrase лишний. Так же?
Ерунда, но для читабельности полезным будет.
Подскажите, пожалуйста, не могу понять, как мне получить в функции ссылку на объект?
Подскажите, пожалуйста, не могу понять, как мне получить в функции ссылку на объект?
и ссылаться в функции на this.self.
Подскажите пожалуйста, почему не работает такой код:
function closer() <
this.showsec= 15;
>
closer.prototype= <
progress: function() <
alert(this);
>,
start: function() <
alert(this);
setTimeout.call(this, this.progress, 1000 );
>
>
var cl= new closer();
cl.showsec= 20;
cl.start();
Правильно будет не так
Потому что, даже если мы функции setTimeout подсунем свой this вместо окна, это не повлияет на this при срабатывании таймера.
(надеюсь, понятно изложил)
Извините, очепятался во втором варианте:
Возможно я ошибаюсь, но на мой взгляд должно быть так:
P.S. Я пробовал похожий код на ‘setInterval’ и с this пример не работал.
Почитал статью про замыкания, переписал так:
но вреравно интересно, почему не работает
хотя такой вариант работает
Работает, потому что здесь объектом this во всех случаях является глобальный объект, и он же используется при срабатывании таймера.
Здравствуйте!
А, если можно, объясните, пожалуйста, в чём разница между конструкцией из примера про «Васю и Диму»:
подскажите пожалуйста как в этих случаях работает this
извините пожалуйста, подскажите код, удаляющий строку, например в таблице на которую нажали?
если использовать jquery
а вот так удалится что угодно
Помогите пожалуйста разобраться
сам разобрался, может кому еще поможет
say = function() <
alert(«Привет, я «+this.name)
>
vasya = <
name: «Василий»
>
dima = <
name: «Дмитрий»
>
vasya.sayHi = say
dima.sayHi = say
не работает, подскажите плз где у меня ошибка
Работаю с JavaScript уже более трёх лет. Хотелось бы поделиться опытом по этой теме. Может, это уже известно вам, но не отнеситесь критически, потому что это полезно для новичков.
P.S. Извиняюсь за поехавшие в коде табы.
Как говорится, прочитал всё от корки до корки. Касательно только JavaScript на этом сайте.
Замечательный сайт в плане общего ознакомления с тем, что такое JavaScript. И всё же скажу, что об ООП здесь сказано на очень низком уровне. Статьи про объекты и ООП здесь читателям позволят научиться лишь не блуждать в коде, который они читают. Сами они навряд ли смогут после прочтения этих статей что-либо сделать.
И всё же сайт на столько же хорош в своей тематики, на сколько в своей htmlbook.ru.
Для тех же, кто желает продолжить изучение и научиться хорошо(профессионально) программировать на JavaScript, хотел бы посоветовать книгу Джона Рейсига(главного разработчика библиотеки jquery) под названием «Профессиональные приёмы программирования». Хорошая книга, которая позволит вникнуть в суть JavaScript, познакомит с технологией Ajax и, что немаловажно, научит мыслить в режиме ООП.
В данной книге напрочь отсутствуют введение в JavaScript и прочие обучающие детали. Поэтому эта книга очень хороша для того, чтобы продолжить изучать JavaScript сразу после прочтения статей на этом сайте. =)
P.S. отсутствие введения и прочей шелухи для новичков сократило объём книги с стандартных 700-1000 страниц для книг схожей тематики, до 250.
Прошу прощения, всё работает! Комент удалить бы.
Подскажите пожалуйста в моём случае
Вопрос: и как это понимать?
this должна быть undefined, т.к. f2 была вызвана без предоставления контекста (например window.f2() )
Можно еще дописать, на всякий случай, что в такой-вот конструкции:
this будет obj2, и, как я понял, это единственная ситуация, где следует вызывать функцию через call/apply, а не напрямую.
(объясняю, если нужно вызвать функцию, которая находится в каком-то объекте, но как this передать ей не этот объект, а другой. В принципе, нужный объект можно и параметром передать, но иногда такой вариант удобнее, в особенности если у Вас смоделированы «абстрактные классы», как тот же Math)
Но это зацикливание ссылок, браузер не ругается.. но это не гуд.
Но это зацикливание ссылок, браузер не ругается.. но это не гуд.
Вы бы разделили все: 1.атрибуты и теги HTML и CSS, 2.DOM, 3.атрибуты/свойства, методы, события и объектов в коде JavaScript.
Например, событие onreadystatechange или свойства complete || readyState, для img, вообще нигде нет.
Привели бы общий список событий, свойств, методов, доступных в кодe JavaScript.
Ну, в общем вам еще писать и писать. ))
как правильно описать картинку с помощью объектов которые есть?
Вопрос к гуру js.
Имеется код (это всего лишь удобный пример, но суть вопроса остается)
Нужно обратиться к свойству Country.name изнутри объекта capital. Есть ли какие более-менее элегантные способы это сделать? Кроме переделывания всего кода с созданием двух классов Country, Capital, и специального поля country внутри Capital (для хранения к какой стране принадлежит) и с последующим присваиванием в виде
Похожий вопрос уже задавался в комментарии чуть выше, но ответа не было. Тут либо возможности js особо не позволят развернуться, чтоб так сделать, либо найдется спец, который решит данную задачку.
Можно попробовать так
Очевидно, на этом сайте не тусят специалисты в js)) Одни кодеры, что и умеющие так только добавить в html событие onclick)
Помогите разобраться, вообщем есть такой код:
function Boxs(width,height,bgColor) <
this.width = width;
this.height = height;
this.bgColor = bgColor;
>
var box = new Boxs(250,250,’green’);
var box2 = new Boxs(200,200,’yellow’);
//Создание коробки
Boxs.prototype.createBox = function(width,height,bgColor) <
$(‘#idDiv’).append(‘
Когда я вызываю метод «createBox()» оно создает блок с заданными параметрами в объекте «box», но если я после этого вызову тот же метод но уже для другого объекта который имеет другие параметры, то «this» будет брать параметры из «box2», и сделает 2 блока со свойствам «box2».
Как сделать так что бы у меня вышли 2 блока с разными параметрами (только осваиваю js).
В строке:
Boxs.prototype.createBox = function(width,height,bgColor)<
(width,height,bgColor) были пусты вначале, это я экспериментировал хД.
Couldn’t be written any better. Reading this post reminds me of my old room mate! He always kept talking about this. I will forward this article to him. Pretty sure he will have a good read. Thanks for sharing!
Все что вы хотели знать о this, но боялись спросить
Хватит «плавать» в базовых концепциях. Давайте разберемся с ключевым словом this в JavaScript раз и навсегда.
Что такое this?
this указывает на объект, который выполняет текущий кусок JavaScript-кода.
Другими словами, this – это ссылка на текущий контекст выполнения. У каждой функции есть этот контекст. Он указывает, где и как эта функция вызывается.
В случае с контекстом выполнения не имеет никакого значения, где и когда функция была объявлена.
В отличие от замыканий (еще одной базовой концепции языка). Им как раз очень важно, где была объявлена функция.
Если интересно, загляните сюда:
Внимание! Внимание!
В строгом режиме ( use strict — который всегда нужно использовать!) функции вызываемые обычным способом не имеют контекста выполнения ( undefined ). Поэтому в коде будет ошибка, так как функция bike не может получить поле name объекта, которого не существует.
В этом случае this ссылается на объекты obj1 и obj2 соответственно, и поле name запрашивает у них.
Вот и все, что нужно знать о контексте выполнения. Ничего сложного.
Неявная привязка this при вызове метода
Повторим для закрепления: не имеет значения, где и как объявлена функция, важно, где и как она вызывается.
Явная привязка контекста
Здесь мы берем функцию bike и сразу же вызываем с жестко указанным контекстом ( obj ).
Метод apply работает точно так же. Вся разница между ними заключается в способе передачи аргументов в функцию, если они нужны. (Подробнее в документации: call, apply).
Фиксированная привязка контекста
Ключевое слово new
Первый вызов (обычная функция) выведен в консоль undefined и выбросит ошибку, так как нельзя установить свойство maker для несуществующего объекта.
Второй вызов (конструктор) выведен в консоль пустой объект, который функция bike сможет заполнить новыми свойствами.
Приоритет способов привязки this
Когда интерпретатор пытается найти подходящий контекст выполнения для вызываемой функции, он проделывает следующую последовательность действий:
Ключевое слово this и контекст в JavaScript
Mar 25, 2019 · 6 min read
Овладение концепцией использования this и умение применять его со знанием дела не представляют особых трудностей.
Основы this
Запомните: Контекст имеет смысл только внутри функций.
Представьте, что вы пишите программу с функциями без вложений. Вы просто пишите одну строку за другой, не создавая никаких структур. Это значит, что нет необходимости следить за тем, где вы находитесь, поскольку вы остаетесь на одном уровне.
При наличии функций, программа обладает несколькими уровнями, а ключевое слово this указывает на то, где вы находитесь, и какой именно объект является функцией.
Отслеживание объекта caller
Рассмотрим изменения ключевого слова this в зависимости от контекста:
Классы и экземпляры классов
Классы используются, чтобы делать код более абстрактным и разделять их поведение. Не стоит объявлять функцию info несколько раз, как было указано в последнем примере. Поскольку классы и их экземпляры находятся в фактических объектах, то и действуют они одинаково. Однако следует упомянуть, что объявление this в конструкторе представляет собой предсказание на будущее, когда появится экземпляр.
Ошибка: вложенные вызовы функции
Иногда мы оказываемся не в том контексте, которого мы ожидали. Это может произойти при вызове функции внутри контекста другого объекта. Самый распространенный пример при использовании setTimeout или setInterval :
React
При работе с React подобные ситуации скоро останутся в прошлом, благодаря Hooks. Но на данный момент все еще необходимо связать ( bind ) все функции тем или иным способом (подробнее об этом позже).
Рассмотрим два простых компонента класса React:
Чтобы решить эту проблему, необходимо связать ( bind ) методы в классах при передаче их из компонента, в котором они определены.
Рассмотрим еще один базовый пример:
Решение — bind
Лучшее решение в этой ситуации — связать ( bind ) методы, которые будут переданы из первоначального объекта или класса. Есть несколько способов связывания функций, но самый распространенный (даже в React) — это связать их в конструкторе. Нужно добавить эту строку в конструктор Battle :
Стрелочные функции `() => <>` автоматически привязывают функцию к контексту объявления.
Функции apply и call
Они обе выполняют одно и то же действие, различается лишь их синтаксис. В обоих случаях контекст передается в качестве первого аргумента. apply охватывает массив других аргументов, а при использовании call можно просто разделить другие аргументы запятыми. И что же они выполняют? Оба метода устанавливают контекст для одного определенного вызова функции. При вызове функции без метода call контекст устанавливается по умолчанию (или даже связанный контекст). Пример:
Вот и все. Надеюсь, вы разобрались в том, как использовать this в JavaScript.
Коротко о this в функциях javascript
Предисловие
Без лишних слов
This — это ссылка на контекст исполнения функции. Таким образом получается, что this тесно связан именно с функциями и рассматривается относительно них. Вне функции this будет ссылаться на глобальный контекст
Тезис 2
Для стрелочных функций this определяется в момент их создания и больше никогда не изменяется
Пример 1
Для начала посмотрим на самый простой пример.
Простое обращение к this указывает на ближайший контекст исполнения — window.
Функция, объявленная через function, указывает на window, потому что нет никакого объекта перед точкой.
Стрелочная функция указывает на window, потому что она была создана внутри глобального контекста (window).
Пример 2
Давайте двинемся дальше и рассмотрим всё то же самое внутри объекта.
Здесь мы вновь обратим свое внимание на то, что this имеет смысл только относительно функции, потому что this указывает на контекст исполнения функции. Поскольку этот объект находится внутри глобального контекста (window), то и наше this указывает на window.
Здесь объектом перед точкой является user, поэтому this ссылается на объект user.
Пример 3
А теперь давайте попробуем что-то посложнее. Создадим объект с методами, которые возвращают другие функции. Таким образом у нас получится 4 разных метода.
Обычная функция, возвращающая обычную функцию — funcFunc.
Обычная функция, возвращающая стрелочную функцию — funcArrow.
Стрелочная функция, возвращающая обычную функцию — arrowFunc.
Стрелочная функция, возвращающая стрелочную функцию — arrowArrow.
Когда вызывается user.funcFunc() — нам возвращается функция function. Обратим внимание, что мы сразу же вызываем ее и в этот момент у нее нет никакого объекта перед точкой, а значит this ссылается на window.
Мы могли бы разбить это на 2 строки
const foo = user.funcFunc()
foo(); — нет объекта перед точкой
Когда мы вызвали метод funcArrow, то создали стрелочную функцию и в момент создания она запомнила окружающий ее контекст. Теперь она всегда будет его возвращать и никогда не потеряет.
Здесь все то же самое, что и первом примере. Нам не важно, каким образом была создана function. Важно лишь что в момент ее вызова у нее нет объекта перед точкой.
Как мы помним, внутри метода arrowArrow this указывал на window. Таким образом и только что созданная стрелочная функция будет указывать на него же.
Пример 4
Давайте еще немного поиграем с предыдущим примером. Теперь мы не просто вытащим новые функции и вызовем их, а запишем их в другой объект и вызовем из него.
Когда мы вызвали user.funcArrow(), мы создали новую стрелочную функцию, но в момент создания она запомнила ближайший к ней контекст (user) и теперь она всегда и везде будет возвращать именно его.
Здесь точно то же самое, что и в первом случае. Мы вернули функци и вызвали ее. Объект перед точкой user2, поэтому this указывает именно на него.
