Este artigo analisa o conceito e o uso dos fechamentos de JavaScript. Compartilhe para sua referência. Os detalhes são os seguintes:
Quando se trata de fechamentos, acredito que todo mundo já ouviu falar deles. Deixe -me dizer -lhe meu entendimento simples abaixo.
Para ser sincero, não há muitos cenários para escrever fechamentos manualmente no trabalho diário, mas as estruturas e componentes de terceiros usados no projeto usam mais ou menos fechamentos.
Portanto, é muito necessário entender o fechamento. hehe ...
1. O que é um fechamento
Em suma, é uma função que pode ler variáveis dentro de outras funções.
Devido ao escopo das variáveis JS, as variáveis internas não podem ser acessadas externamente e as variáveis externas podem ser externamente.
2. Use cenários
1. Implementar membros privados.
2. Proteja os namespaces para evitar variáveis globais poluentes.
3. Variáveis de cache.
Vamos primeiro olhar para um exemplo de encapsulamento:
Copie o código da seguinte forma: var pessoa = function () {
// O escopo da variável está dentro da função e não pode ser acessado fora
var name = "padrão";
retornar {
getName: function () {
Nome de retorno;
},
setName: function (newName) {
nome = newName;
}
}
} ();
console.log (Person.name); // Acesso direto, o resultado é: indefinido
console.log (Person.getName ()); // O resultado é: padrão
console.log (Person.SetName ("Langjt"));
console.log (Person.getName ()); // O resultado é: Langjt
Vejamos os fechamentos comuns em loops para resolver o problema de referência a variáveis externas:
A cópia do código é a seguinte: var ali = document.getElementsByTagName ('li');
for (var i = 0, len = ali.length; i <len; i ++) {
Ali [i] .OnClick = function () {
alerta (i); // Não importa em qual elemento você clica, o valor pop-up é LEN, indicando que o valor de I aqui e o valor de I Imprimred After for for the Swek.
};
}
Depois de usar o fechamento:
A cópia do código é a seguinte: var ali = document.getElementsByTagName ('li');
for (var i = 0, len = ali.length; i <len; i ++) {
Ali [i] .OnClick = (function (i) {
Return function () {
alerta (i); // Clique no elemento <li> neste momento e o subscrito correspondente será exibido.
}
})(eu);
}
3. Coisas para observar
1. Vazamento de memória
Como o fechamento fará com que todas as variáveis da função sejam armazenadas na memória e o consumo de memória é muito grande, os fechamentos não podem ser abusados, caso contrário, causará problemas de desempenho da página da web.
por exemplo:
Copie o código da seguinte forma: function foo () {
var odiv = document.getElementById ('j_div');
var id = odiv.id;
odiv.OnClick = function () {
// alerta (odiv.id); Há uma referência circular aqui. O ODIV ainda está na memória depois que a página de versão baixa do IE estiver fechada. Portanto, os tipos primitivos de cache em vez de objetos o máximo possível.
alerta (id);
};
odiv = nulo;
}
2. Nomeação variável
Se a variável da função interna e o nome da variável da função externa forem iguais, a função interna não poderá mais apontar para a variável com o mesmo nome que a função externa.
por exemplo:
Copie o código da seguinte forma: function foo (num) {
Retornar função (num) {
console.log (num);
}
}
var f = novo foo (9);
f (); // indefinido
De fato, o uso acima é chamado de curry de função, que é a técnica de converter uma função que aceita vários parâmetros em uma função que aceita um único parâmetro (o primeiro parâmetro da função original) e retornando uma nova função que aceita os parâmetros restantes e retorna o resultado. Em essência, também utiliza recursos que os fechamentos podem ser armazenados em cache, como:
Copie o código da seguinte forma: var adder = function (num) {
Função de retorno (y) {
retornar num+y;
};
};
var inc = add (1);
var deC = add (-1);
// Inc, DEC agora é duas novas funções, que são usadas para passar no valor do parâmetro (+/) 1
Alert (Inc (99)); // 100
alerta (dez (101)); // 100
alerta (Adder (100) (2)); // 102
alerta (Adder (2) (100)); // 102
Por exemplo, no código fonte do SEAJS de Alibaba Yubo:
Copie o código da seguinte forma:/**
* Util -lang.js - o aprimoramento mínimo da linguagem
*/
função Ittype (tipo) {
Função de retorno (obj) {
return {} .tostring.call (obj) == "[objeto" + tipo + "]"
}
}
var isObject = iStype ("objeto");
var Isstring = ISTYPE ("String");
Espero que este artigo seja útil para a programação JavaScript de todos.