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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

1回答

1234閲覧

自動更新とbind関数について

a-takahashi

総合スコア48

JavaScript

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

0グッド

0クリップ

投稿2016/08/24 08:29

自動更新時のbind関数についてです。
下記のように自動更新の処理をオブジェクトの中にまとめて記述しました。

javaScript

1 /** 2 * 自動更新処理をまとめたobject 3 */ 4 var UpdateController = { 5 updateInterval: 10000,/** 更新間隔 */ 6 updateTimer: null,/** タイマーのID */ 7 updateProcess: function() { 8 /** 自動更新の内容 */ 9 clearTimeout(this.updateTimer); 10 this.startAutoUpdate(); 11 }, 12 startAutoUpdate: function() { 13 /** 自動更新の実行部分 */ 14 this.updateTimer = setTimeout(this.updateProcess.bind(this), this.updateInterval); 15 } 16 };

以前はthis.startAutoUpdate()の部分でエラーになっていました。
デバックをしてみたところ、thisの内容がwindowオブジェクトになっていました。
てっきり私はthisはUpdateControllerになるものと思っていました。
そこでsetTimeoutの部分を
setTimeout(this.updateProcess, this.updateInterval);
から、
setTimeout(this.updateProcess.bind(this), this.updateInterval);
に変更したところ、うまく処理を通すことができました。

なぜthis.startAutoUpdate()の部分のthisがwindowオブジェクトになってしまうのでしょうか?
setTimeoutの引数メソッドの部分にbind(this)を指定するとなぜうまくいくようになるのでしょうか?

よろしくお願いします。

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

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

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

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

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

guest

回答1

0

setTimeoutが呼び出す関数では、thisがグローバルオブジェクトとなります(MDN)。

元のsetTimeout(this.updateProcess, this.updateInterval); では単に関数オブジェクトを渡しているので、本来のthisとは縁が切れて、setTimeoutがグローバルオブジェクトをthisとしてこの関数を起動します。.bindすることで、setTimeoutを実行した環境のthisが正しく渡るようになります。

投稿2016/08/24 08:37

maisumakun

総合スコア145121

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問