<aside> 💡 FeedBack Note

</aside>

가혜님 에게 배운점

• 함수 호출하는 방식에 따라 결정되는 this

  1. 메서드 호출 ⇒ 메서드 내 this는 메서드를 호출한 객체가 바인딩

  2. 일반함수 호출 ⇒ 일반 함수 내 this는 전역객체 window가 바인딩

  3. 생성자함수 호출 ⇒ 생성자 함수 내 this는 생성할 인스턴스가 바인딩

  4. apply, call

     ⇒ 전달된 인수 내에 같은 프로퍼티가 존재한다면, 전달된 인수의 프로퍼티가 바인딩

     ⇒ 여기서 yourObject 객체 안에 value 프로퍼티가 없다면 undefined 발생

     const myObject = {
       value: 1,
       show() {
         console.log(this.value);
       }
     };
     
     const yourObject = {
       value: 3,
     };
     
     myObject.show(); // 1
     myObject.show.apply(yourObject); // 3
     myObject.show.call(yourObject); // 3
     

  ⇒ apply는 배열, call은 콤마로 구분된 인수 사용

  const myObject = {
    value: 1,
    add(value1, value2) {
      console.log(this.value + value1 + value2);
    },
  };
  
  const yourObject = {
    value: 3,
  };
  
  myObject.add(1, 2); // 4, this.value = 1, value1 = 1, value2 = 2
  
  myObject.add.apply(yourObject, [2, 10]); 
  // 15, this.value = yourObject의 value 값 3, value1 = 2, value2 = 10
  
  myObject.add.call(yourObject, 2, 10); 
  // 15, apply와 동일
  

재영님 에게 배운점

• 실행컨텍스트의 동작 원리

• 실행컨텍스트 스택의 동작 원리

      const x = 1;
  
      function foo (){
          const y = 2;
  
          function bar(){
              const z = 3;
              console.log(x + y + z);
          }
          bar()
      }
      foo()
  

  1. 전역변수 x와 전역함수 foo가 스택에 생성 (전역 컨텍스트)
  2. foo 함수 호출문을 만나 1번 스택은 잠시 멈추고, foo 함수의 코드가 스택에 생성 (foo 함수 컨텍스트)
  3. bar 함수 호출문을 만나 2번 스택은 잠시 멈추고, bar 함수의 코드가 스택에 생성 (bar 함수 컨텍스트)
  4. bar 함수 컨텍스트가 종료되면 멈췄던 2번 foo 함수 컨텍스트가 다시 실행
  5. foo 함수 컨텍스트가 종료되면 멈췄던 1번 전역 컨텍스트가 다시 실행되고 종료

  

이번 학습을 통해서 스스로가 배운 점

• 전역 객체를 명확하게 알 수 있었다.

<aside> 📢 퀴즈 준비!! 이전 내용 복습!!

</aside>