Accéder à la portée avec "this" lors de l'utilisation de $ .fn. et $ ('# test'). demo();

Question

J'espère que ce n'est pas une question très stupide, mais je suis un peu confus concernant la façon dont jQuery traite la propriété this lors de l'utilisation de sa fonction prototype.

Lors du passage d'un argument d'une fonction telle que $.fn.demo, la valeur de this contiendra l'objet DOM passé dans l'argument, dans ce cas, l'objet correspondant au sélecteur #test:

$('#test').demo({test: 'test1'}); 

est-il possible de accéder à la portée de la fonction lors de l'utilisation de la fonction prototype jQuery avec un argument? Mon objectif est de définir des variables de portée dynamique, quelque chose que je devrait réaliser en utilisant this['demo'] = 'aaa'

Où vont-ils sont stockés sinon dans this?

Code online

$.fn.demo = function(options){ 
    var helloText = "hello"; 

    // keeping central set of classnames and selectors 
    var classes = { 
     wrapper: 'wrapper', 
     pepe: 'demo' 
    }; 

    //this has the #test DOM object value, not the function scope 
    console.log(this); 

    //trying to assign the object keys to the global scope 
    for (var key in classes) { 
     this[key] = classes[key]; 
    } 

    console.log(helloText); 

    //fails to print the value of "pepe", it doens't exist in the scope 
    console.log(pepe); 
}; 

$('#test').demo({test: 'test1'}); 

Answer 1

Je ne suis pas sûr que votre objectif, si elle est cette variable simple ajout dans « ce » champ alors lorsque vous l'utilisez, vous devez utiliser « ce » comme déjà dit par @MinusFour ou Vous voulez ajouter une variable dans la portée de la fonction, puis utiliser eval, Vous pouvez voir les différences ci-dessous js Code;

$.fn.demo = function(options){ 
    var helloText = "hello"; 

    // keeping central set of classnames and selectors 
    var classes = { 
     wrapper: 'wrapper', 
     pepe: 'demo' 
    }; 

    //this has the #test DOM object value, not the function scope 
    console.log(this); 

    //trying to assign the object keys to the global scope 
    for (var key in classes) { 
     this[key] = classes[key]; 
     eval("var " + key+"='"+classes[key]+"'"); 
    } 
    console.log(this); 

    console.log(helloText); 

    //fails to print the value of "pepe", it doens't exist in the scope 
    console.log(this.pepe); 
    console.log(pepe); 
}; 

$('#test').demo({test: 'test1'}); 

Answer 2

L'objet global pour le navigateur Javascript est l'objet window. Ainsi, vous pouvez modifier une partie de votre code comme ceci et cela fonctionnera:

for (var key in classes) { 
    window[key] = classes[key]; 
} 

Cependant, les choses d'écriture dans l'objet de la fenêtre est généralement une mauvaise idée, car tout peut écrire et lire à partir de là. Une façon d'éviter cela est:

(function() { 
 
    var myEncapsulatedValues = {}; 
 

 
    var myJQueryFunction = function() { 
 
    var classes = { 
 
     wrapper: 'Yay it works!!', 
 
     pepe: 'demo' 
 
    }; 
 
    
 
    for (var prop in classes) { 
 
     myEncapsulatedValues[prop] = classes[prop]; 
 
    } 
 
    }; 
 

 
    myJQueryFunction(); 
 

 
    console.log(myEncapsulatedValues['wrapper']); 
 

 
})(); 
 

 
// But I cant access encapsulated values here 
 
console.log(typeof myEncapsulatedValues);

Ceci est un moyen de base pour simuler l'encapsulation en Javascript, et il est appelé Ia vie (expression Fonction Immédiatement Invoqué).

Il y a beaucoup de choses à apprendre si vous êtes novice en Javascript. Portée, Contexte, Fermeture, Levage, Modules. Même connaître leurs noms vous rendrait plus compétent pour affronter les difficultés que vous allez rencontrer. Vous pouvez obtenir l'idée de base here.