Javascript - mettre la fonction membre d'un objet dans une variable autonome?

Question

J'essaie de placer une fonction membre d'un objet spécifique dans une variable autonome, en espérant pouvoir appeler la fonction (sur l'objet original) en utilisant simplement la nouvelle variable.

donc quelque chose comme ceci:

var str = "abcdefgh"; 
var fn = str.indexOf; 
console.log(fn("e")); // supposed to output 4 

Alors fn(x) est censé faire la même chose que str.indexOf(x). Mais ça ne marche pas. Y a-t-il un autre moyen de m'en débarrasser?

Notez que la difficulté ici est que je veux appeler fn la fonction sur cet objet str spécifique. Donc, fn est de devenir une sorte de fermeture.

Answer 1

De l'You Don't Know JS Series, JS détermine la this de cette manière

1. est la fonction appelée à nouveau (nouvelle reliure)? Si tel est le cas, il s'agit de l'objet nouvellement construit .

   var bar = new foo()

2. est la fonction appelée avec appel ou appliquer (reliure explicite), même caché à l'intérieur d'une liaison liant dur? Si c'est le cas, il s'agit explicitement de l'objet spécifié .

   var bar = foo.call(obj2)

3. est la fonction appelée avec un contexte (la liaison implicite), sinon connu sous le nom d'un objet contenant possédante ou? Si c'est le cas, c'est cet objet de contexte.

   var bar = obj1.foo()

4. Sinon, par défaut la présente (liaison par défaut). Si en mode strict, choisissez indéfini, sinon choisissez l'objet global.

   var bar = foo()

Votre problème

Lorsque vous appelez la indexOf sur le str.indexOf('e'), le moteur JS commence à rechercher dans le contexte de la fonction. Il voit que vous avez appelé la fonction avec la notation . sur un objet chaîne et lui renvoie le contexte. Mais lorsque vous obtenez la référence de la fonction et tente d'appeler comme fn, le moteur commence à chercher dans le contexte (mentionné ci-dessus) et n'a rien trouvé. Sinon, lorsque vous obtenez une référence de fonction à l'extérieur, elle perd son contexte. Donc, vous devez donner le contexte explicitement.

Ici j'écris, que chaque fois que le fn sera appelé, le this à l'intérieur de la fonction fera référence à la variable str.

var str = "abcdefgh"; 
 
var fn = str.indexOf.bind(str); 
 
console.log(fn("e")); // supposed to output 4

Answer 2

Si vous utilisez javascript variété ES6, vous pouvez utiliser une fonction "flèche" pour y parvenir. C'est une belle syntaxe courte.

Pour référence plus loin, see the mozilla docs on arrow functions

Cette variable peut bien sûr être passé autour. Notez qu'avec cette solution, la variable fn contient une référence directe à la chaîne sur laquelle vous exécutez une fonction, ce qui résout votre problème de contexte.