Aide « » CONSTITUE me confondre en JavaScript

Question

Travailler avec le JavaScript une de la chose déroutante est lors de l'utilisation ce

var x = { 
    ele : 'test', 
    init : function(){ 
    alert(this.ele); 
    } 
} 

Cependant lorsqu'ils traitent avec de multiples objets et le contexte particulier des événements de this changements et devient déroutant de garder la trace/comprendre.

Donc, si quelqu'un a de meilleurs intrants/lignes directrices/pensées/meilleures pratiques, s'il vous plaît partager. Aussi, je voudrais savoir si l'utilisation this donne un avantage (de performance) ou quoi?

Answer 1

Ce n'est pas sur la performance, il est sur l'accès à une propriété d'une instance spécifique d'un objet: -

x.init() 

n'affichaient « test » si vous ne l'aviez pas utiliser this dans la fonction.

efficacement la ligne ci-dessus est le même que: -

x.init.call(x); 

la première paramater dans l'utilisation de call est affecté à this lorsque la fonction est exécutée.

Considérons maintenant: -

var fn = x.init; //Note no() so the function itself is assigned to the variable fn 
fn(); 

Maintenant vous avez rien dans l'alerte. Parce que ce qui précède est efficace: -

fn.call(window); 

Dans navigateur l'objet Javascript organisé window est synonyme de l'objet global. Lorsqu'une fonction est appelée "à l'état brut", this renvoie par défaut à l'objet global.

L'erreur classique fait quelque chose comme ceci: -

var x = { 
    ele: 'test'; 
    init: function(elem) { 
     elem.onclick = function() { alert(this.ele); } 
    } 
} 
x.init(document.getElementById('myButton')); 

Toutefois, cela ne fonctionne pas parce que la fonction attachée à l'événement onclick est appelé par le navigateur en utilisant le code comme: -

onclick.call(theDOMElement) 

Par conséquent lorsque la fonction est en cours d'exécution this n'est pas ce que vous pensez qu'il est.

Ma solution habituelle à cette situation est: -

var x = { 
    ele: 'test'; 
    init: function(elem) { 
     var self = this; 
     elem.onclick = function() { alert(self.ele); } 
     elem = null; 
    } 
} 
x.init(document.getElementById('myButton')); 

Notez la elem = null est fuite de mémoire IE travail autour.

Answer 2

C'est très déroutant. Cela dépend de la façon dont vous appelez la fonction. Doug Crockford a fait un bon article dans son livre Javascript, the Good Parts. L'essentiel de cela est dans this excellent answer à une question autrement mal formulée.

Et non, ce n'est pas une question de performance.

Answer 3

Un article bon et éclairant sur le mot-clé this est this (sans jeu de mots). L'article peut clarifier les choses pour vous, je sais que cela a été fait pour moi.

La règle essentielle est que le mot-clé this dans une fonction se réfère toujours au propriétaire de la fonction, et la clé pour comprendre les conséquences est la compréhension lorsque les fonctions sont visées et quand ils sont copiés. Voir l'article ci-dessus pour des exemples.

Answer 4

utilisation

var me = this; 

en dehors de la

function(){ 

alors vous pouvez me référer à l'intérieur de la fonction()

Answer 5

Pour moi, il m'a beaucoup aidé la ligne directrice suivante: chaque fois que vous voyez this pensez owner. L'objet qui possède le nom de variable auquel la fonction est affectée deviendra le this. Si vous ne pouvez pas comprendre à qui appartient, alors this sera fenêtre.