JavaScript での binding() メソッドを使用してコードをクリーンにする方法の詳細な紹介-jsチュートリアル-php.cn

JavaScript での binding() メソッドを使用してコードをクリーンにする方法の詳細な紹介

黄舟

リリース： 2017-03-06 15:19:19

オリジナル

1461 人が閲覧しました

数週間前、私はループ内での非同期関数の呼び出しによる影響をオフにする方法と、この問題に対処するいくつかの方法について書きました。

最近のコーディングで、もっと簡単な方法を発見しました。その過程で、匿名関数が削除され、「関数をループ内に記述しないでください」という lint エラーが削除されます。

ご存知のとおり、私は JavaScript で bind() を試してきました。バインドは、数週間前に述べたクロージャ問題への対処など、さまざまな状況で使用できることがわかりました。 bind()试验。事实证明，我们可以在多个场合，包括处理我几周前提到的闭包问题中，使用bind。

什么是bind（）？

bind函数最近才添加到JavaScript的规范说明中，所以它只能工作于最新的浏览器上。你可以查看兼容性表看看哪些浏览器实现bind()以及其他JavaScript功能。我仔细地看了看名单，我关注的浏览器没有不支持bind()的。当然你的情况可能会有所不同。

bind所做的就是自动封装函数在函数自己的闭包中，这样我们可以捆绑上下文（this关键字）和一系列参数到原来的函数。

你最终得到的是另一个函数指针。

function add(a,b){
    return a + b;
}
var newFoo = add.bind(this,3,4);

ログイン後にコピー

请注意，我们不仅捆绑this到foo()函数，而且我们也捆绑了两个参数。所以，当我们调用newFoo()的时候，返回值将是7。

但是，如果我们在调用之前newFoo更改的参数的话，会发生什么？

更改bind参数

如果我们使用变量绑定参数到foo()，然后在调用newFoo()前改变变量，你觉得值会变为什么呢？

function add(a,b){
    return a + b;
}
var a = 3;
var b = 4;
var newFoo = add.bind(this,a, b);
a = 6;
b = 7;
console.log(newFoo());

ログイン後にコピー

返回值仍然是7，因为bind()绑定的是参数的值，而不是实际变量的值。

这是好消息，就像我说的，我们可以在代码中利用这个巨大的优势。但是，对我而言它最有用的地方是在callbacks中。

bind和callbacks

还记得那篇文章中我们在循环中处理callbacks的解决方案之一就是，围绕我们想要调用的函数创建匿名函数。

for(var i = 0;i < 10;i++){
    (function(ii){
        setTimeout(function(){
            console.log(ii);
        },1000);
    })(i);

ログイン後にコピー

但是我们可以使用bind，大大简化代码。

function consoleLog(i){
  console.log(i);
}
for(var i = 0;i < 10;i++){
    setTimeout(consoleLog.bind(this,i),1000);
}

ログイン後にコピー

这是因为每次调用bind就会给出一个新的函数指针，并且保留原来的函数不变。

同时，我们还删除了linting错误“不要在循环写函数”，因为我们不是在循环中创造的函数，我们只是指向了我们在循环外创建的函数。

bind用于事件处理程序

bind()

bind()とは何ですか?

バインド関数は最近 JavaScript 仕様に追加されたばかりなので、最新のブラウザーでのみ動作します。互換性マトリックスをチェックして、どのブラウザが bind() やその他の JavaScript 機能を実装しているかを確認できます。リストを注意深く調べてみましたが、気になるブラウザのどれも bind() をサポートしていませんでした。もちろん、あなたの状況は異なるかもしれません。

bind が行うことは、関数を独自のクロージャに自動的にカプセル化し、コンテキスト (このキーワード) と一連のパラメーターを元の関数にバインドできるようにすることです。

最終的に得られるのは、別の関数ポインターです。

function ClassName(){
   this.eventHandler = (function(){
   }).bind(this);
}

ログイン後にコピー

これを foo() 関数にバンドルしているだけでなく、2 つのパラメータもバンドルしていることに注意してください。したがって、newFoo() を呼び出すと、戻り値は 7 になります。

しかし、newFoo を呼び出す前にパラメータを変更したらどうなるでしょうか?

バインドパラメータを変更する

変数を使用してパラメータを foo() にバインドし、newFoo() を呼び出す前に変数を変更する場合、どうしますか値が変わると思いますか？ 🎜

function add(a,b,c) {
  return a+b+c;
}
var addAgain = add.bind(this, 1, 2);
var result = addAgain(3);

ログイン後にコピー

🎜bind() は実際の変数の値ではなくパラメーターの値をバインドするため、戻り値は 7 のままです。 🎜🎜これは良いニュースです。先ほども言いましたが、この大きな利点をコードで活用できます。ただし、私にとって最も役立つのはコールバックです。 🎜🎜バインドとコールバック🎜🎜 その記事から、ループ内でコールバックを処理するための解決策の 1 つは、呼び出したい関数の周囲に匿名関数を作成することであったことを思い出してください。 🎜rrreee🎜しかし、バインドを使用するとコードを大幅に簡素化できます。 🎜rrreee🎜これは、bind を呼び出すたびに新しい関数ポインターが与えられ、元の関数は変更されないままになるためです。 🎜🎜同時に、「ループ内に関数を書かないでください」という lint エラーも削除しました。これは、ループ内に関数を作成したのではなく、ループの外で作成した関数を指しているだけだからです。 🎜🎜イベントハンドラーのバインド🎜🎜 bind() を使用してコードをクリーンにできるもう 1 つの場所は、イベントハンドラーです。イベントハンドラーが呼び出されるとき、イベントハンドラーが作成されたオブジェクトではなく、イベントが生成されたコンテキストにアクセスすることは誰もが知っている、または知っておくべきです。バインドを使用すると、関数が正しいコンテキストで確実にアクセスされるようになります。 🎜rrreee🎜そのようなコードを書くべきだと言っているのではなく、要点を説明するだけです。 🎜🎜カレー🎜🎜え？！ 🎜🎜わかりました。私の関数型プログラミングの知識が限られていることを最初に認めておきます。私がカリー化について与えることができる最良の定義は、複数のステップでパラメータを渡すことができるということです。 🎜🎜バインドを使用すると、次のようなコードを記述してカリー化を実装できます: 🎜rrreee🎜上記は、コードをクリーンにするための JavaScript での binding() メソッドの使用方法の詳細な紹介です。詳細については、PHP に注目してください。中国語のウェブサイト (www.php .cn)! 🎜🎜 🎜