2010-06-28 6 views
2

J'ai du mal à comprendre ce code:Comment fonctionne 'this' dans une simple fonction jquery?

$.functionone = function(){ 
    function setOptions(newOptions){ 
     ... 
    } 
    this.setOptions = setOptions; 
} 

ce qui n'ajoutant 'ceci' dans 'this.setOptions' pour? Je comprends que c'est référencer la fonction setOptions, mais est-ce que l'ajout de 'this' ici fait que la fonction est appelée? Je sais que cela fait référence à l'élément DOM, mais quel est le point de l'avoir dans ce scénario particulier. Merci.

Répondre

3

Cela va simplement exposer la fonction de la portée de functionone, être une propriété de l'objet .

Par exemple:

$.functionone = function(){ 

    function setOptions(newOptions){ 
    //... 
    } 
    this.setOptions = setOptions; 
}; 

typeof $.setOptions; // "undefined", it doesn't exist 
$.functionone(); 
typeof $.setOptions; // "function" 

La valeur this est définie implicitement JavaScript lorsque vous effectuez un appel de fonction.

Si la fonction est liée en tant que propriété d'un objet (comme $.functionone), la valeur this fera référence à l'objet de base ($ dans votre exemple).

Ce n'est pas si utile de l'OMI, il est équivalent à:

$.functionone = function(){ 
    this.setOptions = function (newOptions) { 
    //... 
    }; 
}; 

Ce qui est à la fin, lorsque vous invoquez functionone, ce qui équivaut à:

$.setOptions = function (newOptions) { 
    //.. 
}; 

La différence est que la fonction n'est pas named, ce qui peut être utile pour le débogage.

Travailler avec la valeur this sur les plugins jQuery est plus habituel lorsque vous étendez l'objet jQuery.fn, dans ce cas, la valeur this fait référence à l'objet jQuery qui contient les éléments appariés, et non au constructeur jQuery lui-même.

1

Le code crée une fonction et l'ajoute en tant que propriété "setOptions" de l'élément DOM.

Vraisemblablement, une autre partie du code saura rechercher une fonction "setOptions" sur l'élément DOM et l'exécuter.

0

this fait référence à l'élément DOM particulier qui a appelé la fonction.

La ligne suivante:

this.setOptions = setOptions; 

signifie que la fonction "setOptions" est affecté à la propriété "setOptions" de l'élément DOM.