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

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

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

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Q&A

解決済

1回答

751閲覧

CoffeeScriptでのthisについて

monagano

総合スコア246

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

0グッド

0クリップ

投稿2018/10/25 02:20

###前提・実現したいこと
ID=simulators-formのsubmitイベントで、simulatorsSubmitを呼び出したいです。
下記のように記載したところ、@部分はdocumentオブジェクトに変換されてしまいました。

coffee

1class SimulatorsForm 2 _formId = "" 3 constructor: (id) -> _formId = id 4 simulatorsSubmit: (e) -> 5 e.preventDefault() 6 console.log('submit!!') 7 8 init: -> 9 subm = document.getElementById(_formId) 10 subm.addEventListener "submit", (e) => 11 @simulatorsSubmit(e) 12 , false if subm? 13 14 15simForm = new SimulatorsForm("simulators-form") 16document.addEventListener("DOMContentLoaded",simForm.init)

###アドバイスいただきたいこと
ファットアロー部分をアローに戻してみたりもしましたが、どうすればsimForm自身を対象にできるのかわかりません。
修正方法のご指摘をお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

これは結構難解な箇所なので、ざっとですが解説します。

simForm.init

これがJS数多いハマりポイントの一つです。
JS世界の中では、メソッドも関数も全て等しく関数です。
オブジェクトのプロパティに関数を代入したらメソッドと呼ぶだけ。

simForm.initをコールバック関数として誰かに手渡したり、変数に代入した瞬間、
thisの束縛が切れて、単体でポツンと存在している関数になります。

どうすればsimForm自身を対象にできるのか

束縛を切らない事です。
無名関数で包んでしまうのが簡潔でわかりやすいですね。

JavaScript

1// 無名関数で包むパターン 2document.addEventListener("DOMContentLoaded", -> simForm.init())

全ての関数はbindをプロトタイプメソッドとして所持しており、
thisの場所、変数を部分適用したまま束縛することが可能です。

無名関数で包んでいないのでsimForm.initは一度simFormから切り離されてしまいますが、
bindメソッドを利用することで無理やり覚え込ませたままコールバック関数として他に渡す事が可能です。

JavaScript

1// bindを使うパターン 2document.addEventListener("DOMContentLoaded", simForm.init.bind(simForm))

他にも色々とやり方はありますが、
とりあえずこのどちらかを覚えておけば十分やっていけると思います。

投稿2018/10/25 03:40

miyabi-sun

総合スコア21158

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

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

monagano

2018/10/26 03:59

ご回答ありがとうございます。 init関数内以前に、最初のdocument.addEventListenerの時点でthisがdocumentになっていたんですね。 デバッグ実行したらすぐにわかることでした。申し訳ないです。 無名関数で包んでしまう方法で、無事解決できました。 また、bindでthisを調整できるのも勉強になりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問