Какова область видимости переменных в JavaScript?

Question

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

Answer 1

ES5 и ранее:

Переменные в Javascript изначально (до ES6) были ограничены лексической функцией. Термин лексически ограниченный означает, что вы можете увидеть область действия переменных, «посмотрев» на код.

Каждая переменная, объявленная с ключевым словом var, находится в области видимости функции. Однако, если в этой функции объявлена ​​другая функция, эти функции будут иметь доступ к переменным внешних функций. Это называется цепочкой областей действия . Работает следующим образом:

1. Когда функция ищет разрешение переменной, она сначала смотрит на свою область видимости. Это тело функции, т. Е. Все, что заключено в фигурные скобки {} (за исключением переменных внутри других функций , которые находятся в этой области).
2. Если он не может найти переменную внутри тела функции, он поднимется до цепочки и рассмотрит область видимости переменной в функции в , где была определена функция . Это то, что подразумевается под лексической областью действия, мы можем видеть в коде, где была определена эта функция, и, таким образом, можем определять цепочку области действия, просто просматривая код.

* +1025 * Пример:

// global scope
var foo = 'global';
var bar = 'global';
var foobar = 'global';

function outerFunc () {
 // outerFunc scope
 var foo = 'outerFunc';
 var foobar = 'outerFunc';
 innerFunc();
 
 function innerFunc(){
 // innerFunc scope
  var foo = 'innerFunc';
  console.log(foo);
  console.log(bar);
  console.log(foobar);
  }
}

outerFunc();

Что происходит, когда мы пытаемся зарегистрировать переменные foo, bar и foobar на консоли, следующее:

1. Мы пытаемся войти в консоль foo, foo находится внутри самой функции innerFunc. Поэтому значение foo преобразуется в строку innerFunc.
2. Мы пытаемся подключить панель к консоли, панель не может быть найдена внутри самой функции innerFunc. Поэтому нам нужно подняться по цепочке прицелов Сначала мы посмотрим на внешнюю функцию, в которой была определена функция innerFunc. Это функция outerFunc. В области outerFunc мы можем найти переменную bar, которая содержит строку «externalFunc».
3. foobar не может быть найден во innerFunc. , Поэтому нам нужно подняться по цепочке областей действия к области видимости innerFunc. Это также не может быть найдено здесь, мы поднимаемся на другой уровень к глобальной области видимости (т.е. самой внешней области видимости). Здесь мы находим переменную foobar, которая содержит строку «global». Если он не найдет переменную после перехода по цепочке областей видимости, двигатель JS выдаст referenceError .

ES6 (ES 2015) и старше:

Те же самые понятия лексической области действия и области видимости все еще применяются в ES6. Однако были введены новые способы объявления переменных. Есть следующее:

• let: создает переменную области видимости блока
• const: создает переменную области блока, которая должна быть инициализирована и не может быть переназначена

Наибольшее различие между var и let / const заключается в том, что var является функциональной областью, тогда как let / const является блочной областью. Вот пример, чтобы проиллюстрировать это:

let letVar = 'global';
var varVar = 'global';

function foo () {
  
  if (true) {
    // this variable declared with let is scoped to the if block, block scoped
    let letVar = 5;
    // this variable declared with let is scoped to the function block, function scoped
    var varVar = 10;
  }
  
  console.log(letVar);
  console.log(varVar);
}


foo();

В приведенном выше примере letVar записывает глобальное значение, потому что переменные, объявленные с let, имеют область видимости блока. Они перестают существовать вне соответствующего блока, поэтому к переменной нельзя получить доступ вне блока if.

Answer 2

В ECMAScript 6 введены ключевые слова let и const. Эти ключевые слова могут использоваться вместо ключевого слова var. В отличие от ключевого слова var ключевые слова let и const поддерживают объявление локальной области видимости внутри операторов блока.

var x = 10
let y = 10
const z = 10
{
  x = 20
  let y = 20
  const z = 20
  {
    x = 30
    // x is in the global scope because of the 'var' keyword
    let y = 30
    // y is in the local scope because of the 'let' keyword
    const z = 30
    // z is in the local scope because of the 'const' keyword
    console.log(x) // 30
    console.log(y) // 30
    console.log(z) // 30
  }
  console.log(x) // 30
  console.log(y) // 20
  console.log(z) // 20
}

console.log(x) // 30
console.log(y) // 10
console.log(z) // 10

Answer 3

В EcmaScript5 есть в основном две области: локальная область действия и глобальная область действия , но в EcmaScript6 у нас есть в основном три области действия: локальная область действия, глобальная область действия и новая область действия под названием область действия блока .

Пример объема блока: -

for ( let i = 0; i < 10; i++)
{
 statement1...
statement2...// inside this scope we can access the value of i, if we want to access the value of i outside for loop it will give undefined.
}

Answer 4

В JavaScript есть два типа областей действия.

1. Глобальная область действия : переменная, объявленная в глобальной области действия, может использоваться в любом месте программы очень плавно. Например:

   var carName = " BMW";
   
   // code here can use carName
   
   function myFunction() {
        // code here can use carName 
   }
   

2. Функциональная область или локальная область действия : переменная, объявленная в этой области, может использоваться только в своей собственной функции. Например:

   // code here can not use carName
   function myFunction() {
      var carName = "BMW";
      // code here can use carName
   }