Что означает this

Что означает THIS?

Вы ищете значения THIS? На следующем изображении вы можете увидеть основные определения THIS. При желании вы также можете загрузить файл изображения для печати или поделиться им со своим другом через Facebook, Twitter, Pinterest, Google и т. Д. Чтобы увидеть все значения THIS, пожалуйста, прокрутите вниз. Полный список определений приведен в таблице ниже в алфавитном порядке.

Основные значения THIS

На следующем изображении представлены наиболее часто используемые значения THIS. Вы можете записать файл изображения в формате PNG для автономного использования или отправить его своим друзьям по электронной почте.Если вы являетесь веб-мастером некоммерческого веб-сайта, пожалуйста, не стесняйтесь публиковать изображение определений THIS на вашем веб-сайте.

Все определения THIS

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

Акроним	Определение
THIS	Интерком системы транзита помощь
THIS	Общая больница информационной системы
THIS	Слава Богу, это воскресенье
THIS	Слава Богу, это суббота
THIS	Служба здравоохранения информатики
THIS	Танзания Обзор показателей ВИЧ/СПИД
THIS	Теодор Рузвельт-Айленд

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

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

Что такое this?

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

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

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

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

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

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

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

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

console.log(this); // в консоль выводится объект Window // Window < postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …>function myFunction() < console.log(this); >// Вызовем функцию myFunction(); // функция выводит тот же объект Window! // Window < postMessage: ƒ, // blur: ƒ, // focus: ƒ, // close: ƒ, // frames: Window, …>

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

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

var dog = < name: 'Chester', breed: 'beagle', intro: function()< console.log(this); >>; dog.intro(); // в консоль выводится представление объекта dog со всеми его свойствами и методами // // breed:"beagle" // intro:ƒ () // name:"Chester" // __proto__:Object

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

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

var obj1 = < hello: function() < console.log('Hello world'); return this; >, obj2: < breed: 'dog', speak: function()< console.log('woof!'); return this; >> >; console.log(obj1); console.log(obj1.hello()); // выводит 'Hello world' и возвращает obj1 console.log(obj1.obj2); console.log(obj1.obj2.speak()); // выводит 'woof!' и возвращает obj2

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

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

var objReg = < hello: function() < return this; >>; var objArrow = < hello: () =>this >; objReg.hello(); // возвращает, как и ожидается, объект objReg objArrow.hello(); // возвращает объект Window!

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

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

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

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

function test() < console.log('hello world'); console.log(this); >test(); // hello world // Window

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

function test() < 'use strict'; return this; >console.log( test() ); //функция возвращает undefined, а не объект Window

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

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

var dog = < breed: 'Beagles', lovesToChase: 'rabbits' >; function chase() < console.log(this.breed + ' loves chasing ' + this.lovesToChase + '.'); >dog.foo = chase; dog.foo(); // в консоль попадёт Beagles loves chasing rabbits. chase(); //так эту функцию лучше не вызывать

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

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

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

function Dog(breed, name, friends) < this.breed = breed; this.name = name; this.friends = friends; this.intro = function() < console.log(`Hi, my name is $and I’m a $`); return this; >; >

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

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

var str = new String('Hello world'); /******* Строки можно создавать так, но лучше этого не делать, используя подход, применённый при объявлении переменной str2 ниже. Одна из причин подобной рекомендации заключается в том, что в JavaScript строки удобно создавать, пользуясь строковыми литералами, когда строкой считается всё, включённое в двойные или одинарные кавычки. То же самое касается и других примитивных значений. Стоит отметить, что мне, на практике, не встречалась ситуация, когда надо было бы использовать конструкторы для создания значений примитивных типов. *******/ var str2 = 'Hello world'; // когда строка объявлена так, система, всё равно, позволяет работать с ней как с объектом

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

// Создадим новый экземпляр объекта типа Dog var chester = new Dog('beagle', 'Chester', ['Gracie', 'Josey', 'Barkley']); chester.intro(); // выводит Hi, my name is Chester and I'm a beagle console.log(chester); // выводит Dog

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

var City = function(city, state) < this.city = city || "Phoenix"; this.state = state || "AZ"; this.sentence = function() < console.log(`I live in $, $.`); >; >; var phoenix = new City(); // используем параметры по умолчанию console.log(phoenix); // выводит в консоль строковое представление объекта phoenix.sentence(); // выводит I live in Phoenix, AZ. var spokane = new City('Spokane', 'WA'); console.log(spokane); // выводит сам объект spokane.sentence(); // выводит I live in Spokane, WA.

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

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

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

// Функция-конструктор var Friend = function(name, password, interests, job)< this.fullName = name; this.password = password; this.interests = interests; this.job = job; >; function sayHello() < // раскомментируйте следующую строчку, чтобы узнать, на что указывает this // console.log(this); return `Hi, my name is $and I'm a $. Let's be friends!`; > // Мы можем создать один или несколько экземпляров объекта типа Friend, используя ключевое слово new var john = new Friend('John Smith', 'badpassword', ['hiking', 'biking', 'skiing'], 'teacher'); console.log(john); // Назначим функцию ключу greeting объекта john john.greeting = sayHello; // Вызовем новый метод объекта console.log( john.greeting() ); // Помните о том, что sayHello() не стоит вызывать как обычную функцию console.log( sayHello() ) ;

Итоги

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

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

• Блог компании RUVDS.com
• Веб-разработка
• JavaScript

JavaScript: Что это значит?

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Выяснить значение this значения в JavaScript может быть непросто, вот как это сделать…

Джейк Арчибальд

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

Я начну с самой конкретной ситуации и закончу наименее конкретной. Эта статья похожа на большое if (…) … else if () … else if (…) … , так что вы можете сразу перейти к первому разделу, который соответствует коду, который вы просматриваете.

1. Если функция определена как стрелочная функция
2. В противном случае, если функция/класс вызывается с new
3. В противном случае, если функция имеет «привязку», this значение
4. В противном случае, если this установлено во время вызова
5. В противном случае, если функция вызывается через родительский объект ( parent.func() )
6. В противном случае, если функция или родительская область находятся в строгом режиме
7. В противном случае

Если функция определена как стрелочная функция:

const arrowFunction = () => < console.log(this); >; 

В этом случае значение this всегда такое же, this и в родительской области:

const outerThis = this; const arrowFunction = () => < // Always logs `true`: console.log(this === outerThis); >; 

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

Другие примеры

При использовании стрелочных функций значение this не может быть изменено с помощью bind :

// Logs `true` - bound `this` value is ignored: arrowFunction.bind()(); 

При использовании стрелочных функций значение this нельзя изменить с помощью call или apply :

// Logs `true` - called `this` value is ignored: arrowFunction.call(); // Logs `true` - applied `this` value is ignored: arrowFunction.apply(); 

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

const obj = ; // Logs `true` - parent object is ignored: obj.arrowFunction(); 

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

// TypeError: arrowFunction is not a constructor new arrowFunction(); 

«Связанные» методы экземпляра

При использовании методов экземпляра, если вы хотите, чтобы this всегда ссылался на экземпляр класса, лучше всего использовать стрелочные функции и поля класса :

class Whatever < someMethod = () =>< // Always the instance of Whatever: console.log(this); >; > 

Этот шаблон действительно полезен при использовании методов экземпляра в качестве прослушивателей событий в компонентах (таких как компоненты React или веб-компоненты).

Может показаться, что вышеизложенное нарушает правило « this будет то же самое, что и this в родительской области», но это начинает иметь смысл, если вы думаете о полях класса как о синтаксическом сахаре для установки вещей в конструкторе:

class Whatever < someMethod = (() => < const outerThis = this; return () =>< // Always logs `true`: console.log(this === outerThis); >; >)(); > // …is roughly equivalent to: class Whatever < constructor() < const outerThis = this; this.someMethod = () =>< // Always logs `true`: console.log(this === outerThis); >; > > 

Альтернативные шаблоны включают привязку существующей функции в конструкторе или назначение функции в конструкторе. Если по какой-то причине вы не можете использовать поля класса, разумной альтернативой является назначение функций в конструкторе:

class Whatever < constructor() < this.someMethod = () =>< // … >; > > 

В противном случае, если функция/класс вызывается с помощью new :

new Whatever(); 

Вышеупомянутое вызовет Whatever (или его функцию-конструктор, если это класс) с this набором результатов Object.create(Whatever.prototype) .

class MyClass < constructor() < console.log( this.constructor === Object.create(MyClass.prototype).constructor, ); >> // Logs `true`: new MyClass(); 

То же самое справедливо и для конструкторов старого стиля:

function MyClass() < console.log( this.constructor === Object.create(MyClass.prototype).constructor, ); >// Logs `true`: new MyClass(); 

Другие примеры

При вызове с помощью new значение this не может быть изменено с помощью bind :

const BoundMyClass = MyClass.bind(); // Logs `true` - bound `this` value is ignored: new BoundMyClass(); 

При вызове с new значение this нельзя изменить, вызвав функцию как член другого объекта:

const obj = ; // Logs `true` - parent object is ignored: new obj.MyClass(); 

В противном случае, если функция имеет «привязку» this значению:

function someFunction() < return this; >const boundObject = ; const boundFunction = someFunction.bind(boundObject); 

Всякий раз, когда boundFunction , this значение будет объектом, передаваемым в bind ( boundObject ).

// Logs `false`: console.log(someFunction() === boundObject); // Logs `true`: console.log(boundFunction() === boundObject); 

Предупреждение: избегайте использования bind для привязки функции к ее внешнему элементу this . Вместо этого используйте стрелочные функции , поскольку они ясно показывают this из объявления функции, а не из того, что происходит позже в коде. Не используйте bind , чтобы установить для this значения какое-либо значение, не связанное с родительским объектом; обычно это неожиданно, и именно поэтому this имеет такую ​​плохую репутацию. Вместо этого рассмотрите возможность передачи значения в качестве аргумента; он более явный и работает со стрелочными функциями.

Другие примеры

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

// Logs `true` - called `this` value is ignored: console.log(boundFunction.call() === boundObject); // Logs `true` - applied `this` value is ignored: console.log(boundFunction.apply() === boundObject); 

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

const obj = ; // Logs `true` - parent object is ignored: console.log(obj.boundFunction() === boundObject); 

В противном случае, если this установлено во время вызова:

function someFunction() < return this; >const someObject = ; // Logs `true`: console.log(someFunction.call(someObject) === someObject); // Logs `true`: console.log(someFunction.apply(someObject) === someObject); 

Значением this является объект, передаваемый в call / apply .

Предупреждение: не используйте call / apply , чтобы установить для this значения какое-либо значение, не связанное с родительским объектом; обычно это неожиданно, и именно поэтому this имеет такую ​​плохую репутацию. Вместо этого рассмотрите возможность передачи значения в качестве аргумента; он более явный и работает со стрелочными функциями.

К сожалению, такие вещи, как прослушиватели событий DOM, устанавливают для this другое значение, и его использование может привести к созданию сложного для понимания кода:

element.addEventListener('click', function (event) < // Logs `element`, since the DOM spec sets `this` to // the element the handler is attached to. console.log(this); >);

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

element.addEventListener('click', (event) => < // Ideally, grab it from a parent scope: console.log(element); // But if you can't do that, get it from the event object: console.log(event.currentTarget); >);

В противном случае, если функция вызывается через родительский объект ( parent.func() ):

const obj = < someMethod() < return this; >, >; // Logs `true`: console.log(obj.someMethod() === obj); 

В этом случае функция вызывается как член obj , поэтому this будет obj . Это происходит во время вызова, поэтому ссылка разрывается, если функция вызывается без родительского объекта или с другим родительским объектом:

const = obj; // Logs `false`: console.log(someMethod() === obj); const anotherObj = ; // Logs `false`: console.log(anotherObj.someMethod() === obj); // Logs `true`: console.log(anotherObj.someMethod() === anotherObj); 

someMethod() === obj имеет значение false, поскольку someMethod не вызывается как член obj . Возможно, вы столкнулись с этой ошибкой, когда пытались сделать что-то вроде этого:

const $ = document.querySelector; // TypeError: Illegal invocation const el = $('.some-element'); 

Это не работает, потому что реализация querySelector сама просматривает this значение и ожидает, что это будет своего рода узел DOM, и приведенное выше разрывает это соединение. Чтобы правильно достичь вышеуказанного:

const $ = document.querySelector.bind(document); // Or: const $ = (. args) => document.querySelector(. args); 

Интересный факт: не все API используют this внутри себя. Консольные методы, такие как console.log были изменены, чтобы избежать this ссылок, поэтому log не нужно привязывать к console .

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

В противном случае, если функция или родительская область находятся в строгом режиме:

function someFunction() < 'use strict'; return this; >// Logs `true`: console.log(someFunction() === undefined); 

В данном случае значение this не определено. ‘use strict’ не требуется в функции, если родительская область находится в строгом режиме (и все модули находятся в строгом режиме).

Предупреждение: не полагайтесь на это. Я имею в виду, что есть более простые способы получить undefined значение ��.

В противном случае:

function someFunction() < return this; >// Logs `true`: console.log(someFunction() === globalThis); 

В данном случае значение this такое же, как и globalThis .

Примечание. Большинство людей (включая меня) называют globalThis глобальным объектом, но это не на 100% технически правильно. Вот Матиас Байненс с подробностями , в том числе о том, почему он называется globalThis , а не просто global . Предупреждение: не используйте this для ссылки на глобальный объект (да, я все еще называю его так). Вместо этого используйте globalThis , что гораздо более явно.

Уф!

Вот и все! Это все, что я знаю об this . Любые вопросы? Что-то я пропустил? Не стесняйтесь писать мне в Твиттере .

Если не указано иное, контент на этой странице предоставляется по лицензии Creative Commons «С указанием авторства 4.0», а примеры кода – по лицензии Apache 2.0. Подробнее об этом написано в правилах сайта. Java – это зарегистрированный товарный знак корпорации Oracle и ее аффилированных лиц.

Последнее обновление: 2021-03-08 UTC.

Что значит *this в c++? [дубликат]

Я только начал изучать программирование. Мне не совсем понятно, зачем метод move() возвращает *this , если this — это уже ссылка на текущий объект. Я бы возвращал просто this .

Отслеживать
2,279 1 1 золотой знак 6 6 серебряных знаков 27 27 бронзовых знаков
задан 29 мар 2021 в 8:52
Дмитрий Уткин Дмитрий Уткин
47 3 3 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

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

Отслеживать
5,253 2 2 золотых знака 16 16 серебряных знаков 38 38 бронзовых знаков
ответ дан 29 мар 2021 в 8:54
22.2k 2 2 золотых знака 32 32 серебряных знака 52 52 бронзовых знака
«чтобы получился объект» -> «чтобы получилась ссылка»
29 мар 2021 в 9:15
@Qwertiy, вы считаете, что *this вернет &Point?
29 мар 2021 в 9:48
Да, именно Point& он и вернёт. К тому же, у метода в коде именно такой тип.
29 мар 2021 в 9:56
Вы заблуждаетесь, он вернет lvalue типа Point — stackoverflow.com/questions/48388510/…
29 мар 2021 в 9:59
А чем они отличаются?
29 мар 2021 в 10:02

Можно было возвращать просто this если метод move() возвращал указатель.

Point* move(int x, int y) < this->x += x; this->y += y; return this; > 

Но, это не очень удобно, так как, например-

Point obj; obj.move(2,3)->showCoords(); 

нужно обращаться через стрелочку. А если метод возвращал ссылку можно было б просто через точку-

Point obj; obj.move(2,3).showCoords(); 

Если тип возврата ссылка — нужно this разыменовывать. Так как это указатель.