В чем разница между областью действия и контекстом?

JavaScript - странный язык, но все же я влюблен в него и получал удовольствие от работы с ним, независимо от того, какой это базовый JavaScript, Angular, React или NodeJS. Я взаимодействую с JavaScript с помощью библиотеки jQuery. Одна из самых популярных библиотек, используемых для манипулирования DOM и добавления анимации на веб-страницы.

Через некоторое время в 2014 году я узнал об Angular, а затем о React, а затем о Vue, а затем о React Native, а затем о NodeJS, и эти библиотеки и фреймворки продолжают появляться из года в год. Сегодня у нас есть множество фреймворков и библиотек, полностью основанных на JavaScript. Infect мы можем создать приложение корпоративного уровня только с использованием JavaScript, и именно по этой причине мы слышали, что в наши дни возникает большой спрос на разработчиков стеков MEAN и MERN.

Теперь перейдем к исходной точке. Поскольку в наши дни JavaScript становится все более популярным и требовательным. Нам нужно очень четко обозначить некоторые из его основных концепций. Итак, давайте начнем с контекста и контекста. Большинство разработчиков очень ясно понимают, что такое область действия, но не очень понимают, что такое контекст. И что самое интересное, если вы спросите, что такое контекст у кого-то, кто уже работает над проектами React, он начнет говорить о хуке React useContext ().

Давайте посмотрим на область действия и контекст один за другим и посмотрим, в чем разница между ними.

Что такое объем?

Область видимости - это не что иное, как доступность (видимость) переменных. JavaScript имеет следующий тип области видимости.

Глобальный масштаб
Локальный охват

Глобальная область видимости: когда мы объявляем любую переменную вне операторов функций или блоков (if, switch, for loop, while), она называется глобальной переменной области видимости, поскольку к ней может получить доступ любой пользователь в этом модуле / файле.

// Global scoped variable
var scopeName = "Global";
function getScopeName() {
    console.log(scopeName); // Global
};
if(true) {
  console.log(scopeName); // Global
};
console.log(scopeName); // Global

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

var scopeName = "Global";
function getScopeName () {
    var year = 2021;
    console.log(scopeName); // Global
    console.log(year); // 2021
};
getScopeName();
console.log(year); // "ReferenceError: year is not defined"

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

function whichYear() {
  year = 2021;
}
whichYear ();
console.log(year);

Область действия блока: если мы определяем переменную с помощью let / const (которая недавно была введена в ECMAScript 6) внутри любых операторов блока (if, switch, for loop, while loop), то к ним нельзя получить доступ извне. Так как let и const имеют область действия блока, а var - область действия.

if(true) {
  const greeting = "Hello";
  let year = 2021;
  
  console.log(greeting); // Hello
  console.log(year); // 2021
}
console.log(greeting); // "ReferenceError: greeting is not defined"
console.log(year); // "ReferenceError: year is not defined"

Что такое контекст?

Существует много путаницы между областью действия и контекстом. Итак, мы уже видели, что такое размах. Надеюсь, вам это будет ясно. Итак, что же такое контекст?

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

Давайте разберемся с этим на примере:

function currentContext() {
  console.log(this);
};
currentContext(); // Window {window: Window, self: Window, document: document, name: "JS Bin Output ", location: Location, …}

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

Смотрите еще один интересный пример:

function setName() {
  this.myName = "Rakesh";
}
setName();
console.log(myName); // Rakesh

Ладно! Теперь вы можете подумать о том, как значение myName выводится вне функции? Как мы видим в последнем примере, this относится к окну, и мы добавили свойство myName к объекту окна. Итак, мы можем сделать window.myName или myName равными. Надеюсь, что это будет ясно.

Давайте возьмем еще один пример объекта "человек" с функцией, определенной в этом объекте.

const person = {
  name: "Rakesh",
  getName: function() {
    console.log(this.name); // "Rakesh"
  }
}
person. getName();

В приведенном выше примере функция getName определена для объекта person, и в этом случае ключевое слово this будет относиться к Объект person как функция getName принадлежит объекту person.

Теперь, после появления ECMAScript 6, на сцену также выходит стрелочная функция. Стрелочные функции не имеют собственного контекста выполнения. Итак, не имеет значения, где выполняется ваша стрелочная функция. Значение этой внутренней стрелочной функции всегда будет относиться к внешнему объекту. Другими словами, стрелочная функция разрешает this лексически.

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

var name = "I am global name";
const person = {
  name: "Rakesh",
  getName: () => {
    console.log(this.name);
    console.log(this); // Window {window: Window, self: Window, document: document, name: "JS Bin Output ", location: Location, …}
  }
}
person.getName (); // "I am global name"

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

Фух! Теперь я надеюсь, что вы будете намного яснее о концепции контекста и контекста, а также о том, как эти концепции меняются в ECMAScript 6.

Удачного обучения!

В чем разница между областью действия и контекстом?