this(深化?)

1448 ワード
テキストリンク

≪イベント｜Events｜ldap≫

const header = document.querySelector('.header');
header.addEventListener('click', function() {
	console.log(this);
}

* 결과 document에서 가져온 태그가 결과로 나온다
  • addEventListenerのコールバック関数は呼び出しではなく宣言です.
  • 、これは関数呼び出し時に決定され、
  • の上でコードだけを見ると、実際にはこれが何なのか分からない
    • .
  • の公式文書では、addEventListenerは、イベントが発生したタグ
    • を指摘している.
  • ですのでaddEventのListenerは内部ではそうかもしれません
    const header = {
  addEventListener: function(envent, callback) {
      callback.call(this);
      callback.call(header);
  }
}

* 다음처럼 되어있을거라고 추론 할 수 있다

    イベント内のコールバック関数が矢印関数である場合?

    const header = document.querySelector('.header');
header.addEventListener('click', () => {
	console.log(this);
}

* 결과 window가 나온다
  • 矢印関数は親thisを指します.
  • 矢印関数の親をaddEventListenerとみなすことはできません
  • addEventListenerは関数呼び出しであり、addEventListenerのコールバック関数は関数宣言である.二人は全然違う!!

    • bind、apply、callの違い

  • a.bind(header)は、新しい関数を作成するためにheaderに変換します.
  • callとapplyは、新しい関数を作成して呼び出すと考えられ、
  • a.call(ヘッダ)==a.apply(ヘッダ)==a.bind(ヘッダ)()

    • では、CallとApplyの違いは?

  • callは2番目のパラメータを順番に送信し、applyは
    • を順番に送信する.
  • の最初のパラメータは両方ともこの
    • です.
    function add(a, b) {
	return a + b;
}

add.apply(null, [5, 8]); // 8
add.call(null, 5, 8); // 8
    HLAのクラス
    CSS