Day.11個のJavaScript自己診断(2021.08.16)

This
グローバル環境でのThis

console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

特定の関数またはオブジェクトで宣言された変数または関数を除いて、最も外側で宣言された場合、ブラウザはwindowというグローバルオブジェクトのpropertyを取得します.
グローバル環境のthisはブラウザのwindowを指します.
したがって、thisはグローバル環境ではwindowであり、グローバル環境で宣言されたすべての変数はwindowというグローバルオブジェクトのpropertyに入ります.
驚くべき事実🔥
上のコードから見るとaとthisb varまたはlet、constを使用して宣言されていない.これは、JavaScriptエンジンがグローバルオブジェクトのpropertyとしてデフォルトで生成されているためかもしれません.

a= 'window의 프로퍼티입니다.'
var b= 'window의 프로퍼티입니다.'
let c= 'window의 프로퍼티가아닙니다.'
const d= 'window의 프로퍼티가아닙니다.'

console.log(window.a); // window의 프로퍼티입니다.
console.log(this.a); // window의 프로퍼티입니다.
console.log(window.b); // window의 프로퍼티입니다.
console.log(this.b); // window의 프로퍼티입니다.
console.log(window.c); // undefined
console.log(this.c); // undefined
console.log(window.d); // undefined
console.log(this.d); // undefined

変数を宣言するコマンドを追加したりvarを追加したりしない場合は、windowに入るpropertyを確認できますが、constとletで宣言する変数はwindowのpropertyには入りません.
オブジェクト環境レコードには、コンストラクタ、関数、varキーワードとして宣言されたグローバル変数が含まれ、宣言環境レコードにはletおよびconstキーワードとして宣言されたグローバル変数が含まれます.では、letとconstとして宣言された変数にコンソールウィンドウでどのようにアクセスしますか?
仮説を立てた.
1.JavaScript自体はwindowのscopeチェーンを例外的な宣言環境レコードに設定していますか?
関数のThis

function obj(property) {
  this.property = property;
  this.test1 = function () {
    console.log(this);
  };
  this.test2 = function () {
    console.log(this);
    setTimeout(function () {
      console.log(this);
    }, 1000);
  };
  this.test3 = function () {
    (function () {
      console.log(this);
    })();
}

var instance = new obj("leo");

instance.test1(); // instance
instance.test2(); //노드js의 경우instance,setTImeout 브라우저의경우instance,window 
instance.test3(); //window

関数の内部では、関数を呼び出すオブジェクトによって異なります.
最初のtest 1関数では、instanceというオブジェクトが呼び出されるため、呼び出されるオブジェクトはinstanceであるため、これはinstanceになります.
2番目のtest 2関数では、instanceというオブジェクト呼び出しの関数はthisのみを出力し、settimeoutの役割を実行し、その関数はタスクキューを介してcallスタックで実行されるため、webapiによって呼び出されるため、このような結果が発生します.
3番目のtest 3関数では、test 2と同様にinspaceが使用されます.test 3の役割は、その関数を直ちに実行することであり、その関数は直ちに実行するウィンドウを指す.
Ahrow関数のthis

const obj = {
  test: function () {
    console.log(this); //obj
    (function () {
      console.log(this); // window
    })();
    (() => {
      console.log(this); // obj
    })();
  },
};

obj.test();

愛労関数には、これ自体のthisはありません.親関数のthisが継承されているので、親関数のthisを参照する必要がある場合は、使用したほうがいいです.Arow関数はES 6から出現する構文であり,以前はfunctionであった.prototype.bind()を使用してサブ関数に渡す方法.
コンストラクション関数(クラス)のThis

function Student1(name) {
  this.name = name;
}

class Student2 {
  constructor(name) {
    this.name = name;
  }
}

const leo = new Student1("leo");
const min = new Student2("min");

console.log(leo); //Student1 { name: 'leo' }
console.log(min); //Student2 { name: 'min' }

newと出会うコンストラクション関数では、thisは新しく作成されたインスタンスになります.
に感銘を与える
今日は自己診断期間中に学んだJavaScriptの日です.知っているのに単純ではなく、歪んだ部分で混同されていることが多い.特に関数では,即時実行関数ではthisは全く知らない.再び復習の気持ちで、一つ一つコードで実行し、基礎を築き直しました.
しばらくして、このような複雑なthisを見て、思い出せないかもしれません.でも今日はこれを何倍も温めて楽になりました.初めて直面するthisと、今日再び直面するthisは全く違う存在です.