function object

🎓 Объект function

⏬		⤵️

▶️ Объект arguments
▶️ Контекст выполнения
▶️ Контекст вызова
▶️ Область видимости

Как машина скорой помощи, функция может перемещаться от одного объекта к другому ( откуда она вызвана )

У 🚑 есть "контекст исполнения":

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

Все это функция 🚑 возит с собой

В момент вызова у функции 🚑 появляется контекст вызова:

🏠

конкретные условия 
( частный дом, квартира в многоэтажке, 
наличие или отсутствие лифта, водопровода и т.д. )

конкретный больной с конкретными симптомами, 
возрастом, историей болезни, характером и т.д.

🎓 КОНТЕКСТ ВЫЗОВА

⤴️		⤵️

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

🎓 КОНТЕКСТ ИСПОЛНЕНИЯ

У функции есть собственный "рабочий" контекст
свои собственные внутренние переменные и функции
они не принадлежат контексту вызова

🎓 ИНКАПСУЛЯЦИЯ

Таким образом, функция - это "капсула" со своим содержимым
Содержимое "капсулы" недоступно из контекста вызова
( посторонние не могут использовать материалы, инструменты 
и аппараты 🚑 )

🎓 this

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

☕ Например, для функции 🚑

 this.адрес
 this.этаж
 this.квартира
 this.больной.имя
 this.больной.возраст
 this.больной.симптомы
 ...

Если бы не this, вряд ли функция могла бы помочь "больному" 😉

📒 Сигнатура функции

⤴️		⤵️

Сигнатура функции - это ее имя + список формальных параметров

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

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

Если:

👆 функции будет передано аргументов больше числа формальных параметров, то лишние аргументы будут отброшены;

👆 функции будет передано аргументов меньше числа формальных параметров, то недостающие аргументы получат значение undefined

📒 Объект arguments

⤴️		⤵️

Функции JavaScript имеют встроенный объект arguments

У него есть свойство length, как у массива

Его элементы доступны по индексу, как и элементы массива

⚠️ Однако это не массив

Поэтому к нему нельзя применить методы работы с массивами ( push, pop и т.д. )

Его можно преобразовать в обычный массив с помощью метода Array.from

var args = Array.from ( arguments )

В объекте arguments находятся все аргументы, переданные функции при ее вызове

Они будут доступны по индексу строго в том порядке, в каком они были переданы функции при вызове

☕ Например:

function testArguments () {
    for ( var i = 0;  i < arguments.length;  i++ ) {
        console.log ( `[ ${ ( i + " ]" ).padEnd ( 10 ) } ${ arguments [ i ] }` )
    }
}

testArguments ( 27, false, "Fill", [ 7, 4, 5 ], null )

📒 arguments.callee

⤴️		⤵️

У объекта arguments есть свойство arguments.callee -

ссылка на выполняемую функцию ( функцию-"хозяина" объекта arguments )

☕ 1

function testArguments () {
        console.log ( arguments.callee )
}

testArguments ( 5, false )

В свойстве arguments.callee находится ссылка на саму функцию testArguments

☕ 2

Объявим функцию getArguments:

function getArguments ( param ) {
        return param ? param : arguments.callee
}

которая, если ей был передан аргумент, 
возвращает значение этого аргумента,
в противном случае 
возвращает ссылку на саму себя

Теперь вызовем эту функцию с параметром и без:

var x = getArguments ()
var y = getArguments ( "Привет!" )

результат вызова функции без аргументов 
мы поместили в переменную  x,
а результат вызова с аргументом "Привет!" 
мы поместили в переменную  y

Теперь выведем в консоль переменные x и y
в переменной x находится 
точная копия функции getArguments
а в переменной y - строка "Привет!"

Вызовем функцию x:

x ( "До свидания!" )

и получим строку "До свидания!"

❓ как мы можем использовать arguments.callee

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

Объявим функцию, которая "сама себя лечит",
т.е. сама добавляет себе свойства и методы:

☕ 3

function setProperty ( prop, val ) {
        arguments.callee [ prop ] = val
}

Теперь заставим ее создать себе парочку свойств:

setProperty ( "isActive", false )
setProperty ( "value", 50 )

Ну, и для пущей убедительности 
заставим ее создать себе метод:

setProperty ( "method", function () {
        console.log ( "А еще я умею вышивать крестиком" )
} ) 

здесь мы передаем ей 
в качестве второго аргумента функцию

Теперь проверим, что эти свойства и метод 
появились у функции  setProperty

Выведем в консоль свойства isActive и value
функции  setProperty
и вызовем ее метод  method

☕ 4

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

Пусть это будет функция, 
вычисляющая факториал числа

var factorial = function ( num ) {
        var res = 1, n = 1
        while ( n <= num )  res *= n++
}

"модифицируем" ее следующим образом:

var factorial = function ( num ) {
        if ( !arguments.callee.res )  arguments.callee.res = []
        var res = 1, n = 1
        while ( n <= num )  res *= n++
        arguments.callee.res.push ( res )
        return res
}

☕ 5

var buttons = []
for ( var n = 0; n < 5; n++ ) {
        buttons [ n ] = document.body.appendChild ( document.createElement( 'button' ) )
        buttons [ n ].innerText = n
        buttons [ n ].onclick = function ( event ) {
                if ( !arguments.callee.res )
                        arguments.callee.res = []
                arguments.callee.res.push ( event.timeStamp )
                console.log ( arguments.callee.res )
        }
}

В этом примере создаются анонимные функции,
которые обрабатывают событие click  кнопок
Каждая функция "накапливает" данные
о времени клика на кнопке
в массиве arguments.callee.res
Модифицируем этот код:

var buttons = []
for ( var n = 0; n < 5; n++ ) {
        buttons [ n ] = document.body.appendChild ( document.createElement( 'button' ) )
        buttons [ n ].innerText = n
        buttons [ n ].onclick = function ( event ) {
                if ( !arguments.callee.clicksTime )
                        arguments.callee.clicksTime = []
                arguments.callee.clicksTime.push ( event.timeStamp )
                console.log ( arguments.callee.clicksTime )
                arguments.callee.res = arguments.callee.clicksTime.length > 1 ? 
                        arguments.callee.clicksTime [ arguments.callee.clicksTime.length - 1 ] -
                        arguments.callee.clicksTime [ arguments.callee.clicksTime.length - 2 ] : 0

                console.info ( `Интервал между последними кликами: ${arguments.callee.res}` )
        }
}

Что теперь делает каждый обработчик
клика на кнопке ?

⤴️		⏫

💼 Упражнения