☝️ this에 대하여 알아보자
오징어전문점이라는 변수에 eat 이라는 프로퍼티가 있고 함수가 할당되어 있다.
그 함수는 console.log("맛있어" , this.name);
을 실행하는데 저기서 this는 자신이 속한 객체 몸뚱아리를 가리키기 때문에
this.name = 오징어볶음
그러니까
오징어전문점.eat(); 으로
메소드를 실행하면
잘 실행되는 것을 볼 수 있다.
그럼 저 함수는 저 객체안에 있으니까 다른 객체에서 대입하여 사용이 불가할까?
아니다, 대입할 수 있단다. 왜?
"함수"는 객체에 묶여 있지 않다. 단지 객체가 함수를 참조한다.
그러면 다른 객체에 대입하여 사용해보자.
그리고 나서 김밥천국의 property에 저 오징어전문점의 eat을 대입해보자
김밥천국.eat = 오징어전문점.eat;김밥천국이라는 객체에 eat이라는 프로퍼티를 만들고
저 오징어전문점 객체에 있는 eat메소드를 대입해 주었다.
어떤일이 일어났나 ?
eat 함수 안의 this가 오징어전문점 안에 있었을때는 오징어 전문점을 가리켰지만
이제 eat함수가 김밥천국 객체안에 들어가서는 this가 그 김밥천국을 가리키게 되었다.
그렇기 때문에
this.name 은 김밥천국의 name, "쫄면" 이 되는 것이다.
"맛있어""오징어볶음" ===> "맛있어""쫄면"
이처럼 함수는 호출될때의 상황에 따라서 this가 가리키는 객체가 달라지는 것이다.
함수 앞에 어떤객체를 붙여서 호출하면 this는 그 객체를 가리킨다.
만약 this앞에 객체가 없다면 ?
그 this는 최상위코드레벨로서 전역객체인 window객체를 가리킨다.
역시 오징어전문점으로 확인해보자
'
먹다 라는 변수에 오징어전문점의 함수인 eat 메소드를 할당하였다.
그리고 나서
비교하기 위해
두 종류의 함수를 실행시켜보았다.
오징어전문점.eat(); // '맛있어''오징어볶음'
먹다(); // '맛있어' ' '=> this가 가리키는게 오징어전문점이 아니기 때문에 전역객체를 가리키고 있다.
자 그럼 전역을 가리키고 있다면 전역변수 name을 선언해서 값을 할당하면?
먹다라는 변수에 할당된 함수안에 있는 this는 전역객체를 가리키고
전역에서 name이라는 변수에 값을 할당해주면 그
this.name의 값은 '마라탕' 이 되는 것이다.
