This - 코드종🔔님:)

김민재·2021년 8월 15일

키워드 심화 공부

TIL, Core JavaScript

목록 보기

1/11

*🔐Study Keyword :

This와🔑 bind🗝️ 참 쉽죠잉!

-WHAT IS❓

자바스크립트에선 선언할 때 결정되는 것 (대표적으로는 클로저)이 있고
호출 할 때 호출하는 방식에 따라 결정되는 것의 대표적인 놈(?)이 this다.

대부분의 경우 1> this의 값(바인딩)은 함수를 호출하는 방법에 의해 결정되지만

함수의 this 값이 함수가 어떻게 호출되었는지와 무관하게 2> this를 설정할 수 있는 bind 메서드 녀석(?)도 있다.

-HOW TO USE❕❓

1> `this`!

<script>
const someone = { // 객체 안에 프로퍼티와 메서드 존재
  name: 'jamie',
  whoAmI : function(){
  console.log(this)
  }
};
// Q1. whoAmI 함수를 호출한 녀석?
someone.whoAmI();  // A1. someone, {name: "jamie", whoAmI: f}
</script>
A. 1번> whoAmI() 호출한 녀석, this는 바로 메서드를 호출한 someone 객체로
1>메서드 호출 방식으로 호출 하였다.
=> 이처럼 this는 호출하는 방식, 즉 호출을 누가 했느냐에 따라 결정된다.
<script>
const someone = { // 객체 안에 프로퍼티와 메서드 존재
  name: 'jamie',
  whoAmI : function(){
  console.log(this)
  }
};
// Q2. myWhoAmI 함수를 호출한 녀석?
const myWhoAmI = someone.whoAmI;
myWhoAmI(); // A2. window
</script>
A. 2번> myWhoAmI()호출한 녀석, this는 바로 global 객체, window로 객체의 메서드를 변수에 할당하여 2>일반 함수로서 호출 방식으로 호출하였다.
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>page title</title>
</head>
<body>
  <h1>JAMIE</h1>
  <Button id="btn"><h2>Hello</h2></Button>
  <script>
  const someone = { // 객체 안에 프로퍼티와 메서드 존재
    name: 'jamie',
    whoAmI : function(){
    console.log(this)
    }
  };
  const btn = document.getElementById('btn');
  // Q3. someone.whoAmI를 호출한 녀석?
  btn.addEventListener('click', someone.whoAmI); 
  // <Button id="btn"><h2>Hello</h2></Button>
  </script>
</body>
</html>
A. 3번> HTML 문서에 id 'btn'의 Button 태그로 버튼을 만들어 버튼을 클릭 시 someone.whoAmI를 호출한 녀석, this는 바로 HTMLButtonElement(btn)이다.

이는 btn에 ~~someone의 whoAmI가 아닌~~ whoAmI 함수만 넘.긴.것과 동일해
즉, btn.addEventListener('click', myWhoAmI), ~~myWhoAmI 호출한 게 아닌~~ 넘.긴.것과 동일하다.
=> 함수를 호출한 녀석은 btn으로 클릭시 넘긴 함수를 호출하라 명령을 내린 놈(?)이다.

2> `bind`!

그러나 호출하는 것과 무관한게 this를 고정시키는 메소드 녀석이 bind이다.
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>page title</title>
</head>
<body>
  <script>
    const someone = {
      name: 'jamie',
      whoAmI : function(){
      console.log(this)
      }
    };
    // Q4. bindWhoAmI 호출한 녀석은?
    const bindWhoAmI = myWhoAmI.bind(someone)
    bindWhoAmI(); //  { name: "jamie", whoAmI: f}
    btn.addEventListener('click',bindWhoAmI);  // { name: "jamie", whoAmI: f}
     </script>
</body>
</html>
</head>
A. bindWhoAmI를 호출한 녀석은 bind 메서드가 넘긴 인자 녀석(?)으로 바로 **someone 객체다.

bind 메서드 녀석은 호출한 녀석과 무관하게 무조건 인자로 넘긴 녀석을 this로 고정시켜버린다.

#[CORE]

=> 대체 누.가.호.출했어?!

*💡conclusion

자바스크립는 선언할 때 결정되는 것과 호출 할 때 결정하는 것이있는데 이 호출할 때 결정되는 녀석이 바로 this로 호출한 놈, 호출한 객체를 의미한다.

이 this를 예외적으로 묶어줘 고정할 수 있는 녀석이 바로 bind이다.

#📑Study Source

코드종님 - https://www.youtube.com/watch?v=PAr92molMHU&t=310s

김민재

자기 신뢰의 힘을 믿고 실천하는 개발자가 되고자합니다.

다음 포스트

This - 코드종🔔님:)

TIL, Core JavaScript

*🔐Study Keyword :

1> `this`!

2> `bind`!

#[CORE]

*💡conclusion

#📑Study Source

Stack, Queue, event loop - 애플코딩🍎님:}

0개의 댓글

This - 코드종🔔님:)

TIL, Core JavaScript

*🔐Study Keyword :

1> this!

2> bind!

#[CORE]

*💡conclusion

#📑Study Source

Stack, Queue, event loop - 애플코딩🍎님:}

0개의 댓글

1> `this`!

2> `bind`!