Вызов функций JavaScript

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

Обычно говорят "вызвать функцию" или "выполнить функцию".

Запуск функции как функции

Пример:

function myFunction(a, b) {
     return a * b;
}
myFunction(10, 2);           // вернет 20 

Функция в предыдущем примере не принадлежит какому-либо объекту. Однако в JavaScript всегда существует "дефолтный" глобальный объект.

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

В браузере объект страницы — это окно браузера или объект window. Так, функция из примера автоматически становится функцией объекта window. Таким образом, myFunction() и window.myFunction() это одна и та же функция:

function myFunction(a, b) {
     return a * b;
}
window.myFunction(10, 2);    // также вернет 20 

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

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

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

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

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

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

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

В браузере глобальный объект — это окно браузера (объект window).

В следующем примере функция возвращает объект window:

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

function myFunction() {
    return this;
}

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

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

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

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

var myObject = {
     firstName:"John",
     lastName: "Doe",
     fullName: function () {
         return this.firstName + " " + this.lastName;
     }
}
myObject.fullName();         // вернет "John Doe" 

Метод fullName — функция. Эта функция принадлежит объекту. Объект myObject — владелец функции fullName.

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

var myObject = {
    firstName:"John",
     lastName: "Doe",
     fullName: function () {
         return this;
     }
}
myObject.fullName();          // вернет [object 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 станет новый объект, созданный при вызове функции конструктора.