「this」をアロー関数にバインドできますか？

ES6をしばらく試してみましたが、ちょっとした問題が発生しました。

私はアロー関数を使うのが本当に好きで、できる限りそれを使います。

ただし、バインドできないようです。

これが関数です：

var f = () => console.log(this);

これは、関数をバインドするオブジェクトです。

var o = {'a': 42};

そして、ここで私が結合する方法ですfにo：

var fBound = f.bind(o);

そして、私はただ電話することができますfBound：

fBound();

これを出力します（oオブジェクト）：

{'a': 42}

涼しい！美しい！それが機能しないことを除いて。oオブジェクトを出力する代わりに、オブジェクトを出力しwindowます。

だから私は知りたいです：あなたは矢印関数をバインドできますか？（もしそうなら、どうですか？）

上記のコードをGoogle Chrome 48とFirefox 43でテストしましたが、結果は同じです。

アロー関数で再バインド することはできませんthis。これは常に、それが定義されたコンテキストとして定義されます。this意味を持たせる必要がある場合は、通常の関数を使用する必要があります。

以下からのECMAScript 2015仕様：

ArrowFunction内の引数、super、this、またはnew.targetへの参照は、字句的に囲まれた環境でバインディングに解決される必要があります。通常、これは直接囲んでいる関数の関数環境になります。

完全にするために、矢印関数を再バインドできますが、の意味を変更することはできませんthis。

bind 関数の引数にはまだ値があります：

((a, b, c) => {
  console.info(a, b, c) // 1, 2, 3
}).bind(undefined, 1, 2, 3)()

ここで試してください：http : //jsbin.com/motihanopi/edit?js,console

MDNから：

矢印関数式は、関数式に比べて構文が短く、字句的にthis値をバインドします（独自のthis、arguments、super、またはnew.targetをバインドしません）。アロー関数は常に匿名です。

つまり、値をthis好きなようにバインドすることはできません。

何年もの間、js開発者はコンテキストバインディングに苦労し、なぜthisjavascript が変更されたのかと尋ねました。コンテキストバインディングと、thisjavascriptとthis他のほとんどのOOP言語の意味との違いにより、何年にもわたって混乱しました。

これらすべてが私に、なぜ、なぜ、なぜ尋ねるのかを導きます！アロー関数を再バインドしないのはなぜですか？このすべての問題と混乱を解決するために特別に作成され、関数のスコープを維持するためにbind、callまたはその他の方法を使用する必要がないように作成されたもの。

TL; DR

いいえ、矢印関数を再バインドすることはできません。

を使用bindしthisて、矢印関数内の値を変更することはできません。ただし、古いarrow関数と同じことを行う新しい通常の関数を作成し、callまたはbindを使用しthisて通常どおり再バインドできます。

evalここで呼び出しを使用して、通常の関数として渡した矢印関数を再作成callし、別の関数で呼び出すために使用しますthis。

var obj = {value: 10};
function arrowBind(context, fn) {
  let arrowFn;
  (function() {
    arrowFn = eval(fn.toString());
    arrowFn();
  }).call(context);
}
arrowBind(obj, () => {console.log(this)});

ES6の矢印関数がJavaScriptで「これ」を本当に解決するか

上記のリンクは、矢印関数thisはbind, call, apply関数によって変化しないことを説明しています。

それは非常に素晴らしい例で説明されています。

これを実行しnode v4て、「期待される」動作を確認します。

this.test = "attached to the module";
var foo = { test: "attached to an object" };
foo.method = function(name, cb){ 
    // bind the value of "this" on the method 
    // to try and force it to be what you want 
    this[name] = cb.bind(this); };
foo.method("bar", () => { console.log(this.test); });
foo.bar(); 

私は数日前に同じ質問をしました。

thisは既にバインドされているため、値をバインドできません。

異なるこのスコープをES6にバインドする=>関数演算子

ショート、あなたは矢印関数をバインドすることはできませんが、以下を読んでください：

thisコンソールに印刷する下の矢印関数があるとします。

const myFunc = ()=> console.log(this);

したがって、これのクイックフィックスは通常の関数を使用することになるため、次のように変更します。

function myFunc() {console.log(this)};

次に、bindor callまたはapply：を使用して、任意の字句環境にバインドできます。

const bindedFunc = myFunc.bind(this);

の場合はそれを呼び出しますbind。

bindedFunc();

を使用eval()してそれを行う方法もありますが、これは強くお勧めしません。

多分この例はあなたに役立ちます：

let bob = {
   _name: "Bob",
   _friends: ["stackoverflow"],
   printFriends:(x)=> {
      x._friends.forEach((f)=> {
         console.log(x._name + " knows " + f);
      });
   }
}

bob.printFriends = (bob.printFriends).bind(null,bob);
bob.printFriends();