RealAdmin.ru

Объявление и применение функций в JavaScript

JavaScript
Категория: Кодинг
21 авг 2017 г. в 15:34

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

Шутка JavaScript

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

Объявлением функции называется указание названия, параметров и исполняемого тела. Поместив объявление в JavaScript переменную оно становится выражением функции.

// Объявление
function function_name() {};
// Выражение
var function_name = function() {};

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

function_name(); //вызов сработает
function function_name(){};

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

function_name(); //вызов НЕ сработает
var function_name = function(){};

Неотложные функций

Эти функции запускаются сразу же как обработчик дойдёт до них. То есть, не ждут вызова. Создаются простым добавлением скобок до и после выражения. Могут быть анонимными — не иметь названия.

Ниже приведены два наиболее распространенных синтаксиса:

(function optional_function_name() {
  //body
}());
(function optional_function_name() {
  //body
})();

Есть и другие способы создания неотложных функций, но рекомендую использовать приведённые выше.

// Другие способы
!function() { /* ... */ }();
+function() { /* ... */ }();
new function() { /* ... */ };

Такие функции идеально подходят для написания кода, который должен выполняться только один раз: пространство имен, создание замыканий, создание частных переменных и многое другое. Для примера, представьте что с помощью JavaScript требуется получить язык страницы, а сделать это можно только проделав какие-то вычисления (например, ajax запрос).

var page_language = (function () {
  var lang;
  // Код для получения языка страницы
  return lang;
})();

Методы

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

var calc = {
  add : function(a,b){return a+b},
  sub : function(a,b){return a-b}  
}
console.log(calc.add(1,2)); //3
console.log(calc.sub(80,2)); //78

«add» и «sub» являются методами объекта «calc».

А вот ещё интересный пример, который основан на том что функция также является объектом.

function add(a){
  return function(b){return a+b;}
}
console.log(add(1)(2)); // Результат 3

Возвращаемая анонимная функция — это метод функции «add».

Конструкторы

Если добавить перед функцией ключевое слово «new» и вызывать его, то получим конструктор. Конструктор позволяет создавать экземпляры объектов, что является основой объектно-ориентированного программирования. Рассмотрим пример с созданием экземпляров «Фрукт».

function Fruit(){   
  var name, color; // наименование и цвет
  this.getName = function(){return name;};
  this.setName = function(value){name=value};   
  this.getColor = function(){return color;};
  this.setColor = function(value){color=value}; 
}
 
var apple = new Fruit();
apple.setName("Шафран");
apple.setColor("Красный");
 
var orange = new Fruit();
orange.setName ("Валенсийские апельсины");
orange.setColor ("Оранжевый");
 
console.log(orange.getName()); // "Валенсийские апельсины"
console.log(apple.getName()); // "Шафран"
console.log(orange.getColor()); // "Оранжевый"

Стрелочные функции стандарта «ES6»

Новая версия JavaScript «ES6» принесла с собой новый синтаксис для объявления функций. «ES6» обеспечивает более короткую запись и получила за свой вид название «Стрелочные функции».

Стандарт «ES6» поддерживается только новыми браузерами.

// Было
var sing = function(){ console.log('singing...') };
// Стало
var sing = () => { console.log('singing...') };

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

// Было
setInterval(function () {
  console.log('message')
}, 1000);
// Стало
setInterval(() => console.log('message'), 1000);

Функции-генераторы JavaScript «ES6»

Еще одно новое определение функции из стандарта «ES6» — функция-генератор. Функции генератора способны остановить и продолжить выполнение. Его синтаксис:

function *function_name(){}

Функция-генератор создаёт итератор (повторитель). Метод итератора «next» используется для выполнения кода внутри функции-генератора до тех пор, пока не будет достигнуто ключевое слово «yield». Затем значение после слова «yield» возвращается и выполнение приостанавливается.

Если ключевое слово «yield» не достигается, то происходит возврат значения «undefined» и выполнение итератора дальше не происходит.

function *randomIncrement(i) {
 yield i + 3;
 yield i + 5;
 yield i + 10;
 yield i + 6;
}
var itr = randomIncrement(4);
console.log(itr.next().value); //7
console.log(itr.next().value); //9
console.log(itr.next().value); //14

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

Теги:
Посмотрите похожее — 6
Комментарии — 0
    © REALADMIN.RU   2017 г.
    Страница сгенерирована: 0,3038 s | 10 mb.
    На каком уровне Вы играете в шахматы?
    О П Р О С
    Home Question Top