JavaScriptベースのthisはいったいどこを指しているのか


これまでフロントエンドの開発者が仕事を探して面接してきたポイントですが、これはいったいどこが神聖なのかについてお話しします.
ECMAScriptでは、thisキーワードは現在の実行環境のthis Bindingとして実行する.
MDNは、ほとんどの場合、関数の呼び出しがthisの指向を決定すると書いている.
簡単に言えば、thisの指向は呼び出し時に決定されるため、thisは実行期間バインドの特性を有する.
グローバル実行コンテキスト:
グローバル実行コンテキストでは、thisの指向はwindowです.
console.log(this === window)    //    true

ブラウザではthiswindowオブジェクトに等価です.グローバル変数を宣言すると、これらの変数はthisのプロパティとして使用されます.
関数実行コンテキスト:
関数実行コンテキストでは、thisの指向は関数の呼び出し方法に依存します.
function test() {
    return this === window
}
test()    //    true

直接呼び出すと、これはグローバルwindowを指します.
var obj = {
    name: 'cat',
    age: 3,
    say: function () {
        console.log(this.name)
    }
}
obj.say() //    cat

呼び出したオブジェクトを指し、ここでthisが指すオブジェクトはobjである.
コンストラクション関数のthis:
コンストラクション関数の作成するオブジェクトには、次の操作があります.
  • 新規オブジェクトの作成
  • thisをこのオブジェクト
  • に向けます.
  • オブジェクトに付与(属性、メソッド)
  • this
  • を返します
    したがって、thisは、作成されたこのオブジェクトを指します.
    function Person(name){
      this.name = name;
      this.age = 25;
      this.say = function(){
        console.log(this.name + ":" + this.age);
      }
    }
    var person = new Person("axuebin");
    console.log(person.name); // axuebin
    person.say(); // axuebin:25

    DOMイベント処理関数:thisは、開始イベントハンドラによってバインドされたDOMノードであるトリガイベントの要素を指す.
    var ele = document.getElementById("id");
    ele.addEventListener("click",function(e){
      console.log(this);
      console.log(this === e.target); // true
    })

    ここのthisはe.target.
    矢印関数のthis:矢印関数は独自のthis, thisを作成しません.したがって、以下のコードでは、setIntervalに渡される関数内のthisは、閉じた関数のthisと同じ値である.
    function Person(){
      this.age = 0;
      setInterval(() => {
        this.age++; // |this|       p   
      }, 1000);
    }
    var p = new Person();

    これは嫌なthisがどこを指しているかの説明で、簡単ですが、無視しやすいです...