Введение в объем в JavaScript

Автор оригинала: Cristian Salcescu.

Область применения определяет всю жизнь и видимость переменной. Переменные не видны за пределами объема, в которой они объявлены.

JavaScript имеет модульную область, функциональную область, функциональную область, масштабную область, лексическую область и глобальный объем.

Глобальный спектр

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

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

console.log(GLOBAL_DATA);

Когда на месте нет модульной системы, это намного проще создавать глобальные переменные. Переменная, объявленная вне любого функции, в любом файле, является глобальной переменной.

Глобальные переменные доступны для срока службы приложения.

Еще один способ создания глобальной переменной – использовать окно Глобальный объект в любом месте в приложении:

window.GLOBAL_DATA = { value: 1 };

На данный момент Global_data Переменная видима везде.

console.log(GLOBAL_DATA)

Как вы можете себе представить, что эти практики плохие практики.

Модуль

Перед модулями переменная, объявленная вне любой функции, была глобальная переменная. В модулях переменная, объявленная вне любой функции, скрыта и недоступна для других модулей, если только она не экспортируется.

Экспорт делает функцию или объект, доступный для других модулей. В следующем примере я экспортирую функцию из Sequence.js Файл модуля:

// in sequence.js
export { sequence, toList, take };

Импорт делает функцию или объект, из других модулей, доступных для текущего модуля.

import { sequence, toList, toList } from "./sequence";

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

Функциональная область

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

Рассмотрим следующую функцию, которая автоматически выполняет, называется IIFE.

(function autoexecute() {
    let x = 1;
})();

console.log(x);
//Uncaught ReferenceError: x is not defined

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

Переменные объявлены с var иметь только функциональные масштабы. Еще больше переменные объявлены с var поднимаются на вершину их объема. Таким образом, их можно получить доступ перед объявлением. Посмотрите на код ниже:

function doSomething(){
  console.log(x);
  var x = 1;
}

doSomething(); //undefined

Это не происходит для Пусть Отказ Переменная объявлена с Пусть Доступ к доступу только после его определения.

function doSomething(){
  console.log(x);
  let x = 1;
}

doSomething();
//Uncaught ReferenceError: x is not defined

Переменная объявлена с var можно повторно объявить несколько раз в том же объеме. Следующий код просто отлично:

function doSomething(){
  var x = 1
  var x = 2;
  console.log(x);
}

doSomething();

Переменные объявлены с Пусть или Const не может быть перенесен в той же области:

function doSomething(){
  let x = 1
  let x = 2;
}
//Uncaught SyntaxError: Identifier 'x' has already been declared

Может быть, нам даже не нужно заботиться об этом, как var начал устареть.

Область блока

Область блока определяется с фигурными брекетами. Он разделен { и } Отказ

Переменные объявлены с Пусть и Const может иметь блок-массу. Их можно получить только в блоке, в котором они определены.

Рассмотрим следующий код, который подчеркивает Пусть Область блока:

let x = 1;
{ 
  let x = 2;
}
console.log(x); //1

Напротив, var Декларация не имеет блокской области:

var x = 1;
{ 
  var x = 2;
}
console.log(x); //2

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

(function run(){
    for(var i=0; i<5; i++){
        setTimeout(function logValue(){
            console.log(i);         //5
        }, 100);
    }
})();

для Заявление петли, с Пусть Декларация создает новую переменную локаль в блочную область, для каждой итерации. Следующий код петли показывает 0 1 2 3 4 5 Отказ

(function run(){
  for(let i=0; i<5; i++){
    setTimeout(function log(){
      console.log(i); //0 1 2 3 4
    }, 100);
  }
})();

Лексическая область

Лексическая область – это способность внутренней функции доступа к внешнему объему, в которой она определена.

Рассмотрим следующий код :

(function autorun(){
    let x = 1;
    function log(){
      console.log(x);
    };
    
    function run(fn){
      let x = 100;
      fn();
    }
    
    run(log);//1
})();

Журнал Функция – это закрытие. Это относится к х Переменная от его родительской функции Autorun () , не тот из Беги () функция.

Функция закрытия имеет доступ к объему, в котором она была создана, а не объем, в котором оно было выполнено.

Локальная функция сферы Autorun () Является ли лексическая область Журнал () функция.

Сфера цепи

Каждый объем имеет ссылку на родительскую область. Когда используется переменная, JavaScript смотрит в цепочку объема до тех пор, пока он либо не найдет запрошенную переменную или до тех пор, пока она не достигнет глобального охвата, что является концом цепочки области.

Посмотрите на следующий пример :

let x0 = 0;
(function autorun1(){
 let x1 = 1;
  
 (function autorun2(){
   let x2 = 2;
  
   (function autorun3(){
     let x3 = 3;
      
     console.log(x0 + " " + x1 + " " + x2 + " " + x3);//0 1 2 3
    })();
  })();
})();

Autorun3 () Внутренняя функция имеет доступ к местный Х3 Переменная. Он также имеет доступ к х1 и x2 Переменные из внешних функций и x0 Глобальная переменная.

Если он не может найти переменную, она вернет ошибку в строгом режиме.

"use strict";
x = 1;
console.log(x)
//Uncaught ReferenceError: x is not defined

В нестроенном режиме называют «небрежным режимом», он будет делать плохую вещь и создать глобальную переменную.

x = 1;
console.log(x); //1

Заключение

Переменные, определенные в глобальном объеме, доступны везде в приложении.

В модуле переменная, объявленная вне любой функции, скрыта и недоступна для других модулей, если она не экспортируется.

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

Переменные объявлены с Пусть и Const иметь блок сферы. var не имеет блокской области.

Откройте для себя функциональный JavaScript был назван одним из Лучшие новые функциональные программирования книги BookAuthority !

Для получения дополнительной информации о применении методов функциональных программиров в реакции посмотрите на Функциональный реагировать Отказ

Учить Функциональный реагировать в проекте, основанном на проекте, с Функциональная архитектура с реагированием и redux Отказ

Следуйте в Twitter