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

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

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

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

Q&A

解決済

4回答

184閲覧

JavaScript: イベントリスナで呼び出した関数のthisが思い通りにならない

salud

総合スコア215

JavaScript

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

0グッド

1クリップ

投稿2019/05/29 09:51

一部、簡略的にかいてはいますが
以下のようなコードを実行した際に、thisがdocumentを指してしまい、
Hogeのインスタンスを取得できません。

変数や関数をグローバルにしてしまうと
クロージャで定義した意味がないですし、、
なにか良い手段はありませんでしょうか?

var Hoge = function() { this.hogehoge = 'hogehoge'; document.addEventListener('mousedown', this.change, false); }; Hoge.prototype = { change: function(e) { e.pageX console.log(this.hogehoge); // undefined } }; let hoge = new Hoge();

以上です。
よろしくお願い申し上げます。

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

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

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

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

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

guest

回答4

0

ベストアンサー

EventTarget#handleEvent

Hoge.prototype.handleEvent にメソッドを定義すれば、下記コードで対応可能てす。

JavaScript

1document.addEventListener('mousedown', this, false);

Re: salud さん

投稿2019/05/29 09:54

編集2019/05/29 11:26
think49

総合スコア18156

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

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

salud

2019/05/29 10:44 編集

ありがとうございます!!! setInterval にも同じようなメソッドがありますか? 今、同じように困っていまして...
think49

2019/05/29 11:20 編集

setInterval() には引数を変更する機能がありますが、this値を変更する機能はありません。 MDNのリンク先(及びLhankor_Mhyさんの回答)にあるようにFunction#bindで再束縛して下さい。
guest

0

thisを束縛してしまう、というやり方もありますね。

js

1 document.addEventListener('mousedown', this.change.bind(this), false);

投稿2019/05/29 10:25

Lhankor_Mhy

総合スコア35865

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

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

0

クラスで処理してイベントとクラス自身を両方funcに渡してしまえば?

javascript

1class Hoge{ 2 constructor() { 3 this.hogehoge = 'fugafuga'; 4 const self=this; 5 document.addEventListener('mousedown',e=>{self.func(e,self)}); 6 }; 7}; 8Hoge.prototype.func = (...args)=>{ 9 console.log(args[0].type); 10 console.log(args[1].hogehoge); 11}; 12const fuga = new Hoge();

応用

javascript

1<script> 2class Hoge{ 3 constructor() { 4 this.hogehoge = 'fugafuga'; 5 const self=this; 6 document.querySelector('#btn').addEventListener('mousedown',e=>{ 7 e.stopPropagation(); 8 }); 9 document.querySelector('#btn').addEventListener('click',e=>{ 10 self.setHogehoge('piyopiyo'); 11 }); 12 document.addEventListener('mousedown',e=>{ 13 self.myfunc(e,self); 14 }); 15 }; 16 setHogehoge(v){ 17 this.hogehoge=v; 18 } 19}; 20Hoge.prototype.myfunc = (...args)=>{ 21 console.log(args[0].type); 22 console.log(args[1].hogehoge); 23}; 24window.addEventListener('DOMContentLoaded', function(e){ 25 const fuga = new Hoge(); 26}); 27</script> 28<input type="button" id="btn" value="hoge:fuga-&gt;piyo">

投稿2019/05/29 11:05

編集2019/05/30 00:54
yambejp

総合スコア114572

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

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

0

質問者さんの意図したような書き方じゃないかもしれないですが、
アロー関数を使うとか・・・。

javascript

1var Hoge = function() { 2 this.hogehoge = 'hogehoge'; 3 document.addEventListener('mousedown', (e)=>{ 4 this.change(e); 5 }, false); 6}; 7 8Hoge.prototype = { 9 change: function(e) { 10 e.pageX 11 console.log(this.hogehoge); // undefined 12 } 13}; 14 15let hoge = new Hoge();

ですが、
think49さんのご回答が一番的を射ているかと思います。

投稿2019/05/29 10:10

miyabi_takatsuk

総合スコア9528

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問