Один из самых ожидаемых, но простых вопросов на собеседовании касается «var». Не торопитесь и проанализируйте этот код, попробуйте угадать результат:
var x = 2; function foo() { console.log(x); var x = 4; }; foo()
Если вы не ответили «не определено», то я рекомендую вам продолжить чтение.
Чтобы понять причину, мы должны обратиться к 3 темам:
- Подъем;
- Закрытие;
- Объем;
Я объясню эти темы кратчайшим образом.
Область действия: {} — это область действия. Существует блочная область, функциональная область и глобальная область. Я расскажу о области действия функции.
function foo() { some code; }
Этот «какой-то код» находится в области видимости функции. И сама функция находится в глобальной области видимости. Представьте себе это так:
{ function foo() { some code; } }
Внешняя область — это глобальная область, внутренняя область — это область действия функции «foo».
Подъем: Javascript поднимает (поднимает) объявления в начало области (не инициализации).
x = 6; console.log(x); var x;
В приведенном выше коде результатом будет 6, хотя мы объявили его после console. Это потому, что при подъеме объявления поднимаются вверх, как показано ниже:
var x; x = 6; console.log(x);
Замыкание: замыкание — это функция, которая запоминает свои внешние переменные и может обращаться к ним.
var x = 2; function foo() { console.log(x) }; foo();
Результатом этого кода будет 2 из-за закрытия.
Это означает, что console.log(x) может получить доступ к переменной x, даже если она объявлена вне своей области видимости. Но он обращается к внешней переменной только если не находит x в своей области видимости функции.
var x = 2; function foo() { var x = 5; console.log(x) }; foo();
Здесь мы объявили и инициализировали x во второй раз в области действия функции, консоль найдет x в области действия функции, и на этот раз будет записан внутренний x (5), а не внешний x.
Вернемся к нашему вопросу в начале статьи:
var x = 2; function foo() { console.log(x); var x = 4; }; foo()
В этом вопросе, из-за подъема, только замедление (‘var x’) будет подниматься наверх функционального блока,как показано ниже:
var x = 2; function foo() { var x; console.log(x); x = 4; }; foo()
Согласно замыканию, он может получить доступ к внешнему x = 2, но поскольку у нас есть x, объявленный и инициализированный во внутренней области видимости, нам не нужен внешний x = 2.
Консоль видит, что мы объявили x, но не видит инициализацию, потому что при подъеме только поднимаются объявления, а не инициализации. Вот почему он дает undefined.
Спасибо, что прочитали мою статью :)