En Javascript, comment puis-je lier des arguments à une fonction sans lier le thisparamètre?

Par exemple:

//Example function.
var c = function(a, b, c, callback) {};

//Bind values 1, 2, and 3 to a, b, and c, leave callback unbound.
var b = c.bind(null, 1, 2, 3); //How can I do this without binding scope?

Comment puis-je éviter l'effet secondaire d'avoir à lier également la portée de la fonction (par exemple, setting this= null)?

Éditer:

Désolé pour la confusion. Je veux lier des arguments, puis pouvoir appeler la fonction liée plus tard et la faire se comporter exactement comme si j'appelais la fonction d'origine et lui passais les arguments liés:

var x = 'outside object';

var obj = {
  x: 'inside object',
  c: function(a, b, c, callback) {
    console.log(this.x);
  }
};

var b = obj.c.bind(null, 1, 2, 3);

//These should both have exact same output.
obj.c(1, 2, 3, function(){});
b(function(){});

//The following works, but I was hoping there was a better way:
var b = obj.c.bind(obj, 1, 2, 3); //Anyway to make it work without typing obj twice?

Je suis encore nouveau dans ce domaine, désolé pour la confusion.

Merci!

Vous pouvez le faire, mais il vaut mieux éviter de le considérer comme "contraignant" car c'est le terme utilisé pour définir la valeur "this". Pensez-y peut-être à "envelopper" les arguments dans une fonction?

Ce que vous faites est de créer une fonction qui a les arguments souhaités intégrés via des fermetures:

var withWrappedArguments = function(arg1, arg2)
    {
        return function() { ... do your stuff with arg1 and arg2 ... };
    }(actualArg1Value, actualArg2Value);

J'espère que j'ai la syntaxe ici. Ce qu'il fait est de créer une fonction appelée withWrappedArguments () (pour être pédant, c'est une fonction anonyme assignée à la variable) que vous pouvez appeler à tout moment n'importe où et agira toujours avec actualArg1Value et actualArg2Value, et tout ce que vous voulez mettre dans Là. Vous pouvez également lui faire accepter d'autres arguments au moment de l'appel si vous le souhaitez. Le secret est les parenthèses après l'accolade de fermeture finale. Celles-ci provoquent l'exécution immédiate de la fonction externe, avec les valeurs passées, et la génération de la fonction interne qui peut être appelée ultérieurement. Les valeurs passées sont ensuite figées au moment où la fonction est générée.

C'est effectivement ce que fait bind, mais de cette façon, il est explicite que les arguments encapsulés sont simplement des fermetures sur des variables locales, et il n'est pas nécessaire de changer le comportement de cela.

Dans ES6, cela se fait facilement en utilisant les paramètres de repos en conjonction avec l' opérateur d'étalement .

Nous pouvons donc définir une fonction bindArgsqui fonctionne comme bind, sauf que seuls les arguments sont liés, mais pas le contexte ( this).

Function.prototype.bindArgs =
    function (...boundArgs)
    {
        const targetFunction = this;
        return function (...args) { return targetFunction.call(this, ...boundArgs, ...args); };
    };

Ensuite, pour une fonction fooet un objet spécifiés obj, l'instruction

return foo.call(obj, 1, 2, 3, 4);

est équivalent à

let bar = foo.bindArgs(1, 2);
return bar.call(obj, 3, 4);

où seuls les premier et deuxième arguments sont liés bar, tandis que le contexte objspécifié dans l'appel est utilisé et des arguments supplémentaires sont ajoutés après les arguments liés. La valeur de retour est simplement transmise.

Dans la bindméthode native , la thisvaleur de la fonction result est perdue. Cependant, vous pouvez facilement recoder le shim commun pour ne pas utiliser d'argument pour le contexte:

Function.prototype.arg = function() {
    if (typeof this !== "function")
        throw new TypeError("Function.prototype.arg needs to be called on a function");
    var slice = Array.prototype.slice,
        args = slice.call(arguments), 
        fn = this, 
        partial = function() {
            return fn.apply(this, args.concat(slice.call(arguments)));
//                          ^^^^
        };
    partial.prototype = Object.create(this.prototype);
    return partial;
};

Encore une petite implémentation juste pour le plaisir:

function bindWithoutThis(cb) {
    var bindArgs = Array.prototype.slice.call(arguments, 1);

    return function () {
        var internalArgs = Array.prototype.slice.call(arguments, 0);
        var args = Array.prototype.concat(bindArgs, internalArgs);
        return cb.apply(this, args);
    };
}

Comment utiliser:

function onWriteEnd(evt) {}
var myPersonalWriteEnd = bindWithoutThis(onWriteEnd, "some", "data");

var b = function() {
    return c(1,2,3);
};

Il est un peu difficile de dire exactement ce que vous voulez faire en fin de compte car l'exemple est en quelque sorte arbitraire, mais vous voudrez peut-être vous pencher sur les partiels (ou currying): http://jsbin.com/ifoqoj/1/edit

Function.prototype.partial = function(){
  var fn = this, args = Array.prototype.slice.call(arguments);
  return function(){
    var arg = 0;
    for ( var i = 0; i < args.length && arg < arguments.length; i++ )
      if ( args[i] === undefined )
        args[i] = arguments[arg++];
    return fn.apply(this, args);
  };
};

var c = function(a, b, c, callback) {
  console.log( a, b, c, callback )
};

var b = c.partial(1, 2, 3, undefined);

b(function(){})

Lien vers l'article de John Resig: http://ejohn.org/blog/partial-functions-in-javascript/

Peut-être voulez-vous lier la référence de ceci en dernier mais votre code: -

var c = function(a, b, c, callback) {};
var b = c.bind(null, 1, 2, 3); 

Déjà appliqué la liaison par exemple ceci et plus tard, vous ne pouvez pas le changer. Ce que je suggérerai d'utiliser la référence également comme paramètre comme celui-ci: -

var c = function(a, b, c, callback, ref) {  
    var self = this ? this : ref; 
    // Now you can use self just like this in your code 
};
var b = c.bind(null, 1, 2, 3),
    newRef = this, // or ref whatever you want to apply inside function c()
    d = c.bind(callback, newRef);

Utilisez un protagonist!

var geoOpts = {...};

function geoSuccess(user){  // protagonizes for 'user'
  return function Success(pos){
    if(!pos || !pos.coords || !pos.coords.latitude || !pos.coords.longitude){ throw new Error('Geolocation Error: insufficient data.'); }

    var data = {pos.coords: pos.coords, ...};

    // now we have a callback we can turn into an object. implementation can use 'this' inside callback
    if(user){
      user.prototype = data;
      user.prototype.watch = watchUser;
      thus.User = (new user(data));
      console.log('thus.User', thus, thus.User);
    }
  }
}

function geoError(errorCallback){  // protagonizes for 'errorCallback'
  return function(err){
    console.log('@DECLINED', err);
    errorCallback && errorCallback(err);
  }
}

function getUserPos(user, error, opts){
  nav.geo.getPos(geoSuccess(user), geoError(error), opts || geoOpts);
}

Fondamentalement, la fonction à laquelle vous voulez passer des paramètres devient un proxy que vous pouvez appeler pour passer une variable, et il renvoie la fonction que vous voulez réellement faire.

J'espère que cela t'aides!

Un utilisateur anonyme a publié ces informations supplémentaires:

S'appuyant sur ce qui a déjà été fourni dans cet article - la solution la plus élégante que j'ai vue est de Curry vos arguments et votre contexte:

function Class(a, b, c, d){
    console.log('@Class #this', this, a, b, c, d);
}

function Context(name){
    console.log('@Context', this, name);
    this.name = name;
}

var context1 = new Context('One');
var context2 = new Context('Two');

function curryArguments(fn) {
    var args = Array.prototype.slice.call(arguments, 1);
    return function bindContext() {
      var additional = Array.prototype.slice.call(arguments, 0);
      return fn.apply(this, args.concat(additional));
    };
}

var bindContext = curryArguments(Class, 'A', 'B');

bindContext.apply(context1, ['C', 'D']);
bindContext.apply(context2, ['Y', 'Z']);

Eh bien pour l'exemple que vous avez donné, cela fera l'affaire

var b= function(callback){
        return obj.c(1,2,3, callback);
};

Si vous souhaitez garantir la clôture des paramètres:

var b= (function(p1,p2,p3, obj){
        var c=obj.c;
        return function(callback){
                return c.call(obj,p1,p2,p3, callback);
        }
})(1,2,3,obj)

Mais si c'est le cas, vous devez simplement vous en tenir à votre solution:

var b = obj.c.bind(obj, 1, 2, 3);

C'est la meilleure façon.

Aussi simple que ça?

var b = (cb) => obj.c(1,2,3, cb)
b(function(){}) // insidde object

Solution plus générale:

function original(a, b, c) { console.log(a, b, c) }
let tied = (...args) => original(1, 2, ...args)

original(1,2,3) // 1 2 3
tied(5,6,7) // 1 2 5

En utilisant LoDash, vous pouvez utiliser la _.partialfonction.

const f  = function (a, b, c, callback) {}

const pf = _.partial(f, 1, 2, 3)  // f has first 3 arguments bound.

pf(function () {})                // callback.

Pourquoi ne pas utiliser un wrapper autour de la fonction pour enregistrer ceci en tant que mythis?

function mythis() {
  this.name = "mythis";
  mythis = this;
  function c(a, b) {
    this.name = "original";
    alert('a=' + a + ' b =' + b + 'this = ' + this.name + ' mythis = ' + mythis.name);
    return "ok";
  }    
  return {
    c: c
  }
};

var retval = mythis().c(0, 1);

jQuery 1.9 a apporté exactement cette fonctionnalité avec la fonction proxy.

À partir de jQuery 1.9, lorsque le contexte est nul ou non défini, la fonction mandatée sera appelée avec le même objet que celui avec lequel le proxy a été appelé. Cela permet d'utiliser $ .proxy () pour appliquer partiellement les arguments d'une fonction sans changer le contexte.

Exemple:

$.proxy(this.myFunction, 
        undefined /* leaving the context empty */, 
        [precededArg1, precededArg2]);

Cas d'utilisation de Jquery:

au lieu:

for(var i = 0;i<3;i++){
    $('<input>').appendTo('body').click(function(i){
        $(this).val(i); // wont work, because 'this' becomes 'i'
    }.bind(i));
}

utilisez ceci:

for(var i = 0;i<3;i++){
    $('<input>').appendTo('body').click(function(e){
        var i = this;
        $(e.originalEvent.target).val(i);
    }.bind(i));
}