リンクを新しいタブで開く
  1. 123

    bindメソッドは、関数のthis値を明示的に設定し、新しい関数を生成するために使用されます。これにより、関数を特定のコンテキストに結び付けることができます。

    基本的な使い方

    以下は、bindメソッドを使用してthisを特定のオブジェクトにバインドする例です。

    const person = {
    name: "太郎",
    greet: function () {
    console.log(`こんにちは、${this.name}です！`);
    },
    };

    const anotherPerson = { name: "花子" };

    // `greet`関数を`anotherPerson`にバインド
    const boundGreet = person.greet.bind(anotherPerson);
    boundGreet(); // 出力: こんにちは、花子です！
    コピーしました。

    引数の固定

    bindメソッドでは、関数の引数を事前に固定することも可能です。

    function add(a, b) {
    return a + b;
    }

    // 第一引数を固定
    const addFive = add.bind(null, 5);
    console.log(addFive(10)); // 出力: 15
    コピーしました。

    コールバックでの利用

    コールバック関数内でthisが意図したオブジェクトを参照するようにするためにも使用されます。

    class Counter {
    constructor() {
    this.count = 0;
    }

    increment() {
    this.count++;
    console.log(this.count);
    }
    }

    const counter = new Counter();
    setTimeout(counter.increment.bind(counter), 1000); // 出力: 1
    コピーしました。

    注意点

    • bindは新しい関数を返すため、元の関数は変更されません。

    • callやapplyと異なり、即座に実行されるのではなく、新しい関数が生成されます。

    類似メソッドとの違い

    • call: 関数を即座に実行し、thisと引数を指定します。

    • apply: callと同様ですが、引数を配列で渡します。

    • bind: 新しい関数を生成し、後で実行可能です。

    このように、bindは柔軟なコンテキスト管理や引数の固定化に役立つ便利なメソッドです。

    詳細情報:
    1 -qiita.com2 -sejuku.net3 -developer.mozilla.org
    bindに引数をとることができますか?

    bindには引数をとることができます。 thisに設定するオブジェクト以外の引数を設定して動作確認を行ってみます。 bindにまずthisに入るオブジェクトを設定します。 greetingに設定した関数にはageとheightの2つの引数を取ることができます。 bindを利用することでbindの2つ目、3つ目の引数には関数の引数に対応するageとheightの値を入れることができます。

    reffect.co.jp
    digibeatrix.com
    https://www.digibeatrix.com/js/javascript-basics/...
    【完全ガイド】JavaScriptのbindとは？初心者にもわかる使い方 ...
    フィードバック
    ありがとうございました!詳細をお聞かせください
  1. Qiita
    https://qiita.com › items

    bind ()メソッドを使ってみませんか？（初めて使うJavaScriptのbind ...

    2023年5月27日 · はじめに JavaScriptのbind ()は簡単に言えば、あらかじめ作成した関数のパラメーター（this）を変更して新しい関数を作れるメソッドです。 英単語bindの意味をそのまま辿ると「拘 …

  2. Mozilla Developer
    https://developer.mozilla.org › ja › docs › Web › JavaScript › ...

    Function.prototype.bind () - JavaScript | MDN

    • バインド済み関数の生成
      最もシンプルな bind() の使い方は、どのように呼び出された場合でも特定の this 値を持つ関数を生成することです。 初心者の JavaScript プログラマーがよくやる間違いは、あるオブジェクトからメソッドを抽出し、後でその関数を呼び出すとき、その内側の this 値が元のオブジェクトになると考えてしま …
    • 部分的に適用された関数
      次のシンプルな bind() の使い方は、あらかじめ引数が指定された関数を生成することです。 これらの引数は（もしあれば）指定された this 値の後に続き、ターゲット関数に渡される引数の先頭に挿入され、その後に、バインドされた関数が呼ばれる際に渡される引数が続きます。
    developer.mozilla.org でさらに表示
  3. SAMURAI ENGINEER
    https://www.sejuku.net › blog

    【JavaScript入門】bindメソッドの使い方をわかりやすく解説！

    2024年5月6日 · JavaScriptのbindメソッドを理解し、プログラミングスキルを磨くことは、エンジニアとしての成長に欠かせません。 しかし、「もっと効率的に収入を増やしたい」「新たなスキルで …

  4. digibeatrix.com
    https://www.digibeatrix.com › js › javascript-basics › ...

    【完全ガイド】JavaScriptのbindとは？初心者にもわか …

    2025年2月11日 · JavaScriptのbindメソッドの使い方を徹底解説！ thisの固定、イベントハンドラ、部分適用などの実践例を交えて、初心者でも理解できるよう …

  5. jp-seemore.com
    https://jp-seemore.com › web

    一度で理解！JavaScriptのbindメソッドを使いこなす10 …

    2024年10月8日 · はじめに この記事を読めば、JavaScriptのbindメソッドを使いこなすことができるようになります。 bindメソッドは、関数のthisを固定したり …

  6. dokyumento.jp
    https://javascripttutorial.dokyumento.jp › javascript-bind

    JavaScript bind () メソッドとその実践的な応用

    まとめ bind() メソッドは、呼び出されたときに this が指定された値に設定される新しい関数を作成します。 bind() メソッドを使用すると、オブジェクトはメソッドのコピーを作成せずに別のオブジェク …

  7. 現代の JavaScript チュートリアル
    https://ja.javascript.info › bind

    関数バインディング - JavaScript

    2024年10月23日 · sayHi は “束縛 (バインド)された” 関数であり、単独もしくは setTimeout に渡して呼び出すことができます。

  8. techis.jp
    https://techis.jp › guide › js › js_function_bind

    JavaScript 関数 bind() メソッド | テックアイエスガイド

    JavaScript 関数 bind () 関数の借用 bind() メソッドを使用すると、オブジェクトは別のオブジェクトからメソッドを借用できます。 以下の例では、2 つのオブジェクト (個人とメンバー) を作成します。

  9. Qiita
    https://qiita.com › items

    【JS初学者へ送る】thisとbind ()を徹底解説 (アロー関数との違い ...

    2024年10月6日 · bind() メソッドは、関数の this 値を固定する新しい関数を作成します。

  10. アールエフェクト
    https://reffect.co.jp › html › javascript-bind

    【初心者向け】JavaScriptのbindって何？？を理解す …

    2023年3月23日 · JavaScriptのbind関数がわからない初心者向けに本文書を作成しました。 シンプルなコードのみを利用しているのでbind関数がどのようなもの …

  11. 他の人も質問しています
    Unable to load answer

    フィードバック
コンテンツは AI を使用して生成されました。詳細情報
    このサイトを利用すると、分析、カスタマイズされたコンテンツ、広告に Cookie を使用することに同意したことになります。サード パーティの Cookie に関する詳細情報|Microsoft のプライバシー ポリシー