🦎 [深潜学習]4-22this

15409 ワード
テキストリンク

1.関数呼び出しの4つの方法、それぞれの場合、thisは値を指しますか?


一般的な関数、メソッド呼び出し、およびコンストラクション関数(ただし、関数タイプの場合にのみオブジェクトが作成される場合は、このオブジェクトは自動的に割り当てられます.ただし、クラスの場合は異なります!個別にバインドする必要があります).
792 p eventhandlerイベントを実行する要素dom要素(onclickタグ付き)にバインドします.またこれを割り当てます.classの場合this.=fでは実行できないのでarrow関数を使用...p792

2 . 一般的な関数呼び出しのコールバック関数内部のthisとは何ですか?


:callbackはwindowでなければならないので、コールバックの2番目のパラメータは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.callback,2.this arg...(割り当て)
1.callbackに()=>{}を入れます.バインドされていません!
NとM(7)
JavaScriptコードの場所