-
자바스크립트 this의 정의프론트엔드/JavaScript 2020. 9. 14. 05:54
자바 스크립트에서 'this'란 'this'를 포함하고 있는 함수가 어느 'context' 즉 어느 문맥에서 호출됐느냐를 가리키는 말이다.
사실 자바의 'this'와 달리 자바 스크립트의 'this'는 애매한 점이 많다.
자바는 함수 안에 있는 'this'라면 그 'this'는 함수 안에서만 작동했다.
하지만 자바 스크립트의 'this'는 조금 다르다.
해당 함수가 호출되는 객체가 어떤 것이냐에 this가 매번 바뀐다.
※ 참고로 렉시컬 스코프와 햇갈리지 않도록 한다. 렉시컬 스코프는 정적, 즉 함수의 선언 할 시점에서 스코프가 정해진다. 하지만 this는 객체에 종속된 개념이므로 자신이 어디서 어떻게 호출하느냐에 따라서 this는 동적으로 바뀐다.
<body> <script> var name = "영수"; // 변수 'name' 선언 function hello() { // 함수 'hello' 선언 var name = "정수" // 변수 'name' 선언 console.log(this.name+" "+this); } hello(); // "영수 [object Window]" 출력 </script> </body>모든 함수, 객체는 모두 전역 변수 'window' 객체 위에서 실행되고 종료된다.
그래서 전역 변수 내에서만 함수를 실행하고 'this'를 쓰면 'this'는 함수 안이 아닌 밖을 가리킨다.
즉 함수 바로 위의 window 객체에서 함수가 실행되기 때문에 'this'는 함수가 실행되는 'window'객체를 가리킨다.
<body> <script> var name = "영수"; // 변수 'name' 선언 function hello() { // 함수 'hello' 선언 var name = "정수" console.log(this.name+" "+this); } var obj = { name: "철수", a: this.name, b: hello, c: {name: "영희", c: hello}, d: { d: { name: "정수", d: hello } } } hello(); // "영수" 출력 console.log(obj.a); // "영수" 출력 obj.b(); // "철수 [object Object]" 출력 obj.c.c(); // "영수 [object Object]" 출력 obj.d.d.d(); // "정수 [object Object]" 출력 </script> </body>다음은 리터럴 객체를 보자.
리터럴 객체 'obj'의 'a'를 출력하면 'window' 객체의 'name'인 "영수"를 가리킨다.
왜냐면 리터럴 객체 'obj' 호출이 'window' 객체 위에서 이뤄지기 때문이다.
반면 'b'를 실행하면 'a'와 달리 '철수'가 출력된다.
왜냐면 'b'에 저장된 'hello' 메소드는 객체 'obj'이 'window' 객체 위에서 이뤄진다.
하지만 'hello' 메소드는 'obj' 객체 위의 'b'에서 이뤄진다.
그래서 'b'의 상위 객체인 'obj'에 있는 'name'에 저장된 '철수'를 가져와서 출력하는 것이다.
그 외 'c'는 '영희', 'd'는 정수를 출력한다.
기본적으로 'this'는 그 함수가 호출되는 시점에서 해당 함수가 포함된 객체의 'this'를 가리키는 것이다.
사실 설명은 이런데 실제로 'this'는 그 쓰임새나 상황에 따라서 가리키는 객체가 자주 변한다.
일반적으로 'this'는 'window'를 가리킨다. 이게 대부분이다.
다만 몇 가지 예외가 있다.
1. 위의 예처럼 객체 안에서 key 값에 함수를 할당해서 함수를 실행할 경우 'this'가 변한다.
즉 객체 프로퍼티로 접근하여 함수를 실행한 경우다.
2. new 연산자를 통해 새로운 객체를 생성하고 새 객체를 통해 함수 안에 접근하면 'this'가 변한다.
3. call, apply, bind로 함수를 호출했을 때 인자로 넘겨준 객체가 'this'로 변한다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트 Object 객체 (0) 2020.09.14 자바스크립트의 상속 (inheritance) (0) 2020.09.14 자바스크립트의 전역 객체(Global object) (0) 2020.09.14 자바 스크립트의 객체(Object) (0) 2020.09.11 자바 스크립트의 클래스(class)와 객체(Object) 활용 (0) 2020.09.11