関数バインディング

オブジェクト メソッドをコールバックとして渡す場合、たとえばsetTimeoutに渡す場合、「 thisが失われる」という既知の問題があります。

この章では、それを修正する方法を見ていきます。

「これ」を失うこと

this失う例はすでに見てきました。メソッドがオブジェクトとは別にどこかに渡されると、 this失われます。

setTimeoutでどのように起こるかは次のとおりです。

ユーザー = { にします
  名前：「ジョン」、
  SayHi() {
    alert(`こんにちは、${this.firstName}!`);
  }
};

setTimeout(user.sayHi, 1000); // こんにちは、未定義です!

ご覧のとおり、出力にはthis.firstNameとして「John」が表示されず、 undefined表示されます。

これは、 setTimeoutオブジェクトとは別に関数user.sayHiを取得したためです。最後の行は次のように書き換えることができます。

 f = user.sayHi にします。
setTimeout(f, 1000); // ユーザーコンテキストが失われました

ブラウザー内のsetTimeoutメソッドは少し特殊です。関数呼び出しに対してthis=windowを設定します (Node.js の場合、 thisタイマー オブジェクトになりますが、ここではあまり重要ではありません)。したがって、 this.firstNameについては、存在しないwindow.firstNameを取得しようとします。他の同様のケースでは、通常、 this単にundefinedになります。

このタスクは非常に典型的なものです。オブジェクト メソッドを別の場所 (ここではスケジューラ) に渡し、そこで呼び出されたいと考えています。正しいコンテキストで呼び出されることを確認するにはどうすればよいでしょうか?

解決策 1: ラッパー

最も簡単な解決策は、ラッピング関数を使用することです。

ユーザー = { にします
  名前：「ジョン」、
  SayHi() {
    alert(`こんにちは、${this.firstName}!`);
  }
};

setTimeout(function() {
  user.sayHi(); // こんにちは、ジョン！
}, 1000);

これで、外部の字句環境からuserを受け取り、通常どおりメソッドを呼び出すことができるようになりました。

同じですが、短くなります:

 setTimeout(() => user.sayHi(), 1000); // こんにちは、ジョン！

問題ないようですが、コード構造にわずかな脆弱性があります。

setTimeoutがトリガーされる前に (1 秒の遅延があります!) user値を変更した場合はどうなるでしょうか?すると突然、間違ったオブジェクトを呼び出してしまいます。

ユーザー = { にします
  名前：「ジョン」、
  SayHi() {
    alert(`こんにちは、${this.firstName}!`);
  }
};

setTimeout(() => user.sayHi(), 1000);

// ...user の値は 1 秒以内に変更されます
ユーザー = {
  SayHi() {alert("別のユーザーが setTimeout にいます!"); }
};

// setTimeout 内の別のユーザー!

次の解決策は、そのようなことが起こらないことを保証します。

解決策 2: バインド

関数は、 this修正できる組み込みメソッド バインドを提供します。

基本的な構文は次のとおりです。

 // より複雑な構文は少し後で説明します
voidboundFunc = func.bind(context); にします。

func.bind(context)の結果は特別な関数のような「エキゾチック オブジェクト」であり、関数として呼び出すことができ、 this=context設定して呼び出しを透過的にfuncに渡します。

つまり、 boundFuncの呼び出しは、 this修正したfuncと似ています。

たとえば、ここではfuncUser this=userを指定してfuncに呼び出しを渡します。

ユーザー = { にします
  名前：「ジョン」
};

関数 func() {
  アラート(this.firstName);
}

let funcUser = func.bind(user);
funcUser(); // ジョン

ここでfunc.bind(user) funcの「バインドされたバリアント」として、 this=userが固定されています。

すべての引数は、元のfuncに「そのまま」渡されます。次に例を示します。

ユーザー = { にします
  名前：「ジョン」
};

関数 func(フレーズ) {
  アラート(フレーズ + ', ' + this.firstName);
}

// これをユーザーにバインドします
let funcUser = func.bind(user);

funcUser("こんにちは"); // こんにちは、ジョン (引数 "Hello" が渡され、this=user)

次に、オブジェクト メソッドを試してみましょう。

ユーザー = { にします
  名前：「ジョン」、
  SayHi() {
    alert(`こんにちは、${this.firstName}!`);
  }
};

letsayHi = user.sayHi.bind(user); // (*)

// オブジェクトなしでも実行可能
こんにちは(); // こんにちは、ジョン！

setTimeout(sayHi, 1000); // こんにちは、ジョン！

// user の値が 1 秒以内に変更された場合でも
//sayHi は古いユーザー オブジェクトへの参照である事前バインド値を使用します
ユーザー = {
  SayHi() {alert("別のユーザーが setTimeout にいます!"); }
};

行(*)では、メソッドuser.sayHiを取得し、それをuserにバインドします。 sayHiは「バインドされた」関数であり、単独で呼び出すことも、 setTimeoutに渡すこともできます。コンテキストは正しいので問題ありません。

ここでは、引数が「そのまま」渡されることがわかりますが、 thisのみがbindによって修正されます。

ユーザー = { にします
  名前：「ジョン」、
  言う(フレーズ) {
    alert(`${phrase}, ${this.firstName}!`);
  }
};

let Say = user.say.bind(user);

Say(「こんにちは」); // こんにちは、ジョン！ (「Hello」引数は言うために渡されます)
Say(「さようなら」); // さようなら、ジョン！ （「さようなら」と言うのが通されます）

簡易メソッド: bindAll

オブジェクトに多くのメソッドがあり、それを積極的に渡すことを計画している場合は、それらすべてをループ内でバインドできます。

 for (ユーザーにキーを入力させます) {
  if (ユーザーのタイプ[キー] == '関数') {
    ユーザー[キー] = ユーザー[キー].bind(ユーザー);
  }
}

JavaScript ライブラリは、lodash の _.bindAll(object, methodNames) など、便利な一括バインディング用の関数も提供します。

部分的な機能

これまでは、 thisバインディングについてのみ説明してきました。さらに一歩進めてみましょう。

thisだけでなく、引数もバインドできます。これはめったに行われませんが、場合によっては便利です。

bindの完全な構文:

 letbound = func.bind(context, [arg1], [arg2], ...);

これにより、コンテキストをthisおよび関数の開始引数としてバインドできるようになります。

たとえば、乗算関数mul(a, b)があります。

関数 mul(a, b) {
  a * b を返します。
}

bind使用して、そのベースに関数double作成しましょう。

関数 mul(a, b) {
  a * b を返します。
}

let double = mul.bind(null, 2);

アラート( double(3) ); // = mul(2, 3) = 6
アラート( double(4) ); // = mul(2, 4) = 8
アラート( double(5) ); // = mul(2, 5) = 10

mul.bind(null, 2)の呼び出しは、呼び出しをmulに渡す新しい関数doubleを作成し、コンテキストとしてnull 、最初の引数として2固定します。さらなる引数は「そのまま」渡されます。

これは部分関数適用と呼ばれます。既存の関数の一部のパラメーターを修正して新しい関数を作成します。

ここでは実際にはthis使用しないことに注意してください。しかし、 bindそれが必要なので、 nullのようなものを入れる必要があります。

以下のコードの関数triple 、値を 3 倍にします。

関数 mul(a, b) {
  a * b を返します。
}

トリプル = mul.bind(null, 3); とします。

アラート( トリプル(3) ); // = mul(3, 3) = 9
アラート( トリプル(4) ); // = mul(3, 4) = 12
アラート( トリプル(5) ); // = mul(3, 5) = 15

通常、部分関数を作成するのはなぜでしょうか?

利点は、読みやすい名前 ( double 、 triple ) を持つ独立した関数を作成できることです。これはbindで修正されるため、毎回最初の引数を指定する必要がなく、これを使用できます。

また、非常に汎用的な関数があり、利便性のためにその汎用性の低いバリアントが必要な場合には、部分適用が役立ちます。

たとえば、関数send(from, to, text)があります。次に、 userオブジェクト内で、その部分的なバリアント、つまり現在のユーザーから送信するsendTo(to, text)使用できます。

文脈なしに部分的に進む

いくつかの引数を修正したいが、コンテキストthis修正したくない場合はどうすればよいでしょうか?たとえば、オブジェクト メソッドの場合です。

ネイティブbindそれが許可されません。コンテキストを省略して議論にジャンプすることはできません。

幸いなことに、引数のみをバインドするpartial関数は簡単に実装できます。

このような：

関数部分(関数, ...argsBound) {
  return function(...args) { // (*)
    return func.call(this, ...argsBound, ...args);
  }
}

// 使用法：
ユーザー = { にします
  名前：「ジョン」、
  Say(時間、フレーズ) {
    alert(`[${time}] ${this.firstName}: ${phrase}!`);
  }
};

// 固定時間の部分メソッドを追加します
user.sayNow = Partial(user.say, new Date().getHours() + ':' + new Date().getMinutes());

user.sayNow("こんにちは");
// 次のようなもの:
// [10:00] ジョン：こんにちは！

partial(func[, arg1, arg2...])呼び出しの結果は、次の関数を使用してfuncを呼び出すラッパー(*)です。

• thisは取得したものと同じです（ user.sayNowの場合はuser呼び出します）

• 次に、それを与えます...argsBound – partial呼び出しからの引数 ( "10:00" )

• 次に、それを与えます...args – ラッパーに与えられる引数 ( "Hello" )

スプレッド構文を使用するととても簡単ですよね?

また、lodash ライブラリからの _.partial 実装も用意されています。

まとめ

メソッドfunc.bind(context, ...args)コンテキストthisと最初の引数 (指定されている場合) を固定する関数funcの「バインドされたバリアント」を返します。

通常、 bindを適用してオブジェクト メソッドのthisを修正し、それをどこかに渡すことができるようにします。たとえば、 setTimeoutにします。

既存の関数の一部の引数を修正すると、結果として得られる (汎用性が低い) 関数は、部分的に適用された関数または部分的に適用された関数と呼ばれます。

部分的は、同じ議論を何度も繰り返したくない場合に便利です。 send(from, to)関数があり、 fromタスクに対して常に同じである必要がある場合と同様に、部分関数を取得して続行できます。

タスク

メソッドとしてのバインドされた関数

重要度: 5

出力は何になりますか?

関数 f() {
  アラート(これ); //?
}

ユーザー = { にします
  g: f.bind(null)
};

user.g();

解決

答えは、 null 。

関数 f() {
  アラート(これ); // null
}

ユーザー = { にします
  g: f.bind(null)
};

user.g();

バインドされた関数のコンテキストは固定的に固定されています。それをさらに変える方法はありません。

したがって、 user.g()を実行している間でも、元の関数はthis=nullで呼び出されます。

2番目のバインド

重要度: 5

バインディングを追加することでthis変更できますか?

出力は何になりますか?

関数 f() {
  アラート(この名前);
}

f = f.bind( {名前: "ジョン"} ).bind( {名前: "アン" } );

f();

解決

答えは「ジョン」です。

関数 f() {
  アラート(この名前);
}

f = f.bind( {名前: "ジョン"} ).bind( {名前: "ピート"} );

f(); // ジョン

f.bind(...)によって返されるエキゾチックなバインド関数オブジェクトは、作成時にのみコンテキスト (および指定されている場合は引数) を記憶します。

関数を再バインドすることはできません。

バインド後の関数プロパティ

重要度: 5

関数のプロパティには値があります。 bind後は変わりますか？なぜ、あるいはなぜそうではないのでしょうか？

関数sayHi() {
  アラート( this.name );
}
SayHi.test = 5;

letbound =sayHi.bind({
  名前：「ジョン」
});

アラート(バウンド.テスト); // 出力はどうなるでしょうか?なぜ？

解決

答えはundefined 。

bindの結果は別のオブジェクトになります。 testプロパティはありません。

「this」が失われる関数を修正

重要度: 5

以下のコードのaskPassword()の呼び出しでは、パスワードをチェックし、その答えに応じてuser.loginOk/loginFailを呼び出す必要があります。

しかし、それはエラーにつながります。なぜ？

すべてが正しく動作するように、強調表示された行を修正します (他の行は変更しないでください)。

関数 askPassword(ok、失敗) {
  let パスワード = プロンプト("パスワード?", '');
  if (パスワード == "ロックスター") ok();
  それ以外の場合は失敗します();
}

ユーザー = { にします
  名前：「ジョン」、

  loginOk() {
    alert(`${this.name} がログインしました`);
  }、

  ログイン失敗() {
    alert(`${this.name} はログインに失敗しました`);
  }、

};

askPassword(user.loginOk, user.loginFail);

解決

このエラーは、 askPasswordオブジェクトなしで関数loginOk/loginFail取得するために発生します。

これらを呼び出すと、当然のことながらthis=undefinedとみなされます。

コンテキストbindましょう:

関数 askPassword(ok、失敗) {
  let パスワード = プロンプト("パスワード?", '');
  if (パスワード == "ロックスター") ok();
  それ以外の場合は失敗します();
}

ユーザー = { にします
  名前：「ジョン」、

  loginOk() {
    alert(`${this.name} がログインしました`);
  }、

  ログイン失敗() {
    alert(`${this.name} はログインに失敗しました`);
  }、

};

askPassword(user.loginOk.bind(user), user.loginFail.bind(user));

今ではそれが機能します。

別の解決策は次のとおりです。

 //...
askPassword(() => user.loginOk(), () => user.loginFail());

通常、これでも機能し、見栄えも良くなります。

ただし、 askPasswordが呼び出された後、訪問者が応答して() => user.loginOk()を呼び出す前にuser変数が変更される可能性があるより複雑な状況では、信頼性は少し低くなります。

ログイン用の一部のアプリケーション

重要度: 5

このタスクは、「this」を失った関数を修正するのをもう少し複雑にしたものです。

userオブジェクトが変更されました。 2 つの関数loginOk/loginFailの代わりに、1 つの関数user.login(true/false)が追加されました。

user.login(true) okとして呼び出し、 user.login(false)をfailとして呼び出すには、以下のコードでaskPasswordに何を渡す必要がありますか?

関数 askPassword(ok、失敗) {
  let パスワード = プロンプト("パスワード?", '');
  if (パスワード == "ロックスター") ok();
  それ以外の場合は失敗します();
}

ユーザー = { にします
  名前：「ジョン」、

  ログイン(結果) {
    alert( this.name + (result ? ' ログインしました' : ' ログインに失敗しました') );
  }
};

askPassword(?, ?); //?

変更は、強調表示されたフラグメントのみを変更する必要があります。

解決

1. ラッパー関数を使用するか、簡潔にするために矢印を使用します。

    askPassword(() => user.login(true), () => user.login(false));

   これで、外部変数からuserを取得し、通常の方法で実行されます。

2. または、 user.loginからuserコンテキストとして使用し、正しい最初の引数を持つ部分関数を作成します。

    askPassword(user.login.bind(user, true), user.login.bind(user, false));