Compreensão profunda de como o mecanismo JavaScript executa código JS

Como começar rapidamente com VUE3.0: Entre no aprendizado

Recomendações relacionadas: Tutoriais de JavaScript

Provavelmente ouvimos com frequência "ambiente de execução", "escopo", "protótipo (cadeia)", "contexto de execução", etc.

Executando código JS

Sabemos que js é uma linguagem de tipagem fraca e o tipo de variável é determinado apenas em tempo de execução. Quando o mecanismo js executa o código js, ​​ele também realiza análise lexical , análise de sintaxe , análise semântica e outros processamentos de cima para baixo, e gera uma AST (árvore de sintaxe abstrata) após a conclusão da análise do código e, finalmente, gera código de máquina que a CPU pode executar com base no AST e executar.

Além disso, o mecanismo JS também realizará outros processamentos ao executar o código. Por exemplo, existem dois estágios no V8:

• Estágio de compilação: Este estágio criará o contexto de execução, incluindo a criação de objetos variáveis ​​(VO) (este será. Inicializado para indefinido), estabelecendo cadeia de escopo, determinando este ponteiro, etc. Cada vez que você entra em um ambiente operacional diferente. V8 sempre criará um novo contexto de execução.
• Fase de execução: O contexto de execução criado na fase de compilação é colocado na pilha de chamadas e se torna o contexto de execução em execução. Depois que o código for executado, retire-o da pilha de chamadas. (Há um processo VO - AO aqui: a variável é usada quando o JavaScript atribui um valor à variável. Neste momento, o objeto variável será convertido em um objeto ativo e o objeto ativo convertido poderá ser acessado)

Isso leva a dois conceitos: "Contexto de execução" e "cadeia de escopo".

Contexto de execução JavaScript

Pelo exposto, podemos saber: quando o código js executa um trecho de código executável, o contexto de execução correspondente será criado.
Em primeiro lugar, existe um conceito correspondente ao código executável em js: "ambiente de execução" - ambiente global, ambiente de função e eval .
Em segundo lugar, para cada contexto de execução, existem três atributos importantes:

• objeto variável (ou seja, "VO")
• encadeia
• o escopo.

Vejamos dois trechos de código:

var scope="global scope";
	var escopo="escopo local";
	função f(){
		escopo de retorno;
	}
	return f();}checkscope();

var scope="escopo global";function checkscope(){
	var escopo="escopo local";
	função f(){
		escopo de retorno;
	}
	return f;}checkscope()();

O que eles imprimirão?

Por que? A resposta é que suas pilhas de contexto de execução são diferentes!

O que é a “pilha de contexto de execução”?
Ao executar um código executável, os preparativos serão feitos com antecedência. Os "preparativos" aqui são profissionalmente chamados de "contexto de execução". Mas com o aumento do código executável, como funções, como gerenciar tantos contextos de execução? Portanto, o mecanismo JS criou o conceito de pilha de contexto de execução.
Podemos usar completamente um array para simular seu comportamento (sempre há um contexto de execução global globalContext na parte inferior da pilha).

Definimos um EStack, primeiro

EStack=[globalContext]

e depois simulamos o primeiro trecho de código:

EStack.

functionContext

); EStack.push(<f> functionContext);EStack.pop();EStack.pop()

;

)

;EStack.push (<f> functionContext);EStack.pop();

A propósito, como conseguir “economia de dados a longo prazo” na “modularização front-end”?
esconderijo? Não. Encerramento!

Escopo JavaScript e cadeia de escopo

Em primeiro lugar, escopo se refere à área do programa onde as variáveis ​​são definidas. O escopo especifica como encontrar a variável, que determina os direitos de acesso do código atualmente em execução à variável.
Existem dois tipos de escopo: escopo estático e escopo dinâmico .
O escopo estático usado por JS também é chamado de “escopo léxico”. O escopo de uma função é determinado quando a função é definida.

Pelo exposto, as variáveis ​​​​no escopo lexical terão um determinado escopo durante o processo de compilação. Este escopo é o "contexto de execução atual". Após ES5 usamos "ambiente léxico" em vez de escopo para descrever o contexto de execução. O ambiente lexical consiste em dois membros:

• Registro de ambiente auto-lexical: usado para registrar objetos variáveis ​​em seu próprio ambiente lexical
• Referências de ambiente lexical externo: usado para registrar referências existentes no ambiente lexical externo

Vejamos ainda um exemplo:

var value=1 ;função foo(){
	console.log(valor);}barra de função(){
	var valor=2;
	foo();}bar();

Olhando novamente para a definição acima, o que deve ser impresso?

Vamos analisar o processo de execução:
Execute a função foo(), primeiro pesquise na função foo para ver se existe um valor de variável local. Caso contrário, procure o código na camada superior com base na posição em que foi definido, ou seja, valor=1 Assim o resultado será impresso como 1.

Claro, isso não é tão simples e pode ser resumido da perspectiva do contexto de execução.

Estabelecendo uma Cadeia de Escopo

Acima falamos sobre os dois componentes do ambiente lexical (escopo). Combinado com o contexto de execução, não é difícil descobrir que através da referência do ambiente lexical externo, o escopo pode ser expandido ao longo da pilha, camada por camada, estabelecendo uma estrutura de cadeia que se estende para fora do ambiente atual.

Vejamos outro exemplo:

function foo(){
	console.dir(barra);
	var a=1;
	barra de funções(){
		uma=2;
	}}console.dir(foo);foo();

A partir do escopo estático, a função global foo cria um atributo [[scope]] de seu próprio objeto

foo

[[scope]]=[globalContext];

( ), também entrará sucessivamente no período de definição e no período de execução da função foo.

o

[[scope]] interno global e o escopo interno de foo

bar[[scope]]=[fooContext,globalContext];

este ponto: "JS passará Referências de ambiente lexical externo são usadas para criar uma cadeia de escopo de objetos variáveis, garantindo assim o acesso ordenado às variáveis ​​​​e funções às quais o ambiente de execução tem acesso.

" dissemos anteriormente. Qual é a diferença entre eles? Vamos falar sobre por que eles imprimem “escopo local” da mesma maneira: Ainda é a mesma frase “JS usa escopo léxico, e o escopo da função depende do local onde a função é criada. ” - Execução da função JS É utilizada uma cadeia de escopo, que é criada quando a função é definida. A função aninhada f() é definida nesta cadeia de escopo, e o escopo da variável nela deve se referir a variáveis ​​locais. Não importa quando e onde f() é executado, esta ligação ainda é válida quando f() é executado.

Consulta de variável baseada na cadeia de escopo

Quando uma variável não pode ser encontrada em seu próprio registro de ambiente léxico, ela pode ser pesquisada na camada externa com base na referência do ambiente léxico externo até que a referência do ambiente léxico externo no ambiente léxico mais externo seja null .
Semelhante a isso é a "pesquisa baseada na cadeia de protótipos em objetos":

• Protótipo: Todo objeto JS (exceto nulo) é associado a outro objeto quando é criado. Este objeto é o que chamamos de protótipo. Todo objeto “herda” propriedades do protótipo.
• Ao ler os atributos de uma instância, se não for encontrado, procurará os atributos no protótipo associado ao objeto. Se não for encontrado, procurará o protótipo do protótipo, até o topo. nível ( __proto__ é nulo)

. A diferença também é óbvia: a cadeia de protótipo é um link que estabelece a herança do objeto através do atributo protótipo enquanto a cadeia de escopo se refere ao fechamento que permite que funções internas acessem funções externas; Seja direta ou indiretamente, todas as cadeias de escopo de funções estão, em última análise, vinculadas ao contexto global.

Recomendações relacionadas: Tutorial de aprendizado de JavaScript

O texto acima é uma compreensão aprofundada de como o mecanismo JavaScript executa o código JS. Para obter mais informações, preste atenção a outros artigos relacionados no site PHP chinês!