javascript this

javascriptのthisについて質問です。
Accordionというクラスの中にある、openAccordionというメソッド内でthisを呼ぶと、クリックした要素が呼び出される、sumというメソッド内でthisを呼ぶとAccordionが呼びだされる、ということが理解できません。

クラスのメソッド内でthisを呼ぶとwindowオブジェクトが呼び出されるという認識でしたが違うのでしょうか。また、addEventlisnerのclickで呼び出される関数内でthisを呼んだら必ずクリックした要素が呼び出されるという事でしょうか。
長々としていて大変恐縮ですが、ご教授お願いいたします。

※constructor関数内でthisを呼ぶと、Accordionが呼び出されるのは理解できます。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="style.css">
9</head>
10<body>
11    
12    <div class="accordion">
13        <p>Q1.なんでピノのアイスって売れていると思いますか。</p>
14    </div>
15    <div class="accordion-answer">
16        <p>A1.知りません。</p>
17    </div>
18    <div class="accordion">
19        <p>Q2.なんでピノのアイスって売れていると思いますか。</p>
20    </div>
21    <div class="accordion-answer">
22        <p>A1.知りません。</p>
23    </div>
24
25
26
27
28    <script src="main.js"></script>
29</body>
30</html>

js
1
2document.addEventListener('DOMContentLoaded',function(){
3
4    class Accordion{
5        constructor(){
6            
7            let accordion = document.querySelectorAll(".accordion");
8        let content = document.querySelectorAll("p");
9        accordion = [...accordion];
10        content = [...content];
11        console.log(this);
12        
13        for(let i = 0; i < accordion.length; i++){
14            accordion[i].addEventListener('click',this.openAccordion,false)
15        }
16        }
17    
18        openAccordion(){
19            console.log(this);
20        }
21    
22        sum(){
23            console.log(this);
24        }
25    }
26    
27    const acd = new Accordion();
28    
29
30    acd.sum();
31
32});
33

hoshi-takanori

2021/11/11 12:14

this.openAccordion() として呼んだ場合は this が渡されるけど、var f = this.openAccordion; f() とした場合は this が渡らないってことでは。 (addEventListener の引数に this.openAccordion を渡すってことは、いったん this.openAccordion を変数に入れてそれを呼び出すのと同等です。)

行動規範の内容に同意します

回答2件

ベストアンサー

ルールはわりとシンプルです。アロー関数のケースを除くと、

foo.bar() と呼んだ場合、bar() 実行中は foo が this となる。
bar が bind(foo) の結果なら、bar() と呼んだ場合は foo が this となる。
bar.call(foo) や bar.apply(foo, []) と呼んだ場合、bar() 実行中は foo が this となる。
そうではない場合、bar() と呼んだときは、非strictモードでは window などグローバルオブジェクトがthis となる。strict モードでは this が undefined になる。
addEventLisetner() など、コールバックするAPIの場合、コールバック内のthisはAPIの仕様を参照する必要がある

コールバックをどう呼ぶかはAPIを使う側からは見えないため。たいていは bind() した結果を渡すことで変更することができる)

「どう呼ばれるか」が重要です。

accordion[i].addEventListener('click',this.openAccordion,false)

このコードの場合、this.openAccordion は openAccordion 関数を実行していないので、addEventListener() の仕様に従いイベントターゲットの要素が this になります。this が Accordion クラスのインスタンスになって欲しい場合は、this.openAccordion.bind(this) を渡します。

投稿2021/11/10 23:31

編集2021/11/11 00:35

int32_t

総合スコア20850

本質問は、JavaScriptにおける、thisの厄介さを顕著に表しているように思います。

解説を試みます。

クラスのメソッド内でthisを呼ぶとwindowオブジェクトが呼び出されるという認識でしたが違うのでしょうか。

違います。
束縛されたthisつまりは、クラスのインスタンス自身を参照します。
クラスメソッドではない、functionを使用し、ルートで定義し、
ルートで実行をした場合は、実行時におけるthisが参照されるため、
Windowオブジェクトが参照されますが、
クラスは、JSにおいては、途中から導入された、糖衣構文のため、
（thisのややこしい仕様を、他のクラスベースの言語のように使用できるよう、導入されたと思われる）
おそらく、暗黙的にクラスメソッドは、bindメソッドを使っている状態、もしくはアロー関数を使い、thisをインスタンス自身に束縛していると思われます。
（JSは、thisは、束縛しないと、実行時のthisを参照してしまうため、
クラスベースのクラスメソッドのような仕様には非常にしずらい）

また、addEventlisnerのclickで呼び出される関数内でthisを呼んだら必ずクリックした要素が呼び出されるという事でしょうか。

はい、これはその通りで、
クラスメソッドとして、そのままインスタンスのopenAccordionを実行すれば、
インスタンス自身を参照しますが、
addEventlisnerのclickは、逆に、要素をthisとして扱った方が、
さまざまな実装がしやすいのでしょう。
暗黙的には、thisを束縛せずに、
callなどの、thisを要素に置き換えて実行するような仕様としているものと思われます。