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

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

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

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

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

Q&A

解決済

1回答

911閲覧

子クラスに渡したコールバック関数内のthisが指すオブジェクトについて

Praline

総合スコア46

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

JavaScript

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

0グッド

0クリップ

投稿2021/05/01 13:51

前提・実現したいこと

子クラス内のイベントの発生を検知し、親クラスのメソッドを実行させる処理を作成しております。
現在は子クラスのコンストラクタに、実行したい親クラスのメソッドを渡し、子クラスのイベント発生時にそのメソッドを実行させる、という処理を考えております。

発生している問題・エラーメッセージ

下記ソースコードを実行すると、渡したコールバック関数内の処理で、該当の関数が定義されていないとエラーが発生しております。

Uncaught TypeError: Cannot read property 'this.hoge' of undefined

該当のソースコード

javascript

1class oya{ 2 constructor(){ 3 this.kodomo1 = new kodomo(this.callback); 4 this.kodomo2 = new kodomo(this.callback); 5 } 6 7 callback(){ 8 this.hoge(); 9 } 10 11 hoge(){ 12 //検知した処理 13 } 14} 15 16class kodomo{ 17 constructor(callback){ 18 this.callback = callback; 19 20 $('#fuga').on('click', () => { 21 this.callback(); 22 }) 23 } 24} 25 26

補足情報(FW/ツールのバージョンなど)

子クラス内に要素のイベントをセットしておりますが、kodomoクラスは役割ごとのオブジェクトを取りまとめており、oyaクラスはそれらを取りまとめるような役割を与えております。

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

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

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

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

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

guest

回答1

0

ベストアンサー

単にthis.callbackとだけ書いて引数に渡すと、その時点でcallbackthisの関係が切れてしまいます。

何らかの方法でthisを固定して渡す必要があります。

javascript

1this.kodomo1 = new kodomo(this.callback.bind(this));

投稿2021/05/01 14:36

maisumakun

総合スコア145121

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

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

Praline

2021/05/02 00:24

迅速なご回答ありがとうございます! 取り急ぎthisをbindすることで、望む処理にすることができました。 bindの理解が追いついてないようなので、勉強させていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問