"This" inside object

J'essaie de calculer une hauteur proportionnelle (tout en excluant un élément de hauteur statique) d'une largeur passée par une requête (par défaut à 560).

Cependant, wF.h à NaN . Si je remplace this.w avec 560, cela fonctionne, mais pas lorsque vous essayez de faire référence à la propriété w de wF .

 var wF = { w : 560, h : (312 - 42) / (560 / this.w) + 42 }; 

Ce qui donne?

Je refuse d'utiliser deux vars simples successivement, parce que j'essaie d'obtenir un code sympa de JS.

Mettre à jour:

Merci à tous ceux qui ont aidé à expliquer et à résoudre mon problème. Je suppose que je devrais m'y habituer. Je vais mettre l'objet par étapes pour continuer avec le projet, même s'il me dérange encore légèrement;). J'ai trouvé et lu un bel article sur le sujet pour toute personne qui se heurte à des problèmes similaires: http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/

 // Your code var wF = { w : 560, h : (312 - 42) / (560 / this.w) + 42 }; 

this n'est pas ce que vous pensez être

Javascript n'a pas de portée de bloc, uniquement la portée de la fonction: this dans la définition de wF ne fait pas référence à wF .

(Et donc, this.w , quel this soit, est probablement undefined . La division par des rendements undefined NaN ).

Alors, vous pouvez essayer:

 // Let's not use `this` var wF = { w : 560, h : (312 - 42) / (560 / wF.w) + 42 }; 

Vous n'avez pas encore fini de définir l'objet

Cependant, vous définissez toujours l'objet dans lequel vous essayez d'utiliser wF.w : il n'est pas encore prêt pour cela .


Solution

Donc, oui, vous devrez utiliser deux variables … ou configurer l'objet par étapes:

 // We can't even use `wF`; split up the property definitions var wF = {}; wF.w = 560; wF.h = (312 - 42) / (560 / wF.w) + 42; 

Bonjour, redéfinissez votre deuxième propriété en tant qu'objectif fonctionnel et cela fonctionnera. Je pense qu'il est possible d'accéder au contexte de l'objet appelant à partir d'une fonction

 var wF = { w : 560, h : function() { return (312 - 42) / (560 / this.w) + 42; } }; alert(wF.h()) 

Ce mot this clé se réfère au contexte d'appel, pas à un objet.

Vous devez le faire en deux étapes comme suit:

 var wF = { w: 560 }; wF.h = (312 - 42) / (560 / wF.w) + 42; 

Vous n'avez pas besoin d'envelopper {…} dans un Objet (). C'est déjà un objet littéral.

this ne fonctionne pas à l'intérieur de l'objet littéral, il indiquera l'objet dans lequel la fonction est en cours:

 function fn() { var wF = { w : 560, h : (312 - 42) / (560 / this.w) + 42 }; } fn(); 

Entraînera le point sur l'objet window .

EDIT: Le code précédent n'était pas destiné à être une réponse, juste une démonstration de ce que c'est. Une autre possibilité serait d'utiliser une fonction qui prend la largeur comme argument:

 function getObject(width) { width = width || 560; //Default value to 560 return { w: width, h : (312 - 42) / (560 / width) + 42 }; } var wF = getObject(); //To get the default value, or specify a width otherwise. 

Lorsque vous l'utilisez dans une déclaration d'objet JSON, il indique l'instance actuelle.

Vous pouvez essayer ce code dans votre console pour mieux le comprendre:

 Object({ w : 560, h : (312 - 42) / (560 / function(e){console.log(e);return ew;}(this)) + 42 });