[JavaScript]This(混同のサンプルセット)

ソース:人間JSエンジン-コールスタックとなり、スコフチェーン、本編

functionのthis VS矢印functionのthis

const obj = {
  name: "zerocho",
  sayName: function () {
    console.log(this.name); // zerocho
    
    function inner() {
      console.log(this.name); // undefined
    }
    inner();
    
   	const innerArrow = () => {
      console.log(this.name); // zerocho 🤔??
    }
    innerArrow(); // this를 바꿔주는 행위 안했는데.. 🤷
  },
};
obj.sayName(); 

// inner의 스코프 체인: inner -> sayName -> anonymous

これは呼び出し時に判断しなければならない!
矢印関数親関数のthisを表示します!(親関数のこの点をどのように知っていますか?親関数がどのように呼び出されているかを見てください)
sayNameが誰が呼び出したのか見てみましょう.中のこれも決まりました.

bind、apply、callの使用例

function sayName() {
  console.log(this.name);
}
sayName.bind({ name: 'zerocho' })(); // zerocho '()' 써줘야 실행됨!
sayName.apply({ name: 'zerocho' }); // zerocho
sayName.call({ name: 'zerocho' }); // zerocho

function add(a,b) { return a+b };
add.apply(null, [3,5]); // add함수 안에서 this가 없기 때문에 null을 넣어줘도 좋다

addEventListenerの例

const hi = document.querySelector("#hi");
hi.addEventListener("click", function() { console.log(this) }); //<button id="hi">hi</button>

// 만약 화살표 함수처럼 행동하고 싶다면..

hi.addEventListener("click", (function() { console.log(this) }).bind(window)); // window obj

cosnt header = document.querySelector('.mainPage');
header.addEventListener('click', () => console.log(this)); // undefined

addEventListener!() => console.log(this)は宣言です!
宣言した親はaddEventListenerではありません🥲 (見えない)
見えない?=>ではこれはanonymousです

オブジェクトに関数を宣言する方法

const obj = {
  name: 'zerocho',
  sayName: function() {
    console.log(this.name);
  }
  /* 위의 방식과 아래의 방식은 같다! (속성까지 완벽하게 같진 않다)
  sayname() {
  	console.log(this.name);
  }*/
  arrowSayName: () => {
    console.log(this.name);
  }
}
obj.sayName(); // zerocho
obj.arrowSayName() // undefined