Si vous avez souvent regarder les films de HBO , puis le titre de ce post JavaScript vous ?tre familier : Oui , c'est vrai , je veux emprunter ce slogan de HBO pour d?crire le contenu de ce post : il vous fournira les concepts de base JavaScript , et vous serez en mesure d' acc?der , de comprendre la programmation web langage JavaScript facilement et rapidement
Exemple, les codes JavaScript pour essayer ? l'heure actuelle , cet article JavaScript tutorial nous 5 pi?ces et je mettrai ? jour s'il ya nouveau chapitre , en attendant , vous pouvez passer par :

? D?clarations de fonctions JavaScript et des expressions de fonction JavaScript - Concepts de base

? JavaScript Prototype : Quelques concepts de base

? 5 Chef Concepts H?ritage JavaScript

? Concepts simples sur les types et les objets en JavaScript POO

? Top 10 Meilleurs livres JavaScript que les d?butants devraient apprendre

• Demo
• Agrandir
• Recharger
• New window

Part 5: Javascript Closures

Closures are a tricky concept in Javascript. They seem deceptively simple but there are a lot of intricacies that can trip up developers. To start understanding closures, we need to start with scope – in Javascript, a function has access to it’s parent’s context, grandparent’s  context, etc. up the scope chain. To see this try the code,

var X = "window";

function outermost() {
    var Y = "outermost";

    function inner() {
        // Knows about the parent function's Y
        alert(Y);

        function innermost() {
            // Knows about the grandparent function's Y
            alert(Y);
            // Knows about the greatgrandparent's X
            alert(X);
        }
        innermost();
    }
    inner();
}
outermost();

This seems simple enough, even expected. Now here’s the trick, let’s return some function pointers,

var X = "window";

function outermost() {
    var Y = "outermost";

    function inner() {
        // Knows about the parent function's Y
        alert(Y);

        function innermost() {
            // Knows about the grandparent function's Y
            alert(Y);
            // Knows about the greatgrandparent's X
            alert(X);
        }

        // 'inner' returns a reference to the 'innermost' function
        return innermost;
    }

    // 'outermost' returns a reference to the 'inner' function
    return inner;
}

Now let’s call these functions,

// Get the reference to the 'inner' function
var inr = outermost();

// Call the 'inner' function
inr();  // alerts 'outermost'

// Get the reference to the innermost function
var inmost = inr(); // alerts 'outermost'

// Call the 'innermost' function
inmost();   // alerts 'outermost' and 'window'

As you can see, when we call the ‘innermost’ function, using the reference returned by the call to ‘inner’, it still has access to the X and Y values as they were in scope when the ‘innermost’ function was defined. This is Javascript’s closure – capturing information at the point of definition, so that the information can be used at the point of execution. Also the variables are not copies – they are references.

A very common problem that occurs is in the unintended creation of closure,

for (var i = 0; i < 5; i++) {
    // This creates a closure!
    elements[i].onclick = function() { alert(i); };
}

Now clicking on any element will alert ‘4’, why? Because all of the functions we created have a reference (not a copy) to the outer var i, probably not the effect you want. To fix this,

for (var i = 0; i < 5; i++) {
    // Don't create a function - no closure
    elements[i].onclick = Handle(i);
}

function Handle(i) {
    return function() { alert(i); };
}

You can read up more about closures here.

• Code
• Imprimer

• Commentaire (3)
• Écrire

par mua sam vui, 28/05/2011 09:05 PM
Javascript is ... Réponse

is so complicated ! learning it make me exhausted

par Cao Phong, 28/05/2011 10:05 PM
Réponse

but I think this post is very simple & easy to learn, let try it NOW

par mua sam vui, 29/05/2011 08:05 PM
Jquery instead of javascript ... @ Cao Phong Réponse

the best thing i can do now is start with Jquery ! all the library is so easy to do . ! Just look through and U wl think like me !

For example : Javascript:
document.style.color = "red"; --> so complicated to remember

Jquery:

$(div).css ("color","red"); ->is that okey for coding ????

par Avant-première

Annuler réponse

Écrivez votre commentaire

Commentaires du client sera publié avant previwed
Donnez votre email réel pour obtenir des réponses notification ou commentaire sera supprimé

Votre nom *
Votre e-mail^g *
Votre site

Comment's Titre

J'assure à 100% je suis humain réel
Je le répète, je ne suis pas bot

• Sent (0)
• Nouveau