Discussion :

[unoomad]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[SylvainPV]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
  };
}

[unoomad]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[sekaijin]

non dans le dernier cas c'est appel

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

car appel est une fonction et que tu agit sur le prototype des fonction
A+JYT

[unoomad]

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

[unoomad]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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é ?

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[unoomad]

Oui merci j'obtient ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[SylvainPV]

Ben si ça l'est.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.