[2022.04.18]JavaScriptの一般的なthisの意味
12399 ワード
イベントリスナー、コンストラクション関数、ライブラリなどは議論されていません.
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();
上記の形式で記述すると、オブジェクトのメソッド呼び出しが内部でこの値を変更するため、指示オブジェクトが出力されます.(メソッドが属するオブジェクトがこの値になります.)
ただし、下図に示すように、this
はwindow
を指す.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のこれは何ですか?
Reference
この問題について([2022.04.18]JavaScriptの一般的なthisの意味), 我々は、より多くの情報をここで見つけました
https://velog.io/@reasonz/2022.04.18-자바스크립트-일반적인-this의-의미
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
console.log(this);
const test = {
fc: function () {
console.log(this);
},
};
test.fc();
const test = {
fc: function () {
console.log(this);
},
};
test.fc(); // fc
const test2 = test.fc;
console.log(test2()); // window
const test = {
innerTest: {
innerFc: function () {
console.log(this);
},
},
};
test.innerTest.innerFc(); // test.innerTest
console.log(test.innerTest);
const test = {
fc: () => {
console.log(this);
},
};
test.fc();
const test = {
innerTest: {
innerFc: () => {
console.log(this);
},
},
};
test.innerTest.innerFc(); // window
console.log(test.innerTest);
function test() {
console.log(this);
}
test();
var 변수 = '변수입니다';
function 함수() {
console.log('함수입니다.');
}
console.log(변수); // 변수입니다.
console.log(함수()); //함수입니다.
console.log(window.변수); //변수입니다.
console.log(window.함수()); //함수입니다.
window : {
// 이 안에 선언한 것과 같다는 의미
}
Reference
この問題について([2022.04.18]JavaScriptの一般的なthisの意味), 我々は、より多くの情報をここで見つけました https://velog.io/@reasonz/2022.04.18-자바스크립트-일반적인-this의-의미テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol