What’s the difference between self and window?

I have a JavaScript that deals with with detection whether the page is in frames or not. I used top.frames[] etc. and everything works fine.

In this script I noticed that I can use «window» or «self» interchangeably and everything still works. Is «window» same as «self» when used in HTML page?

4 Answers 4

From Javascript: The Definitive Guide:

The Window object defines a number of properties and methods that allow you to manipulate the web browser window. It also defines properties that refer to other important objects, such as the document property for the Document object. Finally, the Window object has two self-referential properties, window and self . You can use either global variable to refer directly to the Window object.

In short, both window and self are references to the Window object, which is the global object of client-side javascript.

self is a read-only property that can be more flexible than, and sometimes used in favor of, the window directly. This is because self ‘s reference changes depending on the operating context (unlike window.self , which only exists if window exists). It’s also great for comparisons, as others have mentioned.

For example, if you use self inside a Web Worker (which lives in its own background thread), self will actually reference WorkerGlobalScope.self . However, if you use self in a normal browser context, self will simply return a reference to Window.self (the one that has document , addEventListener() , and all the other stuff you’re used to seeing).

TL;DR while the .self in window.self will not exist if window doesn’t exist, using self on its own will point to Window.self in a traditional window/browser context, or WorkerGlobalScope.self in a web worker context.

As usual, MDN has a great writeup on this subject in their JavaScript docs. 🙂

Side note: The usage of self here should not be confused with the common JS pattern of declaring a local variable: var self = this to maintain a reference to a context after switching.

Difference between this and self in JavaScript

Everyone is aware of this in javascript, but there are also instances of self encountered in the wild, such as here

So, what is the difference between this and self in JavaScript?

5 Answers 5

Unless set elsewhere, the value of self is window because JavaScript lets you access any property x of window as simply x , instead of window.x . Therefore, self is really window.self , which is different to this .

If you’re using a function that is executed in the global scope and is not in strict mode, this defaults to window , and therefore

If you’re using a function in a different context, this will refer to that context, but self will still be window .

A slight addition to this as people may encounter this in the context of service workers, in which case it means something slightly different.

You might see this in a service worker module:

Here self refers to the WorkerGlobalScope, and this is the standard method for setting event listeners.

By using self, you can refer to the global scope in a way that will work not only in a window context (self will resolve to window.self) but also in a worker context (self will then resolve to WorkerGlobalScope.self).

Although I am late here but I came across one example which too can be helpful to understand this further:

O/P

Prior to ECMA 5, this in the inner function would refer to the global window object; whereas, as of ECMA 5, this in the inner function would be undefined.

The reference to ECMA 5 needs clarifying.

I assume it means ECMA-262 Edition 5. It should be noted that ECMA-262 (a.k.a. ECMAScript or, less accurately, Javascript) is a general scripting language which has been implemented in Internet Browsers. From the Edition 5.1 standard:

The following steps are performed when control enters the execution context for function code contained in function object F, a caller provided thisArg, and a caller provided argumentsList:

1. If the function code is strict code, set the ThisBinding to thisArg.
2. Else if thisArg is null or undefined, set the ThisBinding to the global object.
3. Else if Type(thisArg) is not Object, set the ThisBinding to ToObject(thisArg).
4. Else set the ThisBinding to thisArg
5. . (not about «this»)

The term «global object» refers to whatever object is at the top of the scope chain. For browsers this would be the «window» object but this is an implementation choice (Windows Script Host has an invisible global object but no strict mode so unqualified references access its properties and there is no global «self»). Also, «strict mode» must be explicitly enabled otherwise it is not active (section 14.1 of the standard). As such, an undefined «this» would still resolve to the global object (window) in «ECMA 5» with strict mode not active.

So the answer to the question is:

«this» always refers to the object invoking the function. If the function was not invoked by an object (i.e. not a method call) then «this» (as passed to the function) is «undefined». However, if NOT using strict mode then an undefined «this» is set to the global object (rule 2 above).

«self» has no special syntactic meaning, it is just an identifier. Browsers tend to define window.self (just a property of the global window object) = window. This results in unqualified references to «self» being the same as «window» UNLESS «self» has been redefined within an enclosing scope (such as by «var self = this;» above. Good luck redefining «this».)

So the full explanation of the example above is:

An interesting variation of the example creates a closure by returning a reference to the inner function.

Note how the inner function is not called until invoked by yourObject. So this.foo is now yourObject.foo but self still resolves to the variable in the enclosing scope which, at the time the inner function object was returned, was (and in the resulting closure still is) myObject. So, within the inner function, «this» refers to the object calling the inner function while «self» refers to the object which called the outer function to create the reference to the inner function.

To summarize the summary of the summary, «this» is defined by the language standard, «self» is defined by whoever defines it (runtime implementer or end programmer).

Ключевое слово 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?

Значение this

Строки

Массивы

Математические константы

Специальные значения

Url кодирование

Диалоговые окошки

Типизация

Таймеры

Разное

Работа с DOM

Работа с DOM

Элементы DOM

Узлы nodes

Вставка элементов

События

Объект события

Выделение

Метрики и прокрутка

Таблицы

Конструкции языка

Объекты

Контекст

Значение this это объект, в контексте которого выполняется Функции. Это одно из самых основных и, на первый взгляд, непонятных моментов в javascript.

Понимание того, ‘что такое this на самом деле’ открывает много интересных возможностей (таких как ООП, наследование), а также позволяет писать более качественный код.

this — это самый обычный объект. Все что нужно уметь — это понимать какой именно объект. Рассмотрим несколько простых примеров:

Создадим объект с одним методом, и одним свойством:

Метод obj.getWidth() вернул значение obj.width. То есть можно предположить, что this указывает на родительский объект.

Многие думают, что это так и есть. Но это не так.

Запомните: this определяется только во время вызова функции. При создании Функции он неизвестен.

Но как тогда узнать на какой объект указывает this? На самом деле очень просто: :

А если при вызове функции не было точки, то this будет равным window (в обычном режиме), либо undefined (в строгом режиме — при указании в начале кода ‘use strict’):

Это все основные моменты, касающиеся this. Чтобы окончательно разобраться, рассмотрим несколько примеров (все примеры буду рассматриваться в строгом (современном) режиме):

Примеры

Пример

Напишем объект user, с свойством name, и методом sayHi():

Результат выполнения кода:

Пример

Тепер скопируем метод sayHi() в другой объект:

Благодаря тому, что метод был вызван как user2.sayHi() — this равен user2. А в user2 свойство name равно ‘Вася’.

Результат выполнения кода:

Пример

Также метод можно скопировать не только в объект, а и в переменную:

Но чему в этом случае будет равен this? Посмотрим как метод был вызван:

То есть нет никаких точек. Следовательно this равно undefined (либо window в обычном режиме). А это значит что в строгом режиме этот код вызовет ошибку. Так как ‘this.name’ будет равносильно ‘undefined.name’ (а в обычном режиме: window.name);

Пример

В этом примере посмотрим на ошибку, которую допускают очень часто. Выполним метод seyHi(). Но не сразу, а через 2 секунды:

В чем здесь ошибка? Посмотрим, как может работать функция setTimeout:

То есть снова нет никаких точек. Ситуация такая же что и в предыдущем примере.

Пример

Посмотрим как можно обойти эту ошибку:

То есть мы оборачиваем вызов метода в еще одну функцию, благодаря чему метод вызывается как user.sayHi() и this сохраняется.

Результат выполнения кода:

Пример

Рассмотрим еще одну частую ошибку. Перенесем таймер внутрь метода:

Чему в этом примере будет равно this? this есть у всех функций. А в данном примере this находится не в методе, а в Функции, что передается таймеру:

Как мы уже выяснили выше, фукцнция, что передается в таймер, выполняется как func(). Следовательно в этой Функции this = undefined. То есть мы потеряли контекст.

Пример

Посмотрим как обойти это ошибку:

Здесь мы создали переменную self, которая указывает на this объекта obj. И контекст больше не теряется.

Также эту ошибку можно было обойти методом bind