데브코스에서 발표를 하게되었다..!Permalink

처음 JS를 공부할때 나를 헷갈리고 어렵게 했던 this에 대해서 어떻게 쓰는지, 왜 쓰는지, 왜 JS가 동적바인딩을 택한 것인지에대해서 살펴보는 발표를 하게되었다!

step0. 자네 이것(this)좀 아나?Permalink

JS에서 this는 무엇이고 어떻게 쓰며 왜쓰게 된걸까?

step1. 그래서 이게(this) 뭐야?Permalink

  1. this란?
    1. 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조 변수
  2. 그거 왜 써야되는데?
    1. 원의 반지름을 구하고 싶을 때 어떻게 코드를 짜실 건가요?
    2. 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 논리적인 단위로 묶은 자료구조입니다.
    3. 메서드 안에서는 자신이 속한 객체의 상태(프로퍼티)를 참조하고 변경할 수 있어야 합니다.
    4. 반대로 말하면 일반적으로 객체의 매서드 내부 또는 생성자 함수 내부가 아니면 this는 의미가 없다 그래서 strict mode 적용하며 일반 함수 내에서 this는 undefined가 바인딩 된다.
  3. this가 나타내는 값

    1. 호출 시 결정

      함수 호출 방법 this 바인딩
      일반 함수 호출 전역 객체
      메서드 호출 메서드를 호출한 객체
      생성자 함수 호출 생성할 인스턴스
      apply, call, bind 메서드를 이용한 간접 호출 바인딩해준 객체
      화살표함수 호출 가장 가까운 상위 스코프 중 화살표 함수가 아닌 함수의 this
    2. 스코프와 this는 결정방법과 반대1

      1. 스코프 : 선언시 정해짐
      2. this : 호출시 정해짐
      3. 어떠한 차이가 있길래??

step2. 왜 그게 되는데?Permalink

  1. JS의 코드가 동작하는 방식
    1. 소스코드 평가 → 실행컨텍스트 생성 → 소스코드 실행(런타임) → 실행컨텍스트에 반영
  2. 실행 컨텍스트가 뭔데?
    1. 코드를 실행하기 위해서는 스코프, 식별자, 코드 실행 순서 등의 관리가 필요하다. 이런 환경을 제공하고 실행 결과를 관리하는 영역이 실행 컨텍스트 이다.
  3. this 바인딩 과정
    1. 실행 컨텍스트가 생성 시 바인딩 된다. 즉, 호출 시 바인딩되는 정적 바인딩을 따른다
  4. 스코프와 this는 결정방법과 반대2
    1. 스코프는 소스코드를 포함하고있는 렉시컬환경 주소를 바인딩
    2. this는 자신을 호출한 객체를 바인딩

step3. JS는 왜 그런데? - 뇌피셜 주의Permalink

  1. this 문제점 없어??
    1. this는 동적 바인딩을 하기 때문에 this의 값이 예상한 값과 다를 수 있다.
      1. 메소드 내 일반함수 (전역함수)
      2. 콜백함수로 일반함수 (전역함수)
      3. 화살표 함수
      4. 클래스 내 this (인스턴스내 this - 인스턴스, 프로토타입 내 this -메서드처럼 .앞에있는 값이 this)
  2. 그래서 왜 this가 동적 바인딩 된건데?

    1. JS의 탄생 배경

      1. 사장 : 10일만에 만들수 있지?
      2. Brendan Eich : 예?
      3. 10일만에 탄생, 간단한 기능을 수행, 하드웨어 한계
        1. 그래서 상대적 가벼운 프로토타입채택
      4. 초기 js는 브라우저에서 사용자와의 상호작용, 웹 페이지의 내용 변경, 단순한 타이머 기능 등을 처리하기 위해 탄생

        1. 그래서 동적 바인딩 채택

          1. 웹 페이지 내에서 다양한 요소들과 상호작용할 때, 특히 이벤트 핸들링에서 요소에 따라 동적으로 상황에 맞게 작동하는 함수를 만들 수 있었기 때문

            • 예를 들어 이벤트 핸들링 시

              const button = document.getElementById("myButton");
              // 버튼에 클릭 이벤트 핸들러 추가
              button.addEventListener("click", function () {
                // this를 사용하여 이벤트를 발생시킨 요소를 참조
                this.innerHTML = "클릭되었습니다!"; // 버튼 텍스트 변경
                this.style.backgroundColor = "red"; // 버튼 배경색 변경
              });
              

              요런 코드를 짜야하기 때문 근데 우리는

              const button = document.getElementById("myButton");
              // 버튼에 클릭 이벤트 핸들러 추가
              button.addEventListener("click", function () {
                // this를 사용하여 이벤트를 발생시킨 요소를 참조
                button.innerHTML = "클릭되었습니다!"; // 버튼 텍스트 변경
                button.style.backgroundColor = "red"; // 버튼 배경색 변경
              });
              

              일케 하면 되지 않냐? 여러개에서 동일한 기능을한다면? 함수로 만들어야지 그럼 this 필요해짐

              const button = document.getElementById("myButton");
              
              function clickHandler() {
                this.innerHTML = "클릭되었습니다!"; // this는 clickHandler 함수를 가리킴
                this.style.backgroundColor = "red"; // this는 clickHandler 함수를 가리킴
              }
              
              // clickHandler 함수를 이벤트 핸들러로 등록
              button.addEventListener("click", clickHandler);
              

              이런 거를 편하게 하기 위해서 동적 바인딩을 채택함

    2. 정적 바인딩 VS 동적 바인딩
      1. 정적 바인딩 : 코드 작성 시 바인딩(), 예측 가능, 성능 향상, 디버깅 용이 / 유연성 부족
      2. 동적 바인딩 : 런타임 시 바인딩, 유연성, 재사용 용이 / 디버깅 빡셈, 성능 저하
    3. 그래서 this가 동적 바인딩 된다! 사실 JS의 변수 값들은 모두 정적 바인딩 이지만 this만 동적 바인딩된다.

발표자료Permalink

자세한 설명은 자료로 대체한다…!

그래서 이게(this)뭔데.pptx

태그:

카테고리:

업데이트:

댓글남기기