this

私が国民学校2 3年生の時(1992年頃?)3-4人でグループを組んで、順番に各家庭で英語を勉強するのが流行しています.その時の核心資料は英語のビデオだった.(今はなかなか見つからないビデオテープですが…)他の私は少しも覚えていませんが、変な動物が変な英語の歌を歌う場面をかすかに覚えています.△この動物はいったい何だろう.

「This is a banana」、「This is a apple」の歌と英語でいろいろな果物が紹介されています.この時習ったメロディーと「This is...」文章は私の頭の中に深く刻まれている.ハングルで解釈すれば「これ」と言ってもいいですが、英語ではもっと全面的に使われているようです.
では、プログラミングでthisという言葉はどんな役割を果たしているのでしょうか.いいえ、より小さなプログラミング>JavaScriptでは、thisがどのような役割を果たしているのかを理解してみましょう.
Techsith YouTube-JavaScript thisキーワード解釈|Global Scope、Object、Function、Prototype、Method、Classでの初期にこれについて興味深い説明がありました.
例えば、Jjuiceの家は済州島済州市済州洞にあり、35年前に建てられた.古い家なので、水道管から水が漏れ、ボイラーも壊れていて、修理が必要です.
水利会社に電話してJjuiceの家を定義した後(住所やその他の事項など)「この家の水道管が壊れている...」そう言います.ここは「この家」と呼ばれていますが、「this」で代用できます.
私たちは、「済州島済州市済州洞(チェジュド·チェジュシ·チェジュドン)の主人は35年間、Jjuiceの家の水道管が壊れている」、「済州島済州市済州洞(チェジュド·チェジュシ·チェジュドン)の主人は35年間、Jjuiceの家のボイラーが壊れている」と言う.言わないこの家、つまり「this」という言葉の略称です.
JavaScriptでは、このような役割も果たしていますか?全て対象からなるJavaScriptなので、「済州島済州市済州洞にある35年間のJJJuice」の対象に「故障ボイラー」のpropertyがあれば、その対象の情報を修理業者に変数を教える際に、このキーワードを使ってthis.고장난 보일러=trueの情報を伝えることができます.
javascriptのこれは本当に魅力ですか?!敵と言える.(正直、私にとってJavaScriptのthisの魅力よりも混同しやすいです.)これは状況によって変わりますが、いろいろな方法があります?!ここで私が欲しいオブジェクトを指定することもできます.この部分をもっと詳しく知りましょう.

場合によっては、これは?(ブラウザ環境)

■世界中で

Googleクロムインタフェース>開発者ツール>コンソールバーで検索します.

console.log('this는 누구일까요?:' + this);

[object Window]です.
これは、ブラウザ環境では、最上位オブジェクトがウィンドウであり、ウィンドウオブジェクトにはconsoleというプログラムが格納されているためです.
Node環境では、最上位オブジェクトはglobal objectです.
<😮JJJuiceラボ>
①thisに登録/windowに登録/変数として登録

this.house = '제주도 제주동 제주시 35년된 JJuice집';
window.home = '제주도 제주동 제주시 35년된 JJuice집';
const jjuiceHouse = '제주도 제주동 제주시 35년된 JJuice집';

console.log(house); //'제주도 제주동 제주시 35년된 JJuice집'
console.log(home); //'제주도 제주동 제주시 35년된 JJuice집'
console.log(jjuiceHouse); //'제주도 제주동 제주시 35년된 JJuice집'

console.log(this.house); //'제주도 제주동 제주시 35년된 JJuice집'
console.log(this.home); //'제주도 제주동 제주시 35년된 JJuice집'
console.log(this.jjuiceHouse); // undefined

上のコードでは、これがwindowです.
●this.house=...とは、Windowsオブジェクト上でhouse propertyに値を登録することを意味する.
●const jjuiceHouse = ...とは、windowsオブジェクトにjdrugeHouse Propertyとして登録するのではなく、コードの最初の実行時に作成されたグローバルコンテキストオブジェクトにvariablePropertyとして登録することを意味する.したがって、this.jjuiceHouseの結果値が定義されていません.

'전역 컨텍스트 객체': {
	'변수 객체' : {
		variable: ['jjuiceHouse'],
	},
	'스코프 체인': ['전역 변수객체'],
	'this': window,
}

変数がconstではなくvar jjuiceHouseの場合、this.jjuiceHouse=...の結果値はundefined以外の正常値を出力します.(varと宣言された変数表示値をpropertyとしてwindowオブジェクトに登録)
実際の符号化では、this.またはwindow.がこのようにproperty値を登録することはほとんどありません.これにより、次のコンテンツに進みます.

■関数のthisとは？

通常、関数は次のコードのように宣言され、実行されます.

function callRepairShop() {
	console.log(this); 
}
callRepairShop();//window

ここのthisは上のglobal領域のthisと同じようにwindowを指します.
<🙄どうしてこんなことになったのでしょうか.>
・図に示すように、const jjuiceHouse=..グローバルコンテキストオブジェクト>変数propertyに登録されているように、グローバルに宣言された関数function callRepairShop(){}もグローバルコンテキストオブジェクト>変数propertyに登録されている.
・例えば、const jjuiceHouse=..およびfunction callRepairShop() {}が、順番にグローバル領域として宣言されると仮定する.

const jjuiceHouse = '제주도 제주시..';
function callRepairShop() { }

・上記のコードをグローバルコンテキストオブジェクトとして表す.

'전역컨텍스트': {
	'변수 객체': {
		variable: [ {jjuiceHouse:'제주도..'}, {callRepirShop:'function'}]
	},
	'스코프 체인': ['전역 변수객체'],
	'this': window
}

「callRepairShop()」関数を含むのは、Windowsを指すグローバルコンテキストです.
JavaScriptでは、グローバルコンテキストだけでなく、関数呼び出し時にコンテキストを作成する関数コンテキストも存在します.(つまり、関数が実行されると、「関数コンテキスト」が作成され、次のコードのように誰を指すかが決定されます.)

//callReairShop(); 함수 실행시
'callRepairShop함수 컨텍스트': {
	'변수객체': { variable: null },
       '스코프체인': {['callRepairShop변수객체','전역 변수 객체']},
	 this: window
}

椺「関数コンテキスト」は関数の実行時に生成されますが、「スキャンチェーン」は関数宣言時に範囲を指定します.->「レクシー・カルスコフ」とも呼ばれています.
<😮JJJuiceラボ>
①関数内で内部関数を宣言して実行する場合は?

function outer() {
	console.log('outerFunction' + this);
	function inner() {
		console.log('innerFunction' + this);
	}
	inner();
}
outer();

外部関数も内部関数もwindowを指します.(「グローバルオブジェクトをthisにバインドする」のがより正確ですが、分かりやすくするために「windowを指す」という言い方を使いました.)
②「use strict」厳格モードの場合は?

'use strict';
function fn() {
	console.log('outerFunction:' + this);
}
fn();

これは未定義です.
厳密なモードでは、これは定義されていません.どうしてこんなことになったの?

■方法のthisとは？

JavaScriptオブジェクトでは、異なるプロパティだけでなくメソッドも登録できます.