🦎 [λ”₯λ‹€μ΄λΈŒ μŠ€ν„°λ””] 4th- 22. this

이지·2021λ…„ 9μ›” 21일
0

DeepDive

λͺ©λ‘ 보기
5/13

1. ν•¨μˆ˜ 호좜의 4가지 방법과, 각각의 경우 this κ°€ κ°€λ¦¬ν‚€λŠ” 값은?

μΌλ°˜ν•¨μˆ˜, λ©”μ„œλ“œν˜ΈμΆœ , μƒμ„±μžν•¨μˆ˜(단, ν•¨μˆ˜ν˜•μΌλ•Œλ§Œ 객체λ₯Ό μƒμ„±ν•˜λ©΄ thisκ°€ μžλ™μœΌλ‘œ ν• λ‹Ή. 그런데, ν΄λž˜μŠ€μΌλ•ŒλŠ” 닀름! μ΄λ•ŒλŠ” λ³„λ„λ‘œ λ°”μΈλ”©ν•΄μ€˜μ•Ό 함.)

792p eventhandler μ΄λ²€νŠΈκ°€ 싀행될 μš”μ†Œ domμš”μ†Œ (onclick 이 λ‹¬λ €μžˆλŠ” νƒœκ·Έ) 에 바인딩.. 별도 this λ₯Ό ν• λ‹Ήν•΄μ€˜μ•Ό. class μΌλ•Œ this. = f μΌλ•Œ 싀행이 μ•ˆλ˜μ–΄μ„œ arrow function 둜.. p792

2 . μΌλ°˜ν•¨μˆ˜λ‘œ 호좜된 μ½œλ°±ν•¨μˆ˜ λ‚΄λΆ€μ˜ thisλŠ” 무엇을 κ°€λ¦¬ν‚€λŠ”κ°€?

: callback 은 무쑰건 window, κ·Έλž˜μ„œ 콜백 λ‘λ²ˆμ§Έ μΈμžμ— binding option ν•„μˆ˜! 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    const arr = [1, 2, 3];
    const obj = {
      increase(e) {
        return console.log(this);
      },
    };
    arr.forEach(obj.increase) // window binding 
    arr.forEach(obj.increase, arr); // arr binding
  </script>
</html>

3. λ²„νŠΌ 1,2,3,4λ₯Ό ν΄λ¦­ν–ˆμ„ λ•Œ μ‹€ν–‰ κ²°κ³Όλ₯Ό λ§ν•΄λ³΄μ‹œμ˜€.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button
      class="button1"
      onclick="(() => console.log(this))(); handleClick1();"
    >
      0
    </button>
    <button class="button2" onclick="handleClick2(event)">0</button>
    <button class="button3">0</button>
    <button class="button4">0</button>

    <script>
      function handleClick1() {
        console.log(this);
      }
//1. button1, window
첫번째 ν•¨μˆ˜μ‹€ν–‰λ¬Έ μ—μ„œλŠ” 인자둜 thisλ₯Ό λ°”λ‘œ μ „λ‹¬ν•˜κΈ° λ•Œλ¬Έμ—, button1 이 좜λ ₯. 
λ‘λ²ˆμ§Έ μ‹€ν–‰λ¬Έμ˜ κ²½μš°μ—λŠ” μΌλ°˜ν•¨μˆ˜μ•ˆμ—μ„œ μ‹€ν–‰λ˜λŠ” μΌλ°˜ν•¨μˆ˜λ‘œ this λŠ” μ „μ—­ 객체λ₯Ό 가리킴.  

      const handleClick2 = (e) => {
        console.log(e);
        console.log(this);
      };
// 2. click event 객체, button2 => window : ν™”μ‚΄ν‘œ ν•¨μˆ˜μ˜ μƒμœ„ μŠ€μ½”ν”„ μžμ²΄λŠ” this! 
// μ¦‰μ‹œμ‹€ν–‰λ¬Έ ? ν•¨μˆ˜λ‘œ 바인딩? 일반 ν•¨μˆ˜ μ•ˆμ— arr func ..  

      const $button3 = document.querySelector(".button3");
      const $button4 = document.querySelector(".button4");

      $button3.onclick = function () {
        console.log(this);
      };

// 3. button3 => μΌλ°˜ν•¨μˆ˜μ§€λ§Œ.. λ©”μ„œλ“œλ‘œ 싀행이 되기 λ•Œλ¬Έμ— binding, λ©”μ„œλ“œ ν˜•μ‹μœΌλ‘œ.. ν• λ‹Ή.
// () => {} λ©΄ window

      $button4.addEventListener("click", () => {
        console.log(this);
      });

// μΌλ°˜ν•¨μˆ˜ ν˜•νƒœλ‘œ 바인딩 되면 λ©”μ„œλ“œ ν˜•μ‹ 바인딩 λ•Œλ¬Έμ—.. button4 , ν™”μ‚΄ν‘œν•¨μˆ˜λŠ” 바인딩 μ•ˆλ¨.
// 4. window  일반 ν•¨μˆ˜λ©΄ button4  μ•„λ‹ˆλ©΄ window
    </script>
  </body>
</html>

λ²ˆμ™Έ, μ½œλ°±ν•¨μˆ˜μ˜ μΈμˆ˜μ „λ‹¬.
ex. foreach (1. call back, 2. this arg .. (ν• λ‹Ή))
1. call back 에 ()=> {} λ„£μœΌλ©΄.. 바인딩 μ•ˆλ¨!

profile
이지
μ΄μ§€ν”Όμ§€λ ˆλͺ¬μŠ€ν€΄μ§€πŸ‹
이전 포슀트

🦎 [λ”₯λ‹€μ΄λΈŒ μŠ€ν„°λ””] 3rd- 40. 이벀트 ν•Έλ“€λŸ¬

λ‹€μŒ 포슀트

🦎 [λ”₯λ‹€μ΄λΈŒ μŠ€ν„°λ””] 5th- 22. Class

0개의 λŒ“κΈ€

κ΄€λ ¨ μ±„μš© 정보