this

자스를 함수기반 언어인 듯 보이지만, 실제는 객체 지향 언어이다!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // this (이것)
 
const fthis = function(){ // 함수 선언 -> window 객체의 메소드 선언
    console.log("this", this);  // window
}

fthis();  // window.fthis();로 window가 생략되있어서 this는 window가 나옴

var ggg = "메롱";   // 변수 선언
alert(window.ggg);
</script>

Untitled

this가 맥락(context)에 따라 달라진다.

→ js개발자들이 난리 부르스를 한번 줌.

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // this (이것)

function fthis(){
    console.log("this", this);
    // this가 맥락(context)에 따라 달라짐!
    // js개발자들이 난리 부르스를 한번 줌.
}

fthis();  // window.fthis();로 window가 생략되있어서 this는 window가 나옴

var josh = {
    name:"조성희",
    exp:"진지"
}
josh.merong = fthis;    // 참조

josh.merong();
/* var ggg = "메롱";   // 변수 선언
alert(window.ggg); */
</script>

Untitled

****💡 this를 직접 제어할 수 있게, call,apply,bind를 만들어 줌

→ call이랑 apply는 둘중에 하나만 알아도 된다.

call

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // this (이것)
// this를 직접 제어할 수 있게, call,apply,bind를 만들어 줌

function fthis(pArg, pArg2){
    console.log("this", this, "매개변수", pArg, pArg2);

}

fthis();  // window.fthis();로 window가 생략되있어서 this는 window가 나옴

var josh = {
    name:"조성희",
    exp:"진지"
}

// 두번쨰부터 매개변수로 받음
**fthis.call(document, "전지혜로와용", "신국현");**

josh.merong = fthis;    // 참조

</script>

Untitled

apply