Définition de la scope de la fonction anonyme ‘this’ dans l’utilitaire jQuery / les méthodes ajax

Comme indiqué dans cet article de blog, vous pouvez définir la scope de this dans une fonction anonyme en Javascript.

Existe-t-il un moyen plus élégant de définir this dans l’appel de fonction anonyme au success de la demande AJAX (c’est-à-dire de ne pas l’utiliser)?

Par exemple:

 var Foo = { bar: function(id) { var that = this; $.ajax({ url: "www.somedomain.com/ajax_handler", success: function(data) { that._updateDiv(id, data); } }); }, _updateDiv: function(id, data) { $(id).innerHTML = data; } }; var foo = new Foo; foo.bar('mydiv');

Utilisation de call mais doit quand même nommer la scope de l’object parent.

 success: function(data) { (function() { this._updateDiv(id, data); }).call(that); }

Dans jQuery 1.4, vous avez la méthode $.proxy , vous pouvez simplement écrire:

  //... bar: function(id) { $.ajax({ url: "someurl", success: $.proxy(this, '_updateDiv') }); }, //...

$.proxy prend un object, qui sera utilisé comme valeur this et peut prendre une chaîne (un membre de cet object) ou une fonction, et il retournera une nouvelle fonction qui aura toujours une scope particulière.

Une autre alternative est la fonction bind , qui fait désormais partie de la norme ECMAScript Fifth Edition:

 //... bar: function(id) { $.ajax({ url: "someurl", success: function(data) { this._updateDiv(id, data); }.bind(this) }); }, //...

Cette fonction sera bientôt disponible en mode natif, lorsque les moteurs JavaScript implémenteront pleinement le standard ES5. Pour le moment, vous pouvez utiliser l’implémentation longue suivante de 8 lignes:

 // The .bind method from Prototype.js if (!Function.prototype.bind) { // check if native implementation available Function.prototype.bind = function(){ var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); return function(){ return fn.apply(object, args.concat(Array.prototype.slice.call(arguments))); }; }; }

La fonction $.ajax() fournit un moyen concis de le faire déjà sous la forme du paramètre context :

 $.ajax({ url: "www.somedomain.com/ajax_handler", context: this, success: function(data) { this._updateDiv(id, data); } });

Bien que les techniques décrites par CMS soient plus appropriées pour une utilisation générale.