Java Script | this

목차

1. this가 뭔가요? 🌊
2. this 바인딩이란? 🌊
3. this는 동적으로 바인딩이 된다고 하는데 바인딩되는 객체가 어떻게 다르나요?
4. this의 사용

1. this가 뭔가요?

• 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있음
• 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있음
• 단 this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정

2. this 바인딩이란?

• 바인딩이란 식별자(변수)와 값(원시 값 또는 객체)을 연결하는 과정을 의미
  Ex. 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것
• this 바인딩은 this(키워드로 분류되지만 식별자 역할)와 this가 가리킬 객체를 바인딩하는 것

3. this는 동적으로 바인딩이 된다고 하는데 바인딩되는 객체가 어떻게 다르나요?

함수 호출 방식	this 바인딩
일반 함수 호출	전역 객체(window/ global)
콜백 함수 호출	전역 객체(window/ global)
내부 함수 호출	전역 객체(window/ global)
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 (미래에) 생성할 인스턴스
Function.prototype.apply/call/bind 메서드에 의한 간접 호출	Function.prototype.apply/call/bind 메서드에 첫 번째 인수로 전달한 객체

4. this의 사용

1. 전역에서 선언된 함수에서의 this

   • 예시 1 : function → global (window, global) 인 경우

     function myFn() {
       return this;
     }
     
     myFn(); // window 객체 출력
     

   • 예시 2 : new 연산자를 사용하여 생성자 함수 방식으로 인스턴스를 생성한 경우

     function MyFn() {
       this.title = "Hello World!";
       return this;
     }
     // new 연산자를 이용해서 새로운 객체를 얻는다.
     const myfn = new MyFn();
     myfn; // MyFn {title: 'Hello World!'}
     

     
     

2. 객체의 메소드 함수에서의 this

   • 예시 1 : method → obj인 경우

     const fn = {
       title: "Hello World!",
       showTitle() {
         console.log(this.title);
       },
     };
     fn.showTitle(); // 'Hello World!'
     

   • 예시 2 : 고차 함수의 콜백함수 안에서 this는 콜백함수가 일반 함수이기 때문에 전역 객체를 참조

     const fn = {
       title: "Hello World!",
       tags: [1, 2, 3, 4],
       showTags() {
         this.tags.forEach(function (tag) {
           console.log(tag);
           console.log(this); // window
         });
       },
     };
     
     fn.showTags();
     
     // 1
     // window 객체 출력
     // 2
     // window 객체 출력
     // 3
     // window 객체 출력
     // 4
     // window 객체 출력
     

this는 이처럼 어떤 위치에 있느냐, 어디에서 호출하느냐, 어떤 함수에 있느냐에 따라 참조 값이 달라지는 특성이 있기 때문에 사용할 때 주의가 필요함

---

출처

this
[JavaScript] this 란 무엇일까?