Loading
Красноглазым Джедаям
компьютерной вселенной
посвящается.

Функции в JavaScript

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

Самое главное при работе с компьютером - не давать ему понять что ты торопишься...

Синтаксис.

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

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

Способы создания

  1. Создание метода

    То есть объявление функции стандартным способом!

    function myFun(){исполняемый код как тело функции;}

    Исполнение этого тела функции будет отложено до момента вызова имени функции в коде.

    myFun();

    При использовании этого способа создания тело функции не может определяться в цикле(for, while) или в ветвлении(if), но может определяться в теле другой функции, в качестве вложенной. То есть можно создать функцию и вложить в нее другую функцию. Но чтобы вложить функцию в цикл, нужно ее сначала создать вне цикла, а в цикле только вызвать.

  2. Создание переменной - литерала

    Операция присваивания. Ее можно определять внутри циклов и ветвления. Очень полезно если в теле функции прописать return И_сюда_то_что_хотим_вернуть; тогда переменная получит результат работы функции! Функция определенная как переменая-литерал возвращает значение в переменную.

    var myFun = function(){return true;} //Определили и сохранили в массив f[0]=function myFun(){исполняемый код как тело функции;} //Определили и сразу вызвали var Fun=(function(){исполняемый код как тело функции;})(аргументы);

    Может быть вызвано как с полезным использованием возвращаемого значения так и обычным порядком.

    //как обработчик события window.onload = myFun; //обычным порядком myFun();

    В том и другом случае myFun это имя функции. Но во втором случае теряется смысл применения, потому что возвращаемое значение не используется.

  3. Создание объекта класса Function

    Объявление свойств и методов объекта с помощью конструктора. Конструктор – это функция, которая выполняет инициализацию свойств объекта и предназначена для использования совместно с инструкцией new. Инструкция new создает новый объект Function, после чего вызывает функцию-конструктор, передавая ей вновь созданный объект Function в качестве значения ключевого слова this.

    myFun = new Function("аргумент", "тело функции;");

    Может быть и вызвано потом window.onload=myFun; или если она будет объявлена как свойство любого объекта - obj, она сработает на объекте .

    obj = new Object(); obj.myFun = new Function("аргумент", "тело функции;"); obj.myFun();

    Кроме того объявление аргумента не обязательно. Но тело вроде как надо, иначе зачем вообще функция?

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

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

var Fun=function myFun(arg){alert(arg);}//будет передан один аргумент Fun("Это аргумент.");//передаем конкретный аргумент.

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

Если количество аргументов неизвестно, то при определении функции нужно учесть их максимальное количество. Дальше это работает так: в функцию передаются аргументы в произвольном количестве, и они обрабатываются функцией в том порядке как были переданы. Все те аргументы, которые были объявлены, но не были переданы в функцию при ее вызове получат значение undefined. Нам остается только в теле функции предусмотреть эту особенность, чтобы не допустить остановку выполнения программы из за ошибки. Например для каждого аргумента выставляем проверку типа if(arg). Если аргумент не передан, то этот участок кода не будет выполнен (undefined будет преобразован в false и значит if не сработает). Определили максимум аргументов и вызвали с одним:

var Fun=function myFun(arg, arg1, arg2, arg3) { //может быть передано четыре аргумента if(arg){alert(arg);}//это сообщение мы увидим if(arg1){alert(arg1);}//это и далее не увидим if(arg2){alert(arg2);} } //передаем конкретный аргумент остальные будут undefined. Fun("Это аргумент.");

Самое главное не передавать в функцию больше аргументов чем она может принять - это будет ошибкой, как обойти проблему читаем дальше.

Ну и еще можно упомянуть свойство класса FUNCTION , которое позволяет нам получить количество аргументов функции. Называется оно arguments. По сути это будет массив аргументов функции. Доступ к конкретному аргументу возможен при помощи обычного синтаксиса arguments[0] это будет ссылкой на первый аргумент функции по имени myFun(); и кроме того arguments.length покажет нам количество аргументов переданных в функцию. Свойство видит аргументы только внутри функции. По этому myFun.arguments[0] - не будет работать если вызвать его вне кода функции.

var myFun = function (arg, arg1, arg2, arg3) {//может быть передано четыре аргумента if(arg){alert(arguments[0]);}//это сообщение мы увидим if(arg1){alert(arg1);}//это и далее не увидим alert(arguments.length);//покажет количество аргументов переданных в функцию } //вызываем и передаем один аргумент остальные будут undefined. myFun("Это аргумент1.");

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

var Fun=function myFun() { //вообще не обозначаем аргументы alert(arguments[0]);//если аргумент передан, то увидим значение alert(arguments[1]); } //передаем конкретный аргумент остальные будут undefined. Fun("1");

И последнее что касаемо аргументов: Функция, изменяющая аргумент как ссылку на объект (например массив), изменяет объект. То есть изменяя в функции элемент массива, мы его изменяем и в исходном массиве, то есть изменяем массив! Но Функция изменяющая аргумент как переменную-литерал, не изменяет саму переменную, а создает ее копию!

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

Лично у меня этот момент вызывал затруднения. В переводе значит "этот". Но когда объявляешь в функции свойство через this, а потом пытаешся его вызвать наталкиваешься на фразу "Значение не определено." С матерными словами пытаешься разобрать почему это не определено, ведь определил же. Но не все так просто.

Ключевое слово this ссылается на текущий объект, ну или вызывающий объект, тот на котором выполняется код. Следовательно при объявлении свойств и методов объекта разумно использовать это слово. Пример:Создаем переменную - функцию myFun и присваиваем ей (переменной якобы!) свойство name. Посмотрим получила ли функция-переменная свойство name?!

var myFun = function() { this.name="моя функция"; //Это будет проверка значения свойства alert(this.name); } //вызываем функцию window.onload = myFun;

Работает! Результат: "моя функция". Но не стоит торопиться с выводами! Мы присвоили свойство name переменной myFun? Теперь попробуем вызвать это свойство переменной myFun!

alert(myFun.name);

Не работает! Мы получаем пустую строку или undefined то есть неопределенное значение.

Текущим объектом в данном случае является WINDOW! То есть окно браузера это и есть наш this. (Браузер Опера в случае вызова alert(this) выдает сообщение object Window). Если мы вызовем:

alert(window.name);

То получим "моя функция". Наш this это window, потому что функция вызывается объектом window по обработчику события onload.

Вывод: ключевое слово this ссылается на вызывающий функцию объект. Функция же это просто перечень команд для вызывающего объекта и сама по себе этим способом свойств и методов получить не может. Задача функции: через this передать свойства и методы вызывающему ее объекту. Таким образом при вызове функции создается объект вызова и ключевое слово this ссылается именно на этот объект.

И еще один пример с наследованием свойств, потом это пригодится для понимания прототипирования.

var b=function(){this.name="My name is b";} var c=new b; alert(c.name);

Объект c получил свойство, определенное в функции b.

Между свойством и методом нет принципиальной разницы, кроме того, что метод возвращает значение после вычисления выражения, а свойство имеет значение по умолчанию. Значение свойства можно получить указав имя через точку c.name.

Функции, объявленные в глобальной области видимости становятся методами глобального объекта Window, а вложенные функции становятся методами объемлющих объектов. В приведенном ниже примере b содержит строку "function(){return "My name is b";}". Можно вызвать ее и как свойство и как метод!

var b = function() { return "My name is b"; } //как свойство alert(window.b); //как метод alert(window.b());

Чтобы задать свойство функции - объекта нужно использовать синтаксис Имя_функции.свойство = значение;. Переменные, объявленные в функции, это и есть ее свойства. При вызове функции создается объект вызова и все ее свойства, то есть область видимости становятся свойствами объекта вызова.

Метод вызывается на выполнение при помощи оператора круглые скобки "()" c.name().

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

Ну и как итог можно изречь фразу: "В JavaScript все есть объект". При таком подходе к программированию будет больше ясности в голове. Ниже приведен пример Рекурсии.

function factorial (n) { return n<=1?1:n*factorial(n-1); } var n = prompt("N", "10"); document.write(n+"! = " + factorial(n));


Контактная информация

E-Mail: oleynikww@gmail.com

Добавить комментарий

Комментарии пользователей