ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

JS Учебник

JS Старт JS Введение JS Установка JS Вывод JS Объявления JS Синтаксис JS Комментарии JS Переменные JS Операторы JS Арифметические JS Присваивание JS Типы данных JS Функции JS Объекты JS События JS Строки JS Методы строки JS Числа JS Методы числа JS Массивы JS Методы массива JS Сортировка массива JS Итерация массива JS Даты JS Форматы дат JS Методы получения дат JS Методы установки дат JS Математические JS Рандомные JS Булевы JS Сравнения JS Условия JS Switch JS Цикл For JS Цикл While JS Прерывание JS Преобразование типов JS Побитовые JS Регулярные выражения JS Ошибки JS Область действия JS Подъём JS Строгий режим JS Ключевое слово this JS Ключевое слово Let JS Ключевое слово Const JS Функции стрелок JS Классы JS Отладка JS Гид по стилю JS Лучшие практики JS Ошибки JS Производительность JS Зарезервированные слова JS Версии JS Версия ES5 JS Версия ES6 JS JSON

JS Формы

JS Формы Формы API

JS Объекты

Определения объектов Свойства объекта Методы объекта Доступ к объектам Конструкторы объектов Прототипы объектов Объект ECMAScript 5

JS Функции

Определения функций Параметры функции Обращение к функции Вызов функции Применение функции Закрытие функции

JS HTML DOM

DOM Введение DOM Методы DOM Документ DOM Элементы DOM HTML DOM CSS DOM Анимация DOM События DOM Слушатель событий DOM Навигация DOM Узлы DOM Коллекции DOM Узловые списки

JS Объектная модель браузера BOM

JS Окно JS Скрин JS Локация JS История JS Навигатор JS Всплывающее оповещение JS Тайминг JS Куки

JS AJAX

AJAX Введение AJAX XMLHttp AJAX Запрос AJAX Отклик AJAX XML Файл AJAX PHP AJAX ASP AJAX База данных AJAX Приложения AJAX Примеры

JS JSON

JSON Введение JSON Синтаксис JSON и XML JSON Типы данных JSON Анализ JSON Stringify JSON Объекты JSON Массивы JSON PHP JSON HTML JSON JSONP

JS и jQuery

jQuery Селекторы jQuery HTML jQuery CSS jQuery DOM

JS Примеры

JS Примеры JS HTML DOM JS HTML Input JS HTML Объекты JS HTML События JS Браузер JS Упражнения JS Викторина JS Сертификат

JS Справочники

JavaScript Объекты HTML DOM Объекты

JavaScript. Уроки для начинающих

JavaScript Обращение к функции


Код внутри JavaScript function будет выполняться, когда "что-то" обращается к нему.


Обращение к JavaScript функции

Код внутри функции не выполняется, когда функция определена.

Код внутри функции выполняется, когда к функции обратились.

Обычно используется термин "call a function" (вызов функции) вместо "invoke a function" (обращение к функции).

Также часто говорят "вызвать функцию", "запустить функцию" или "выполнить функцию".

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


Обращение к функции как функции

Пример

function myFunction(a, b) {
  return a * b;
}
myFunction(10, 2);           // Вернёт 20
Попробуйте сами »

Функция выше не принадлежит ни одному объекту. Но в JavaScript всегда есть глобальный объект по умолчанию.

В HTML глобальным объектом по умолчанию является сама HTML страница, поэтому указанная выше функция "принадлежит" к HTML странице.

В браузере объект страницы является окном браузера. Функция выше автоматически становится функцией окна.

myFunction() и window.myFunction() являются одинаковыми функциями:

Пример

function myFunction(a, b) {
  return a * b;
}
window.myFunction(10, 2);    // также вернёт 20
Попробуйте сами »

Это распространенный способ вызова функции JavaScript, но не очень хорошая практика.
Глобальные переменные, методы или функции могут легко создавать конфликты имен и ошибки в глобальном объекте.


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

В JavaScript то, что называется this, является объектом, который "владеет" текущим кодом.

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

Обратите внимание, что this не является переменной. Это ключевое слово. Вы не можете изменить значение this.

Подсказка: Вы можете прочитать больше про ключевое слово this в разделе JS Ключевое слово this на нашем сайте.


Глобальный объект

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

В веб-браузере глобальный объект - это окно браузера.

Этот пример возвращает объект окна как значение this:

Пример

var x = myFunction();            // x будет объектом окна

function myFunction() {
  return this;
}
Попробуйте сами »

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


Вызов функции как метода

В JavaScript вы можете определить функции как методы объекта.

В следующем примере создается объект (myObject), с двумя свойствами (firstName и lastName), и методом (fullName):

Пример

var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this.firstName + " " + this.lastName;
  }
}
myObject.fullName();         // Вернёт "John Doe"
Попробуйте сами »

Метод fullName является функцией. Функция принадлежит объекту. myObject является владельцем функции.

То, что называется this, является объектом, который "владеет" JavaScript кодом. В этом случае значение этого this является myObject.

Попробуйте это! Измените метод fullName для возврата значения this:

Пример

var myObject = {
  firstName:"John",
  lastName: "Doe",
  fullName: function () {
    return this;
  }
}
myObject.fullName();          // Вернёт [объект Object] (владелец объекта)
Попробуйте сами »

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


Вызов функции с помощью конструктора функций

Если вызову функции предшествует ключевое слово new - это вызов конструктора.

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

Пример

// Это конструктор функции:
function myFunction(arg1, arg2) {
  this.firstName = arg1;
  this.lastName  = arg2;
}

// Это создаёт новый объект
var x = new myFunction("John", "Doe");
x.firstName;                             // вернёт "John"
Попробуйте сами »

Вызов конструктора создает новый объект. Новый объект наследует свойства и методы от своего конструктора.

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