Аргументы функции в JavaScript

Статья, в которой рассмотрим, что такое аргументы функции и как с ними можно работать в JavaScript. Познакомимся с объектом arguments и его основными свойствами. Разберем, что означает ключевое слово this внутри тела функции. А также затронем основные принципы того, как в JavaScript можно имитировать перегрузку функций.

Что такое аргументы функции?

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

JavaScript - Аргументы (параметры) функции

Передача значений параметрам функции осуществляется при её вызове.

JavaScript - Передача значений аргументам функции при вызове

Кроме самой этой функции доступ к этим параметрам могут также иметь другие функции, находящиеся в ней.

Функция может иметь 0, 1, 2, 3 или большее количество аргументов. Они указываются в круглых скобках и разделяются между собой запятыми. Если функция не имеет аргументов (0), то круглые скобки всё равно указываются.

Как получить значение параметра в теле функции

Обратиться к значениям параметров внутри тела функции в JavaScript можно 2 различными способами:

  1. По имени. Данный способ можно использовать только в том случае, если этот параметр предварительно описан в объявлении (в круглых скобках).
    //объявление функции sum
    function sum(num1,num2){
      //обращения к значению 1 и 2 параметра осуществляется по имени
      return num1+num2;
    }
    //вызов функции sum (вывод результата в консоль)
    //7 - значение 1 параметра (num1)
    //4 - значение 2 параметра (num2)
    console.log(sum(7,4));
    
  2. По порядковому номеру. Данный способ позволяет получить значение параметра по его порядковому номеру с помощью специального объекта arguments.
    //объявление функции sum
    function sum(num1,num2){
      //обращения к значению 1 и 2 параметра осуществляется с помощью объекта arguments
      //arguments[0] - значение 1 параметра
      //arguments[1] - значение 2 параметра  
      return arguments[0]+arguments[1];
    }
    //вызов функции sum (вывод результата в консоль)
    //7 - значение 1 параметра (к нему можно обратиться по имени num1 и с помощью arguments[0])
    //4 - значение 2 параметра (к нему можно обратиться по имени num2 и с помощью arguments[1])
    console.log(sum(7,4));
    

Внимание: Параметры существуют только во время выполнения функции. Как только функция закончит своё выполнение, в дело вступает сборщик мусора. Он удаляет параметры и локальные переменные этой функции из памяти.

Основное отличие между первым способом получения значения параметра (по имени) и вторым (по порядковому номеру) заключается в том, что:

  • 1 способ позволяет обратиться только к параметрам, которые указаны при объявлении функции.
  • 2 способ позволяет обратиться к значению любого параметра, даже если у него нет имени (с помощью объекта arguments). Это возможность языка JavaScript позволяет писать более гибкие функции. Например, при вызове функции ей можно передать любое число параметров, даже если их количество не совпадает с объявленным.

Объект arguments

Получить значения параметров в JavaScript можно не только по имени, но и по их порядковому номеру. Доступ к значениям переданных параметров в зависимости от их порядкового номера в вызове функции осуществляется с помощью специального объекта arguments. Работа с данным объектом напоминает работу с массивом. Т.е. для того чтобы в теле функции обратиться к 1 параметру необходимо использовать argument[0], к 2 параметру - arguments[1], к 3 параметру - arguments[2] и т.д.

Кроме как получить значение переданных параметров, данный метод также позволяет узнать их количество. Для этого используется свойства объекта arguments length. Используя данное свойство можно не только узнать количество переданных параметров, но и организовать цикл по ним с помощью оператора for.

Рассмотрим несколько примеров:

1. Функция, вычисляющее количество калорий, которые необходимо человеку в день (обращение к параметрам осуществляется по имени и с помощью объекта arguments):

// описание функции
// floor (пол) и growth (рост) - параметры
function countCal(floor,growth) {
  var result;
  // обращаемся к параметрам по имени
  if ((floor==0) || (floor=='man')) {
    result = (growth-100)*20;
  }
  else if ((floor==1) || (floor=='woman')) {
    result = (growth-105)*19;
  }
  if (result) {
    //уровень активности 
    if (arguments[2]) {
      result *= arguments[2];
    }
    console.log('Количество ккал для нормальной жизнедеятельности: ' + result);
  }
  else {
   console.log('Неверно указаны параметры');
  }
}
/*Вызов функции и передаче ей 2 параметров. 
  1 параметр имеет значение "man" (к нему можно обратиться с помощью имени floor и arguments[0]), 
  2 - значение 185 (к нему можно обратиться с помощью имени growth и arguments[1]).*/
countCal("man",185);
/*Вызов функции и передаче ей 3 параметров, хотя в описании функции присутствуют только 2.
  Получить значение 3 параметра в данном случае можно только так: arguments[2]*/
countCal("man",185,2);

JavaScript - Работа с аргументами функции (пример 1)

2. Функция, выводящая в консоль все переданные параметры и их количество:

// объявление функции
var myFunction = function() {
  console.log('Количество переданных параметров = ' + arguments.length);
  // переберём все параметры с помощью цикла for
  for (var i=0; i < arguments.length; i++) {
    console.log(i + ' параметр = ' + arguments[i]);
  }
}
//вызов функции
myFunction(3, 7, 27, 'JavaScript');
//вызов функции
myFunction();
//вызов функции
myFunction('Яблоки', 'Груши', 'Апельсины');

JavaScript - Работа с аргументами функции (пример 2)

3. Функция, суммирующая все переданные ей параметры (при этом количество параметров заранее не известно):

// объявление функции
var myCalc = function() {
  // переберём все параметры с помощью цикла for
  var sum = 0;
  for (var i=0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  // возвратим в качестве результата сумму
  return sum;
}
//вызов функции (вывод в консоль)
console.log(myCalc(4, 20, 17, -6));

JavaScript - Работа с аргументами функции (пример 3)

Объект arguments обычно применяется в тех случаях, когда необходимо:

  1. проверить количество переданных параметров;
  2. обрабатывать какое угодно количество параметров, т.к. их число заранее неизвестно;
  3. разделить параметры на основные (обязательные) и неосновные (которые необязательно указывать при вызове функции).

Свойство callee объекта arguments

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

//объявление функции
var myFunction = function(num) {
  if (num<=1) return 1;
  return num*arguments.callee(num-1);
}
//объявление переменной result
var result;
//вызов рекурсивной функции с параметром 7 (сохраним результат в result)
result = myFunction(7);
//вывод значения переменной result в консоль браузера
console.log(result);
//вызов рекурсивной функции с параметром 4 (сохраним результат в result)
result = myFunction(4);
//вывод значения переменной result в консоль браузера
console.log(result);

Значения непереданных параметров

Если в объявлении функции заданы параметры (1 или больше), а при вызове функции их не указали (или некоторые из них), то непереданные параметры будут иметь значение undefined.

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

// Объявление функции
function outputParam(param1, param2, param3) {
  console.log("Значение параметра param1: " + param1);
  console.log("Значение параметра param2: " + param2);
  console.log("Значение параметра param3: " + param3);
}
// Вызовы функции outputParam
outputParam('Дождь','Снег','Туман');
// Вызовы функции outputParam
outputParam(17);
// Вызовы функции outputParam
outputParam(24,33);
// Вызовы функции outputParam
outputParam();

JavaScript - Значения непереданных параметров функции

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

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

var myFunction = function() {
  return this;
} 
console.log(this);

JavaScript - Ключевое слово this в теле функции

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

//объект
var myObject = {
  fish : 'Треска',
  //функция как метод объекта
  getFish: function() {
    return this.fish;
  },
  //функция как метод объекта
  getOwnObject: function() {
    return this;
  }
}
//вывести в консоль значение метода getFish
console.log(myObject.getFish());
//вывести в консоль значение метода getOwnObject
console.log(myObject.getOwnObject());

JavaScript - Ключевое слово this при использовании функции как метода объекта

Перегрузка функций в JavaScript

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

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

  • Для того чтобы проверить передан аргумент или нет, используйте условие с проверкой его значения на undefined.
  • Для проверки количества переданных аргументов функции используйте свойство объекта arguments length.
  • Чтобы узнать тип переданного значения аргумента используйте операторы typeof или instanceof.
  • Для работы с переменным числом аргументов, используйте объект arguments.
  • Начиная с версии ECMAScript6, Вы можете указывать значения по умолчанию для аргументов.

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

//объявление функции, которая изменяет цвет заднего фона элементов 
function setBgColor(bgColor,elements) {
  //если параметр elements при вызове не указан
  if (elements=== undefined) {
    //то приравнять его значение 'div'
    elements = 'div';
  }
  //получить все элементы
  elements = $(elements);
  //перебрать все элементы и установить им указанный цвет заднего фона 
  elements.each(function(){
    $(this).css('background-color',bgColor);
  });
}
/*Вызвать функцию setBgColor, указав один параметр.
  Т.к. 2 параметр не указан, то данная фукция изменит цвет заднего фона у всех элементов div.*/
setBgColor('green'); 
/*Вызвать функцию setBgColor, указав 2 параметра.
  Т.к. 2 параметр задан, то данная функция изменит цвет заднего фона только элементов button.*/
setBgColor('#ff0000','button');  

Произведём некоторые изменения в вышепредставленном коде. А именно, укажем для второго параметра значение по умолчанию:

//объявление функции, которая изменяет цвет заднего фона элементов 
//параметр elements имеет значение 'div' по умолчанию
function setBgColor(bgColor,elements = 'div') {
  //получить все элементы
  elements = $(elements);
  //перебрать все элементы и установить им указанный цвет заднего фона 
  elements.each(function(){
    $(this).css('background-color',bgColor);
  });
}
//вызвать функцию setBgColor, указав один параметр 
setBgColor('green'); 
//вызвать функцию setBgColor, указав 2 параметра
setBgColor('#ff0000','button');


   JavaScript и jQuery 0    1526 0

Комментарии (2)

  1. Maksim # 0
    Здравствуйте Александр! Спасибо за уроки!

    в последнем примере, в строке 5 написано elements = $(elements). Забегая немного вперед, правильно ли я понимаю, что знак $ заменяет document.getElementById()?
    1. Евгений # 0
      Не совсем. $ — это обращение к библиотеке jQuery обычно, где далее в скобках пишется любой селектор, который поддерживает библиотека, не только id
      E.g.:
      $("#test") тоже самое, что getElementById(«test»)

      А вот это: $(".class-test") уже не тоже самое, что getElementById(«class-test»)

    Вы должны авторизоваться, чтобы оставлять комментарии.