Один из самых ожидаемых, но простых вопросов на собеседовании касается «var». Не торопитесь и проанализируйте этот код, попробуйте угадать результат:

var x = 2;
function foo() {
 console.log(x);
 var x = 4;
};
foo()

Если вы не ответили «не определено», то я рекомендую вам продолжить чтение.

Чтобы понять причину, мы должны обратиться к 3 темам:

  1. Подъем;
  2. Закрытие;
  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.

Спасибо, что прочитали мою статью :)