teratail header banner
teratail header banner
質問するログイン新規登録
JavaScript

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

Q&A

解決済

1回答

265閲覧

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

happy_teeth

総合スコア42

JavaScript

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

0グッド

1クリップ

投稿2018/06/20 01:45

0

1

この関数の中で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が返却される意味がわかりません。
なぜこうなるのでしょうか?

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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/20 01:49

tkturbo

総合スコア5572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

happy_teeth

2018/06/20 23:49 編集

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

2018/06/21 00:13

> bindで第1引数が省略されているのは、 横からですが…、引数省略は boundGetX() を指しますか。 module.getX() は元々、第一引数が未定義なのでは?
happy_teeth

2018/06/21 01:27

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

2018/06/21 04:01

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問