Именованные функциональные выражения Выполнение скриптов на стороне

Привет, сегодня поговорим про именованные функциональные выражения, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое именованные функциональные выражения , настоятельно рекомендую прочитать все из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend).

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

   
1
function f() { alert(1); };

2
g = f;

3
f = 0;

4
 
5
g(); // сменили имя f на g!

Однако, есть в JavaScript способ указать имя, действительно привязанное к функции. Оно называетсяNamed Function Expression (NFE) или, по-русски, именованное функциональное выражение.

Named Function Expression

Простейший пример NFE выглядит так:

var f = function sayHi(...) { /* тело функции */ };

Проще говоря, NFE — это Function Expression с дополнительным именем (в примере выше sayHi).

Что же это за имя, которое идет в дополнение к переменной f, и зачем оно?

Имя функционального выражения (sayHi) имеет особый смысл. Оно доступно только изнутри самой функции.

Это ограничение видимости входит в стандарт JavaScript и поддерживается всеми браузерами, кроме IE8-.

Например:

   
1
var f = function sayHi(name) {

2
  alert(sayHi); // изнутри функции - видно (выведет код функции)

3
};

4
 
5
alert(sayHi); // снаружи - не видно (ошибка: undefined variable 'sayHi')

Еще одно принципиальное отличие имени от обычной переменной заключается в том, что его нельзя перезаписать:

   
1
var test = function sayHi(name) {

2
  sayHi = "тест";

3
  alert(sayHi); // function... (перезапись не удалась)

4
};

5
 
6
test();

В режиме use strict код выше выдал бы ошибку.

Устаревшее специальное значение arguments.callee

Если вы работали с JavaScript, то, возможно, знаете, что для этой цели также служило специальное значение arguments.callee.

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

Если же вы в курсе, то стоит иметь в виду, что оно официально исключено из современного стандарта. Об этом говорит сайт https://intellect.icu . А NFE — это наше настоящее.

Пример использования

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

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

Вспомним, к примеру, функцию-факториал из задачи Вычислить факториал:

   
1
function f(n) {

2
  return n ? n*f(n-1) : 1;

3
};

4
 
5
alert( f(5) ); // 120

Попробуем перенести ее в другую переменную:

   
1
function f(n) {

2
  return n ? n*f(n-1) : 1;

3
};

4
 
5
var g = f;

6
f = null;

7
 
8
alert( g(5) ); // ошибка при выполнении!

Ошибка возникла потому что функция из своего кода обращается к своему старому имени f. А этой функции уже нет, f = null.

Для того, чтобы функция всегда надежно работала, объявим ее как Named Function Expression:

   
1
var f = function factorial(n) {

2
  return n ? n*factorial(n-1) : 1;

3
};

4
  
5
var g = f;  // скопировали ссылку на функцию-факториал в g

6
f = null;

7
 
8
alert( g(5) ); // 120, работает!

В браузере IE8- создаются две функции

Как мы говорили выше, в браузере IE до 9 версии имя NFE видно везде, что является ошибкой с точки зрения стандарта… Но на самом деле ситуация еще забавнее.

Старый IE создает в таких случаях целых две функции: одна записывается в переменную f, а вторая — в переменную factorial.

Например:

   
1
var f = function factorial(n) { /*...*/ };

2
 
3
// в IE8- false

4
// в остальных браузерах ошибка, т.к. имя factorial не видно

5
alert(f === factorial);

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

Итого

Если функция задана как Function Expression, ее можно дать имя. Оно будет доступно только внутри функции (кроме IE8-) и предназначено для надежного рекурсивного вызова функции, даже если она записана в другую переменную.

Далее в учебнике мы посмотрим еще примеры применения Named Function Expression для удобства разработки.

Важность: 5

Каков будет результат выполнения кода?

function g() { return 1; }

alert(g);

А такого? Будет ли разница, если да — почему?

(function g() { return 1; });

alert(g);

Решение

Первый код выведет function ..., второй — ошибку во всех браузерах, кроме IE8-.

`1`	`// обычное объявление функции (Function Declaration)`

`2`	`function` `g() {` `return` `1; };`

3

`4`	`alert(g);` `// функция`

Во втором коде скобки есть, значит функция внутри является неFunction Declaration, а частью выражения, то есть Named Function Expression. Его имя видно только внутри, снаружи переменная g не определена.

`1`	`// Named Function Expression!`

`2`	`(function` `g() {` `return` `1; });`

3

`4`	`alert(g);` `// Ошибка!`

Все браузеры, кроме IE8-, поддерживают это ограничение видимости и выведут ошибку, ‘undefined variable’.

К сожалению, в одной статье не просто дать все знания про именованные функциональные выражения. Но я - старался. Если ты проявишь интерес к раскрытию подробностей,я обязательно напишу продолжение! Надеюсь, что теперь ты понял что такое именованные функциональные выражения и для чего все это нужно, а если не понял, или есть замечания, то не стесняйся, пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Именованные функциональные выражения

Named Function Expression

Пример использования

Итого

Комментарии

Оставить комментарий

Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)

Термины: Выполнение скриптов на стороне клиента JavaScript, jqvery, JS фреймворки (Frontend)