矢印関数と一般関数でのthisの指向問題

5537 ワード

矢印関数と一般関数でのthisの指向問題
まずコードブロックを二つください.
                    var obj = {
                a:100,
                say :  function() {
                    console.log(this);//{a: 100, say: ƒ}
                    console.log(this.a);//100
                }
            }
            obj.say();

            var a =999;
            var obj = {
                a:100,
                say :  ()=> {
                    console.log(this);//Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
                    console.log(this.a);//undefined
                }
            }
            obj.say();
まず最初のコードブロックを見てください.中の関数はobjの一つの方法なので、thisはobjというオブジェクトを指すべきです.だから最初の出力はobjの全てのオブジェクトで、第二の出力はobjの中のaの値です.ここでは特別に声明します.もし関数がグローバル変数の中で直接windowを指すなら、対象となる方法は実行環境を指します.彼がいる対象です.
二つ目のコードブロックを見てください.矢印関数を使っていますので、中にはthisがないです.一番目の中のthisが出力される時は、関数の中にthisがあるかどうか探してみます.ないかを発見したら、ずっと上に探して、windowを見つけます.だから出力するのはwindowの中の値です.第二の出力結果はundefinedです.ここのthis空間は本当に存在します.ただ、this空間にはaという属性がありません.ですから、エラーはありません.ただ出力したのはundefinedです.エラーの状況は何ですか?例えば、aを探しに行った時、aは定義されていないことに気づきました.この時、間違いを報告するべきです.
コードがこのような場合:
            var a =999;
            var obj = {
                a:100,
                say :  ()=> {
                    console.log(this);//Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
                    console.log(this.a);//999
                }
            }
            obj.say();
最後の出力は999です.windowではaの値が定義されています.999ですから出力すべきは999です.window.aでまとめてみます.このような知識点は、まず対象を見つけて、thisの等価置換をすると分かりやすいと思います.例えば、obj.a window.a