JavaScriptの「this」について。

実現したいこと

オブジェクト内で、そのオブジェクト内のメソッドAを、メソッドBの中でsetTimeoutとともに使用したいのですが、その際の、thisについてよくわかりません。

前提

以下のようなコードで、オブジェクト内のメソッドで、同じオブジェクト内の別のメソッドを呼んでいます。

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

この中で、fn3だけがエラーになります。

ncaught TypeError: this.fn1 is not a function

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        const person = {
            name: "Taro",

            fn1() {
                console.log("Hi" + " " + this.name)
            },

            fn2() {
                setTimeout(()=> {
                    this.fn1();
                },1000)
            },

            fn3() {
                setTimeout(function(){
                    this.fn1();
                },1000)
            },

            fn4() {
                const _this = this;
                setTimeout(function(){
                    _this.fn1();
                },1000)
            }
        }

        person.fn1();
        person.fn2();
        person.fn3();
        person.fn4();
    </script>
</body>
</html>

試したこと

fn3を「this」でバインドしましたが、やはりエラーになります。

fn3() {
                setTimeout(function(){
                    this.fn1.bind(this)();
                },1000)
            },

エラーメッセージ

Uncaught TypeError: Cannot read properties of undefined (reading 'bind')

疑問点は以下です。
① そもそもなぜアロー関数ではエラーが出ないのに、functionではエラーになるのでしょうか？
② 私の認識では、アロー関数とfunctionの違いは、「コールバック関数として渡す際、アロー関数はwindowオブジェクトとしてthisを見てしまうから注意」というものでしたが、それは今回の挙動の違いに関係しているのでしょうか？
③ fn4はネットで調べていて出てきた方法ですが、なぜエラーにならないのでしょうか？

頭が混乱しています。
どなたかよろしくお願いいたしますm(__)m

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

ここにより詳細な情報を記載してください。

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

回答3件

bindの仕方がおかしいです

javascript
1            fn3() {
2                setTimeout(function(){
3                  this.fn1();
4                }.bind(this),1000)
5            },

クラス内でthisはクラスを返しますが、function()で無名変数のコールバックをつくるとthisがwindowを参照するためそうなるのでしょう。アロー関数であれば上位のthisをそのまま引っ張ってきています

投稿2023/08/04 03:16

yambejp

総合スコア115892

ベストアンサー

functionはthisを束縛します（値を変えてしまう、というような意味です）。なにを束縛するかは、呼ばれ方次第です。
アロー関数は何があろうとthisを束縛しません。

プロパティアクセサ（obj.method()など）を介して呼ばれた場合は、プロパティアクセサの前に書かれたオブジェクト（obj）に束縛されます。
プロパティアクセサを介さずに呼ばれた場合は、windowまたはundefinedに束縛します。
コールバックで呼ばれた場合は、その関数次第です。setTimeoutはwindowまたはundefinedに束縛します。

なので、質問コードのfn1からfn4までのthisはpersonに束縛されています。つまり、

③fn4がエラーにならないのはそれを代入しているのが理由です。

①fn3はコールバックがfunctionのため、windowに束縛します。fn2はアロー関数のため、setTimeoutのコールバックであっても束縛をせずに、thisはpersonのままなのがエラーにならない理由です。

②その説明はクラスの話かと思いますので話がズレます。アロー関数は何があろうとthisを束縛しないため、クラスのメソッドに使ってもthisをインスタンスに束縛をしません。

おまけ。質問コードに続いて以下を実行するとこのような結果になります。

js
1const f = person.fn4;
2f(); // error
3
4const obj = { fn1: console.log };
5obj.fn4 = person.fn4;
6obj.fn4(); // ""
7
8const obj2 = { fn1: () => console.log(this) };
9obj2.fn4 = person.fn4;
10obj2.fn4(); // window

投稿2023/08/04 05:40

編集2023/08/04 06:08

Lhankor_Mhy

総合スコア36616

Okt

2023/08/04 14:37

ありがとうございますm(__)m 詳細に解説して下さり、「this」の仕組みが分かった気がします。ありがとうございました！！！

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

fun2からいきます
・fun2
アロー関数のためthisの参照位置が変わりそこにfun1はない
・fun3
参照されるthisはsetTimeoutが記載されているfun3になってしまうためfun3にfun1はない
・fun4
fun4の地点のthisはfun4が定義されているObjectが入る->_thisとして定義
setTimeout内でこれを使っているため正常動作

という感じです

投稿2023/08/04 03:22