[2022.04.18]JavaScriptの一般的なthisの意味


イベントリスナー、コンストラクション関数、ライブラリなどは議論されていません.

this


JavaScriptのthisは、他の言語の動作とは少し異なります.
JavaScriptの厳格モード('use strict')と非厳格モードでは、thisの意味も少し異なります.
これは呼び出しの方法によって決まります.

1.この出力です

console.log(this);
コンソールにthisを直接出力すると、windowが出力されたオブジェクトが表示されます.
これは基本的にthisがwindowを指していることがわかります.

2.オブジェクトメソッドのこの出力

const test = {
  fc: function () {
    console.log(this);
  },
};

test.fc();
上記の形式で記述すると、オブジェクトのメソッド呼び出しが内部でこの値を変更するため、指示オブジェクトが出力されます.(メソッドが属するオブジェクトがこの値になります.)
ただし、下図に示すように、thiswindowを指す.
const test = {
  fc: function () {
    console.log(this);
  },
};

test.fc(); // fc

const test2 = test.fc;
console.log(test2()); // window
test 2では、ウィンドウを指すtestオブジェクト内のメソッドが呼び出されます.
すなわち、thisは、呼び出し時に関数であるかオブジェクトであるかの方法によって変更される.
ライブラリまたはイベントリスナーを使用すると、内部で変更される可能性があります.

もしそうであれば、オブジェクト内のオブジェクトメソッドはどのように出力されますか?

const test = {
  innerTest: {
    innerFc: function () {
      console.log(this);
    },
  },
};

test.innerTest.innerFc(); // test.innerTest
console.log(test.innerTest);
このコンテンツを出力するメソッドを含むテスト.出力指示innerTestが表示されます.すなわち、外部オブジェクトtestオブジェクトではなく内部オブジェクトを表します.

arrow関数はいかがですか?

const test = {
  fc: () => {
    console.log(this);
  },
};

test.fc();
オブジェクト内のメソッドでthisを出力してみます.
出力window.
const test = {
  innerTest: {
    innerFc: () => {
      console.log(this);
    },
  },
};

test.innerTest.innerFc(); // window
console.log(test.innerTest); 
オブジェクト内のオブジェクトメソッドでthisを出力してみます.
同様にwindowを出力した.
ただ、関数と矢印関数の違いはここではっきりと表現されています.thisが指す違いです.

一般関数と矢印関数の違い


矢印関数(arrowfunction)は、この値を関数外のthisに直接使用します.

3.この出力は関数にあります

function test() {
  console.log(this);
}

test();
関数を直接宣言および呼び出しても、windowに出力されます.
ただし、厳格モードであれば('use strict';)、undefinedが出力される.

実際、1~3回目に見たケースは同じ意味です。


グローバル変数や関数を宣言するとwindowというグローバルオブジェクトに含まれます.その結果、thisを出力しようとするか、通常の関数でthisを出力しようとすると、私を含むオブジェクトwindowが表示されます.
var 변수 = '변수입니다';

function 함수() {
  console.log('함수입니다.');
}

console.log(변수); // 변수입니다.
console.log(함수()); //함수입니다.

console.log(window.변수); //변수입니다.
console.log(window.함수()); //함수입니다.
上記のコードでは、ペーストwindow.の出力と非ペーストの出力の結果値は同じである.(*ただし、上記のコードで変数を宣言したときにvarではなくletまたはconstと宣言した場合、window.변수の値はundefinedです.参照してください.
varキーワードとして宣言されたコンテンツだけがwindowオブジェクトに関連付けられます.
window : {
	// 이 안에 선언한 것과 같다는 의미
}
したがって、オブジェクトを作成し、そのメソッドでthisを出力すると、thisを含むオブジェクトが現れ、これは同じ現象と見なすことができます.
要旨:これは自分のオブジェクトを含むことを意味します.
したがって,上記1号から3号までの事例は事実上同じ意味を示している.
参考資料
MDN this
Zeroch Blog-JavaScriptのこれは何ですか?