Определения функций JavaScript

Объявления функций

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

function functionName(parameters) {
  // code to be executed
}

Объявленные функции выполняются не сразу. Они «сохраняются для дальнейшего использования», и будут выполнены позже, когда они будут вызваны (вызваны).

Пример

function myFunction(a, b) {
   return a * b;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Call a function which performs a calculation and returns the result:</p>

<p id="demo"></p>

<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;

function myFunction(a, b) {
  return a * b;
}
</script>

</body>
</html>

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

Функциональные выражения

Функцию JavaScript также можно определить с помощью выражения.

Выражение функции может быть сохранено в переменной:

Пример

const x = function (a, b) {return a * b};

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>A function can be stored in a variable:</p>
<p id="demo"></p>

<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

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

Пример

const x = function (a, b) {return a * b};
let z = x(4, 3);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>

<p id="demo"></p>

<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>

</body>
</html>

Приведенная выше функция на самом деле является анонимной функцией (функцией без имя).

Функциям, хранящимся в переменных, не нужны имена функций. Они всегда вызывается (вызывается) с использованием имени переменной.

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

Конструктор Function()

Как вы видели в предыдущих примерах, функции JavaScript определяются с ключевым словом function.

Функции также можно определить с помощью встроенного конструктора функций JavaScript, называемого Функция().

Пример

const myFunction = new Function("a", "b", "return a * b");

let x = myFunction(4, 3);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>JavaScript has an built-in function constructor.</p>
<p id="demo"></p>

<script>
const myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

На самом деле вам не нужно использовать конструктор функции. Пример выше аналогичен написанию:

Пример

const myFunction = function (a, b) {return a * b};

let x = myFunction(4, 3);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p id="demo"></p>

<script>
const myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

В большинстве случаев вы можете избежать использования ключевого слова new в JavaScript.

Функция подъема

Ранее в этом уроке вы узнали о «подъеме» (JavaScript Hoisting).

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

Поднятие применяется к объявлениям переменных и объявлениям функций.

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

myFunction(5);

function myFunction(y) {
  return y * y;
}

Функции, определенные с помощью выражения, не поднимаются.

Самовызываемые функции

Функциональные выражения можно сделать «самовызывающими».

Самовызывающее выражение вызывается (запускается) автоматически, без вызова.

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

Вы не можете самостоятельно вызвать объявление функции.

Вы должны добавить круглые скобки вокруг функции, чтобы указать, что это функциональное выражение:

Пример

(function () {
  let x = "Hello!!";  // I will invoke myself
})();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<p>Functions can be invoked automatically without being called:</p>

<p id="demo"></p>

<script>
(function () {
  document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>

</body>
</html>

Приведенная выше функция на самом деле является анонимной функцией самовызова (функция без имени).

Функции могут использоваться как значения

Функции JavaScript можно использовать в качестве значений:

Пример

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3);

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>Functions can be treated as values:</p>
<p>x = myFunction(4,3) or x = 12</p>
<p>In both cases, x becomes a number with the value of 12.</p>
<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Функции JavaScript можно использовать в выражениях:

Пример

function myFunction(a, b) {
  return a * b;
}

let x = myFunction(4, 3) * 2;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Functions</h2>
<p>Functions can be used in expressions.</p>
<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
let x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Функции — это объекты

Оператор typeof в JavaScript возвращает "функцию" для функции.

Но функции JavaScript лучше всего можно описать как объекты.

Функции JavaScript имеют как свойства, так и . методы.

Свойство arguments.length возвращает количество аргументов, полученных при функция была вызвана:

Пример

function myFunction(a, b) {
  return arguments.length;
}

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<p>The arguments.length property returns the number of arguments received by the function:</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>

</body>
</html>

Метод toString() возвращает функцию в виде строки:

Пример

function myFunction(a, b) {
  return a * b;
}
let text = myFunction.toString();

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>

<p>The toString() method returns the function as a string:</p>

<p id="demo"></p>

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

</body>
</html>

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

Стрелочные функции

Стрелочные функции позволяют использовать короткий синтаксис для написания функциональных выражений.

Вам не нужны ключевое слово function, ключевое слово return и ключевое слово фигурные скобки.

Пример

// ES5
var x = function(x, y) {
    
   return x * y;
}

// ES6
const x = (x, y) => x * y;

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) =&gt; x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Стрелочные функции не имеют собственного this. Они не очень подходят для определения методов объекта.

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

Использование const безопаснее, чем использование var, поскольку выражение функции всегда постоянное значение.

Ключевое слово return и фигурные скобки можно опустить только в том случае, если функция представляет собой один оператор. По этой причине было бы хорошей привычкой всегда сохранять их:

Пример

const x = (x, y) => { return x * y };

Попробуйте сами →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrow Functions</h2>

<p>Arrow functions are not supported in IE11 or earlier.</p>

<p id="demo"></p>

<script>
const x = (x, y) =&gt; { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

Функции стрелок не поддерживаются в IE11 и более ранних версиях.

Определения функций JavaScript

Оглавление

Объявления функций

Пример

Функциональные выражения

Пример

Пример

Конструктор Function()

Пример

Пример

Функция подъема

Самовызываемые функции

Пример

Функции могут использоваться как значения

Пример

Пример

Функции — это объекты

Пример

Пример

Стрелочные функции

Пример

Пример