質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • JavaScript

    17040questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

JavaScript 束縛された関数が呼ばれる bind について教えてください

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 256

happy_teeth

score 19

この関数の中でbind(null,elements[i])
で取得した引数からelementを渡していることがわかります。
menu-aはHTMLのノードです。メニューで表示されている文字です。

  var elements = document.getElementsByClassName('menu-a');
      for (var i = 0; i < elements.length; i++) {
        //ここのbindの第1引数がnullなのがわかりません。
        elements[i].onmouseover = changeTextToJapanese.bind(null, elements[i]);
        elements[i].onmouseout = changeTextToEnglish.bind(null, elements[i]);
      }

 この関数を呼び出してelementを渡しています。

  // 英語→日本語に変換する関数。マウスオーバー時に呼ばれる。
    function changeTextToJapanese(element) {

      switch(element.innerHTML) {
        case 'About':
//つづく

 MDNの説明では

bind() メソッドは、呼び出された時に新しい関数を生成します。新しい関数が呼び出される時、this キーワードは与えられた値がセットされ、ます。2 個目以降の引数は、新しい関数より前に、ターゲット関数の引数として与えられます。

fun.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg
束縛された関数が呼ばれる時、this 値としてターゲット関数に渡される値を指定します。束縛された関数が new 演算子によって構築された場合、この引数は無視されます。
arg1, arg2, ...
ターゲット関数を呼び出す時、束縛された関数に与えられる引数の前に付けてターゲット関数に渡す引数。

this値としてターゲットに渡されるとはどういう意味でしょうか?
さらに理解できないのが、MDNの説明です

MDNより引用

最もシンプルな bind() の使い方は、どのように呼び出された場合でも特定の this 値を持つ関数を生成することです。初心者の JavaScript プログラマーがよくやる間違いは、あるオブジェクトからメソッドを取り出し、後でその関数を呼び出すとき、その内側の this 値が元のオブジェクトになると考えてしまうことです(例えば、そのメソッドをコールバック関数に使うケース)。特に配慮しなければ、元のオブジェクトは失われてしまいます 【訳注: 取り出した関数内の this としては使えなくなる】。その関数に元々のオブジェクトを bind() して束縛された関数を生成すれば、この問題をきちんと解決することができます:

this.x = 9;    // this はブラウザーのグローバルな "window" オブジェクトを参照する
var module = { 
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81

var retrieveX = module.getX;
retrieveX(); 
// この関数はグローバルスコープで呼び出されるため9を返します。

// 'this' を module に結びつけた新しい関数を生成
// 初心者のプログラマーはグローバル変数の x と
// モジュールプロパティの x とを混同するかもしれません。
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

module.getX();で81が返却される意味がわかりません。
なぜこうなるのでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+3

module.getX();で81が返却される意味がわかりません。

this.x = 9;    // this はブラウザーのグローバルな "window" オブジェクトを参照する
var module = { 
  x: 81,
  getX: function() { return this.x; }
};

module.getX(); // 81


↑「return this.x」とありますね。
「this」というのは「module」自体のことを指します。
moduleの宣言内のxをmodule.getX()で返しているのです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/06/21 08:47 編集

    ありがとうございます!
    bindで第1引数が省略されているのは、自分自身の関数をオブジェクトとして渡していないからという理解で良いですか?

    キャンセル

  • 2018/06/21 09:13

    > bindで第1引数が省略されているのは、

    横からですが…、引数省略は boundGetX() を指しますか。
    module.getX() は元々、第一引数が未定義なのでは?

    キャンセル

  • 2018/06/21 10:27

    //ここのbindの第1引数がnullなのがわかりません。
    elements[i].onmouseover = changeTextToJapanese.bind(null, elements[i]);
    ここのことです。
    boundGetX()ではないです。

    キャンセル

  • 2018/06/21 13:01

    第一引数は省略されていません。this値はnullになります。

    changeTextToJapanese() の第一引数を束縛する為、this値は何でもいいので指定された、というところだと思いますが、正確には本人に確認下さい。
    少なくとも、私なら event.currentTarget で参照可能なノードを第一引数に束縛しません。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.48%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17040questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。