11.자바스크립트[this-1,2]

1.자바스크립트의 this

자신이 속한 객체를 가리킴 

this 는 자신이 속한 객체를 가리키는 키워드로 자바스크립트의 함수와 관련이 있음

자바스크립트의 this 키워드는 함수가 어떻게 호출되었는가에 따라 바인딩되는 값이 달라진다는 ,

즉 값이 동적으로 결정

"바인딩되다"라는 표현은 주로 프로그래밍에서 특정 변수나 객체가 특정 값이나 함수에 연결되는 것을 의미합니다.

 

전역공간

window 객체는 웹 브라우저의 전역객체로 전역공간에 항상 존재하는 객체를 의미함

 

함수

• this 키워드는 자신을 포함하고 있는 함수가 어떻게 호출 되었는가에 따라 값이 달라짐
• this 키워드를 포함하고 있는 fuc함수를 호출한 객체인 윈도우 객체가 this에 바인딩이 됨

메서드

메서드 = 객체의 프로퍼티에 저장된 함수

함수를 메서드로써 호출하면 메서드를 포함하고 있는 객체 자체가 출력이 됨

메서드를 호출 했을 때 메서드의 호출문에 있는 점 바로 앞에 객체가 출력이 된다고 봐도됨

 

• this가 포함 된 함수인 print 메서드를 갖고 있는 newCafe 라는 객체의 프로퍼티들이 출력됨
• print 메서드를 호출 했을 때 점 바로 앞에 있는 객체가 출력이 됨

• 코드를 실행하면 전역 객체인 윈도우 객체가 출력됨
• 함수가 메서드로써 호출이 되면 무조건 이 메서드의 점 앞에 있는 객체 그 자체가 출력이 되는건 아닌가? 라고 생각한다면

※ this 키워드에 대한 설명을 다시 한번 생각해야함

this 는 자신이 속한 객체를 가리키는 키워드로 자신을 포함하고 있는 함수가 어떻게 호출 되었는가에 따라 가리키는 값이 달라지는 키워드이다

 

• 코드에서 this 를 포함하고 있는 print 함수는 메서드로서 호출된 것이 아니라 전역 공간에서 일반함수로 호출이 되었음myCafe 함수를 호출한 객체인 전역 객체, 윈도우 객체가 출력이 됨

this 는 함수가 선언된 위치나 방법에 영향을 받지 않고 무조건 함수가 호출된 방법에 따라 가리키는 값이 달라진다는 것을 기억해야함 

 

this-2

자바스크립트의 this 는 함수가 어떻게 호출되었는가에 따라 가리키는 값이 달라짐

 

생성자함수

• this 값으로는 생성자 함수를 통해 생성한 Cafe{} 라는 객체가 출력이 됨
• 생성자 함수의 this 는 생성자 함수가 새로 생성할 새로운 객체 즉, 인스턴스를 가리킴
• 인스턴스 (instance)는 객체 지향 프로그래밍 (OOP)의 핵심 개념 중 하나로, 클래스로부터 생성된 객체를 의미합니다

 

함수가 콜백함수로서 호출될 때 this는 어떠한 값을 가리키는지 알아보기

• 자바스크립트의 this 는 자신을 포함하고 있는 함수가 어떻게 호출되었는가에 따라 값이 달라짐
• setMenu 의 메서드의 this 는 getMenu라는 함수 내부에서 메서드로서 호출이 아닌 일반함수로서 호출이 됨
• 함수가 일반함수로서 호출되면 this는 전역 객체인 윈도우 객체를 출력함
• '핫초코는'는 웹 브라우저의 전역 객체인 윈도우 객체의 메뉴에 프로퍼티에 할당됨.

함수가 callback 함수로서 호출되면 callback 함수에 있는 this는 예상한 것처럼 동작하지 않고 this 값에 전역 객체인 window 객체가 바인딩 된다는 문제가 있음

 

 

자바스크립트의 this 는 함수의 호출 방식에 의해 값이 동적으로 바인딩이 되고
함수가 일반함수로서 그리고 콜백함수로서 호출 될 때의 this 는 전역 객체를 가리킴
함수가 함수가 메서드로서 호출되었을 때의 this 는 메서드를 포함하고 있는 객체를 가리키고
마지막으로 생성자 함수로서 호출되면 this는 생성자 함수가 새로 생성할 새로운 객체를 가리킴