Опубликован: 19.10.2006 | Уровень: для всех | Доступ: платный
Лекция 4:

Функции и концепция объектов

< Лекция 3 || Лекция 4: 123 || Лекция 5 >

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

<script type="text/javascript">
function multiply(){
  var out=1;
  for(var i=0; i<arguments.length; i++){
    out *= arguments[i];
  }

  return out;
}

function add(){
  var out=0;
  for(var i=0; i<arguments.length; i++){
    out += arguments[i];
  }

  return out;
}

function doAction(action){
  alert(action(1, 2, 3, 4, 5));
}
</script>

<button onclick="doAction(multiply)">Test Multiply</button>
<button onclick="doAction(add)"     >Test Add</button>


Test Multiply            Test Add

В этом небольшом фрагменте кода происходит очень многое. Вначале просто определяют две функции: multiply и add. Функция multiply просто перемножает все переданные ей числа. Аналогично, функция add складывает все переданные ей числа. Тонкости начинаются при использовании действий onclick двух созданных кнопок. Можно видеть, что при щелчке на любой из двух кнопок в функцию doAction передается объект. Ранее мы всегда передавали переменные или объекты HTML (такие, как поля ввода в предыдущем примере). В этом примере передаются функции. Функции можно передавать таким же способом, как и любой другой объект, и когда они передаются, их можно вызывать таким же способом, как и любую другую функцию. Изменяется только ее имя.

Таким образом функция doAction получает другую функцию в качестве аргумента! Если передается функция multiply, то функция doAction передает ей значения от 1 до 5, и мы получаем в результате 120. Если в doAction передается функция add, то ей также передаются значения от 1 до 5, и в результате мы получаем значение 15.

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

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

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

function myFunction(){
  function nestedFunction1(arg1, arg2, arg3){
    alert(arg1+arg2+arg3);
  }

  var nestedFunction2 = function(arg1, arg2, arg3){
    alert(arg1+arg2+arg3);
  }

  var nestedFunction3 = new Function('arg1, arg2, arg3', 'alert(arg1+arg2+arg3);');
}

В этом примере функции nestedFunction1, nestedFunction2 и nestedFunction3 являются одинаковыми по своим возможностям. Единственное различие состоит в том, как они определяются. nestedFunction1 объявлена, как это делалось раньше. Синтаксис для nestedFunction2 немного отличается. Мы задаем для функции переменную this.nestedFunction2. Синтаксис этого объявления будет следующий имяПеременной= function(аргументы){. Аналогично для функции nestedFunction3 задается переменная для новой функции. Однако это объявление существенно отличается, так как мы определяем функцию с помощью строк. Третий вариант используется редко, но является очень полезным, когда используется. Он позволяет создать строку, содержащую код выполняемой функции, а затем определить функцию с помощью этой строки.

В "следующей лекции" будут рассмотрены массивы.

< Лекция 3 || Лекция 4: 123 || Лекция 5 >
Елена Сапегова
Елена Сапегова

После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть?

Рустам Рахимов
Рустам Рахимов

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

function Complete() {

    var x = "Имя: " + document.tutform.firstname.value;

alert(x);

} - Так брать значение из формы tutform, firstname-получаем значение из имени. 

<INPUT TYPE="button" VALUE="Готово" onClick="Complete();"> - Нужно к кнопке прописать событие, при нажатие на кнопку готово, чтобы возвращалось значение с помощью функции. А так ничего не работает, и смысла учить нету, если не знать почему не работает.

 

Денис Сафронов
Денис Сафронов
Россия
жылдыз насырбекова
жылдыз насырбекова
Киргизия, бишкек