Compréhention du Polyfill de bind

Version imprimable

21/10/2014, 15h22
unoomad

Compréhention du Polyfill de bind
Voici un petit polyfill de la fonction bind.
Le "this" de la fonction fait référence à l'objet qui appelle la fonction bind non ? Alors pourquoi à la 5 eme ligne nous avons fn.apply(scope); ? fn et l'objet et non une fonction non ? Merci de m'éclairé sur ce point.
Code:

1 2 3 4 5 6 7 Function.prototype.bind = function (scope) { var fn = this; return function () { return fn.apply(scope); }; }

La fonction bind est une fonction de l'objet... Function ! Donc fn est un objet de type Function. Eh oui, en JavaScript, les fonctions sont des objets.

Note: ce polyfill ne respecte pas strictement la fonction native Function.prototype.bind. Voilà un polyfill plus "béton" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
if (!Function.prototype.bind) {  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError("Function.prototype.bind - 
           what is trying to be bound is not callable");
    }
 
    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {
          return fToBind.apply(this instanceof fNOP && oThis
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };
 
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
 
    return fBound;
  };
}

Merci donc je doit prendre les fonctions comme étant des objets à part entière alors ?

Petit exemple rapide pour savoir si j'ai bien compris :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 Function.prototype.appel = function(){ console.log(this); } var foo = { a : function(){ console.log(this); } }; foo.a() // this = foo foo.a.appel() // this = a ?
Pardon pour l'erreur sur le titre du topic.

21/10/2014, 19h54
sekaijin

non dans le dernier cas c'est appel

Code:

foo.a.appel() // this = appel

car appel est une fonction et que tu agit sur le prototype des fonction
A+JYT
21/10/2014, 20h18
unoomad

Je me suis trompé alors comment avoir la fonction a alors ?

Désolé pour le double post mais j'ai fait de petite modification les voici :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 Function.prototype.appel = function(){ console.log(this+"Fonction appel"); } var foo = { a : function(){ console.log(this+"Fonction A"); } }; foo.a() // "[object Object]Fonction A " <- ce qui est retourné foo.a.appel() // "function (){console.log(this+"Fonction A");}Fonction appel " <- ce qui est retourné
Pourquoi dans le second cas c'est le contenu de la fonction "a" qui est retourné ?

21/10/2014, 21h46
SylvainPV

Dans le premier cas, a est une fonction de l'objet foo donc this correspond à foo, de type Object. Le cast en String d'un Object est "[object Object]".

Dans le second cas, appel est une fonction de l'objet a donc this correspond à a, de type Function. Le cast d'une fonction en String correspond à la déclaration de cette fonction.

Les objets sont cast en String à cause de l'opérateur de concaténation "+". Essaie avec console.log("Fonction appel", this);, tu verras mieux.

@sekaijin: le fait que la fonction soit dans le prototype ou l'objet lui même ne change pas l'attribution du contexte à l'appel

Code:

String.prototype.test = function(){ return ">>> "+this; }; "toto".test(); // ">>> toto"

Oui merci j'obtient ceci :
Code:

1 2 3 4 5 6 7 8 foo.a() Object {a: function} "Fonction A" VM3708:8 undefined foo.a.appel() function (){ console.log(this,"Fonction A"); } "Fonction appel" VM3708:3 undefined
Mais le this de foo.a.appel() n'est pas la fonction 'a' je ne comprend pas, pourquoi ?

Ben si ça l'est.

Code:

1
2
3
4
5
6
7
8
9
Function.prototype.appel = function(){      console.log("J'appelle la fonction appel");
     console.log(this);
}
 
var foo = {
  a : function(){
     console.log("Je suis la fonction A");
  }
};

Code:

1
2
3
4
5
foo.a.appel();
> J'appelle la fonction appel VM749:3
> function (){
     console.log("Je suis la fonction A");
  }

21/10/2014, 23h33
unoomad

Ahh c'etait donc bien ça car sekaijin m'as répondu que ce n’était pas 'a' mais plutôt 'appel', j'ai peut-être mal expliqué mon problème donc c'est bien la fonction 'a' que le 'this' de la fonction 'appel' fait référence, merci de t'as réponse SylvainPV sa faisait plusieurs temps que je cherchais à comprendre ceci.

Merci je passe le sujet en résolu.