Olá novamente! Já escrevemos que, no final de setembro, na OTUS, um novo fluxo do curso
"Fullstack JavaScript Developer" será iniciado. Antecipando o início das aulas, continuamos compartilhando com você artigos de direitos autorais preparados especialmente para os alunos do curso. Hoje, veremos os tipos de contexto em JavaScript. Vamos lá
Autor do artigo: Pavel Yakupov
O objetivo deste artigo é que o leitor entenda os conceitos básicos de escopos usados em JavaScript.
O escopo é uma das coisas mais importantes do JavaScript (e tem um lugar na maioria das linguagens de programação modernas). O escopo está associado à longa vida de uma variável ou função, acesso, visibilidade de variáveis e algumas outras coisas.
Por que precisamos desse escopo?
O escopo nas linguagens de programação executa as seguintes funções:
Segurança (encapsulamento) - variáveis e funções estão disponíveis apenas quando são necessárias.
Elimina o conflito de nomes de variáveis. A presença de escopos permite que você não "despeje" todas as variáveis em um heap, simulando espaços para nome (espaço para nome).
Reutilização de código - o código escrito pode ser usado, evitando efeitos "estranhos".
Tipos de escopos
No nível mais simples, no JavaScript, existem dois escopos - local e global.
Neste artigo, também abordaremos um escopo como lexical e block.
Escopo global
Ao abrir um documento em JavaScript e começar a escrever código, você se enquadra no escopo global.
Tudo o que é criado no escopo global - variáveis, funções - é acessível de qualquer lugar do programa. Além disso, variáveis globais estão disponíveis o tempo todo em que seu aplicativo está sendo executado e são excluídas apenas quando o programa termina seu trabalho.
Muitos novatos no início usam variáveis globais com muita freqüência - isso é um pouco mais fácil de programar, mas isso é considerado uma prática ruim e geralmente leva a programas instáveis que acabam usando muito mais memória do que realmente precisam. Afinal, se as variáveis fossem encapsuladas de maneira confiável nas funções em que são usadas, no final da função, elas seriam excluídas da memória usando o coletor de lixo e parariam de ocupar a memória do cliente, o que não é infinito.
Escopo local
Variáveis declaradas localmente estão disponíveis apenas no escopo em que foram declaradas.
A maneira mais fácil de criar um novo escopo é criar uma nova função. Uma variável criada dentro de uma função é acessível apenas a partir do interior. Além disso, o escopo local pode ser obtido usando o escopo do bloco (será discutido abaixo).
function foo(){ let x = 15; } //console.log(x); error { let y = 14; } // console.log(y); error { var z = 13; } console.log(z); // var , // // - 13
Âmbito lexical
Então, qual é o escopo lexical? Em termos simples, essa é a capacidade de uma função interna acessar um escopo externo. Aqui vale a pena recorrer à prática de fechamentos. Você provavelmente pode escrever mais alguns artigos sobre eles, mas rapidamente darei um exemplo clássico:
sum(5)(5) // ? function sum(a){ var add = function(b){ return a+b; } return add; } console.log(sum(5)(5)); // 10 //
Escopo do bloco
Até agora, discutimos apenas os escopos associados à operação de funções e chaves {}, e discutimos as diferenças na operação de var e permitimos apenas indiretamente.
Como a diretiva var funciona? Quando uma variável é declarada usando-a no escopo global, o nome da variável é atribuído como uma propriedade ao objeto da janela global (se queremos dizer o navegador) e permanece lá o tempo todo que o programa é executado. Ao mesmo tempo, como um escopo de bloco, como {} (e se, por, enquanto e todos os outros forem incluídos logicamente).
Além disso, há outro recurso de let e const - declarado em um escopo; eles não podem ser declarados novamente no mesmo escopo (bem, a insatisfação do intérprete parece bastante lógica aqui).
let x = 15; console.log(x); // { let x = 16; // console.log(x) // let x = 17; // , }
nova função
Recursos de escopo ao declarar uma nova função como "nova função". Essa opção para criar uma função raramente é usada, mas às vezes pode ser necessária.
Exemplo de sintaxe:
//let newFunc = new Function([arg1, arg2…argN], functionBody); let mult = new Function('a', 'b', 'return a * b'); console.log(mult(3,4));
Geralmente, uma função lembra onde nasceu (Ambiente Lexical), mas quando uma função é criada usando o novo construto Function, ela não grava as variáveis de ambiente ao seu redor, como em uma situação normal, mas apenas aquelas declaradas globalmente.
// , ()() let a = 3; function outerFunc() { var a = 2; var func = new Function('console.log(a*a)'); return func; } outerFunc()(); // 9, window
Elevação (levantamento de variáveis)
Discutindo o escopo, não pudemos abordar o tópico de aumentar o escopo das variáveis. O intérprete que lê o código na verdade lê-o duas vezes: lê funções declaradas como declaração de função e lê variáveis globais declaradas globais usando a variável var. No entanto, as variáveis são registradas não pelos valores declarados, mas pelo valor indefinido.
console.log(x); // undefined var x = 15; console.log(y);// error let y = 13;
Deixe que este tópico se relacione apenas indiretamente com áreas de visibilidade, mas às vezes esse conhecimento pode ser útil.
Obrigado a todos! Espero que este artigo tenha sido útil para alguém!
Links úteis:developer.mozilla.org/pt-BR/docs/Glossary/Scopedeveloper.mozilla.org/en/docs/Web/JavaScript/Closures2ality.com/2015/02/es6-scoping.htmllearn.javascript.ru/new-functionhabr.com/en/company/otus/blog/466873