1. Funções anônimas
As funções são o objeto mais flexível no JavaScript. Aqui apenas explicamos o objetivo de suas funções anônimas. Funções anônimas: são funções sem nomes de funções.
1.1 Definição de uma função. Primeiro, vamos apresentar brevemente a definição de uma função. Pode ser dividido aproximadamente em três maneiras.
O primeiro: este também é o mais comum
A cópia do código é a seguinte:
função dupla (x) {
retornar 2 * x;
}
O segundo método: este método usa o construtor da função, que usa a lista de parâmetros e o corpo da função como strings, que é muito inconveniente e não é recomendado.
A cópia do código é a seguinte:
var duplo = nova função ('x', 'retorna 2 * x;');
O terceiro tipo:
var duplo = função (x) {return 2* x; }
Observe que a função à direita de "=" é uma função anônima. Após criar a função, a função é atribuída ao quadrado variável.
1.2 Criação de funções anônimas
O primeiro método: defina a função quadrada mencionada acima, que também é um dos métodos mais usados.
O segundo método:
A cópia do código é a seguinte:
(função (x, y) {
alerta (x + y);
})(vinte e três);
Aqui, uma função anônima é criada (no primeiro suporte), e o segundo suporte é usado para chamar a função anônima e passar nos parâmetros.
2. Fechamento
A palavra em inglês para fechamento é o fechamento, que é uma parte muito importante do JavaScript, porque o uso de fechamentos pode reduzir bastante a quantidade de nosso código, tornar nosso código mais claro etc. Em resumo, as funções são muito poderosas.
O significado do fechamento: para ser franco, os fechamentos são funções de nidificação. A função interna pode usar todas as variáveis da função externa, mesmo que a função externa tenha sido executada (isso envolve a cadeia de escopo JavaScript).
Exemplo 1
A cópia do código é a seguinte:
função checkClosure () {
var str = 'Rain-man';
setTimeout (
function () {alert (str); } // Esta é uma função anônima
, 2000);
}
checkclosure ();
Este exemplo parece muito simples. Após uma análise cuidadosa de seu processo de execução, ainda existem muitos pontos de conhecimento: a execução da função de clima de seleção é instantânea (talvez tenha sido necessária apenas 0,00001 milissegundos), uma variável STR é criada no corpo da função de clima de seleção. Após a execução do clara, o STR não é liberado. Isso ocorre porque a função anônima no setTimeout tem uma referência ao STR. O STR é lançado apenas após 2 segundos.
Exemplo 2, otimize o código
A cópia do código é a seguinte:
função fortimeout (x, y) {
alerta (x + y);
}
Atraso na função (x, y, tempo) {
setTimeout ('Fortimeout (' + x + ',' + y + ')', tempo);
}
/**
* A função de atraso acima é muito difícil de ler e não é fácil de escrever, mas se você usar o fechamento, o código pode ser mais claro
* Atraso na função (x, y, tempo) {
* setTimeout (
* function () {
* Fortimeout (x, y)
*}
* , tempo);
*}
*/
3. Dê um exemplo
O maior uso das funções anônimas é criar fechamentos (um dos recursos do idioma JavaScript) e também criar espaços para nome para reduzir o uso de variáveis globais.
Exemplo 3:
A cópia do código é a seguinte:
var oevent = {};
(função(){
var addEvent = function () { / *A implementação do código é omitida * /};
função removervent () {}
oEvent.Addevent = addEvent;
oEvent.RemoveEvent = RemoverEvent;
}) ();
Neste código, as funções AddEvent e RemofEvent são variáveis locais, mas podemos usá -lo através da variável global OEvent, o que reduz bastante o uso de variáveis globais e aprimora a segurança da página da web. Queremos usar este código: oevent.addevent (document.getElementById ('caixa'), 'clique', function () {});
Exemplo 4:
A cópia do código é a seguinte:
var Rainman = (função (x, y) {
retornar x + y;
})(vinte e três);
/**
* Também pode ser escrito na forma a seguir, porque o primeiro suporte só nos ajuda a ler, mas o formato de escrita a seguir não é recomendado.
* var Rainman = função (x, y) {
* retornar x + y;
* }(vinte e três);
*/
Aqui, criamos um Rainman variável e o inicializamos para 5 chamando a função anônima diretamente. Esse truque às vezes é muito prático.
Exemplo 5:
A cópia do código é a seguinte:
var outer = nulo;
(função(){
var one = 1;
função interna () {
um += 1;
alerta (um);
}
externo = interno;
}) ();
exterior(); // 2
exterior(); // 3
exterior(); // 4
A variável nesse código é uma variável local (porque é definida em uma função), portanto o externo é inacessível. Mas aqui criamos uma função interna, que pode acessar a variável; e também referente a variável global externa para o interior; portanto, três chamadas para a externa exibirão o resultado incremental.
4. Preste atenção
4.1 O fechamento permite que as funções da camada interna se referam a variáveis nas funções dos pais, mas a variável é o valor final
Exemplo 6:
A cópia do código é a seguinte:
/**
* <Body>
* <ul>
* <li> Um </li>
* <li> Dois </li>
* <li> Três </li>
* <li> Um </li>
* </ul>
*/
var lists = document.getElementsByTagName ('li');
for (var i = 0, len = lists.length; i <len; i ++) {
listas [i] .onMouseOver = function () {
alerta (i);
};
}
Você descobrirá que quando o mouse se mover por cada <li & rt; Elemento, ele sempre aparece 4 em vez do subscrito do elemento que esperamos. Por que isso? As precauções foram discutidas (valor final). Obviamente, essa explicação é muito simples. Quando o evento MouseOver chama a função de escuta, primeiro procure se eu é definido dentro da função anônima (function () {alert (i);}), e o resultado é que ele não está definido; Portanto, procurará para cima, e o resultado da pesquisa é que ele foi definido e o valor de I é 4 (o valor de I após o loop); Então, no final, cada pop-up é 4.
Solução 1:
A cópia do código é a seguinte:
var lists = document.getElementsByTagName ('li');
for (var i = 0, len = lists.length; i <len; i ++) {
(function (index) {
listas [index] .onMouseOver = function () {
alerta (índice);
};
})(eu);
}
Solução 2:
A cópia do código é a seguinte:
var lists = document.getElementsByTagName ('li');
for (var i = 0, len = lists.length; i <len; i ++) {
Listas [i]. $$ Índice = i; // Registre o índice vinculando o atributo de índice $$ no elemento DOM
listas [i] .onMouseOver = function () {
alerta (este. $$ Índice);
};
}
Solução três:
A cópia do código é a seguinte:
Função EventListener (Lista, Index) {
list.onMouseOver = function () {
alerta (índice);
};
}
var lists = document.getElementsByTagName ('li');
for (var i = 0, len = lists.length; i <len; i ++) {
EventListener (listas [i], i);
}
4.2 vazamento de memória
O uso de fechamentos é muito fácil de causar o vazamento de memória do navegador. Em casos graves, o navegador estará morto. Se você estiver interessado, consulte: http://www.vevb.com/article/57404.htm