대부분의 경우 this의 값은 호출하는 방법에 의해 결정된다

• 호출 방법과 무관하게 고정시키려면 bind 를 쓰면된다
• 렉시컬 컨텍스트에 묶으려면 arrow 함수 써도된다
• 클로저는 선언하는 위치에 따라 달라진다

호출의 주체(객체)를 찾아야 한다 ( 어느 실행 컨텍스트에서 실행되는가 )

• . 앞에 뭐가있는가
• 콜백이면 뭐가 콜백을 호출하는가 → 콜백의 주체가 우선순위가 더 크다
• this 고정 시키고 싶으면 bind 함수 사용
• 모듈 import 에서도 원칙과 상관 없다
• return 뒤에 와도 원칙에 상관 없다

const testObj = {
  testValue: "testValue",

  testFunc(param) {
    console.log(param, this);
  },

	testArrowFunc: () => {
    console.log("arrow");
    console.log(this);
  }
};

// case 1
testObj.testFunc("case1");
// case 1
// {testValue: "testValue", testFunc: ƒ}

// case 2
const test = testObj;
test.testFunc("case2");
// case2
// {testValue: "testValue", testFunc: ƒ}

// case 3
const testFunc = test.testFunc;
testFunc("case3");
// case3
// undefined

// case 4
document.querySelector("#root").addEventListener("click", testObj.testFunc);
// MouseEvent {isTrusted: true, screenX: 333, screenY: 586, clientX: 370, clientY: 563, …}
// <div id="root"></div>

// case 5
window.addEventListener("DOMContentLoaded", testObj.testFunc);
// Event {isTrusted: true, type: "DOMContentLoaded", target: document, currentTarget: Window, eventPhase: 3, …}bubbles: truecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0isTrusted: truepath: (2) [document, Window]returnValue: truesrcElement: documenttarget: documenttimeStamp: 163.28500001691282type: "DOMContentLoaded"__proto__: Event
// window

// case 6
window.addEventListener("DOMContentLoaded", testObj.testFunc.bind(testObj);
// Event {isTrusted: true, type: "DOMContentLoaded", target: document, currentTarget: Window, eventPhase: 3, …}bubbles: truecancelBubble: falsecancelable: falsecomposed: falsecurrentTarget: nulldefaultPrevented: falseeventPhase: 0isTrusted: truepath: (2) [document, Window]returnValue: truesrcElement: documenttarget: documenttimeStamp: 163.28500001691282type: "DOMContentLoaded"__proto__: Event
// {testValue: "testValue", testFunc: ƒ}

// case 7
document
  .querySelector("#root")
  .addEventListener("click", testObj.testArrowFunc);
// arrow
// undefined // 그냥 바깥쪽 this 가지고와버림

핵심 : 호출한 놈 (객체) === This

• 누가 실행 했냐??

실수했던 코드

hyunjaesung/stevy_js_noriter

Febase/FeBase