javascript - 중첩 함수의 이러한 변경으로 객체는 어떻게 가리킬까요?

Question

마우스가 안으로 들어가면 직사각형 블록의 길이가 길어지고 높이가 높아지는 기능을 갖춘 데모를 작성했습니다.

다음 함수 중첩을 실행할 때

으아아아

매개변수를 전달하려면 that=this를 사용해야 합니다. 그렇지 않으면 브라우저에서 다음 오류를 보고합니다

잡히지 않은 TypeError: 'Window'에서 'getCompulatedStyle'을 실행하지 못했습니다. 매개변수 1이 'Element' 유형이 아닙니다.

전체 코드를 마지막에 게시했습니다. 왜 that=this를 사용하여 매개변수를 전달하면 문제가 해결되는지 알고 싶습니다. 매개변수가 전달되지 않으면 이는 누구를 두 번 가리킵니까? 이 값의 모든 변경 사항을 모니터링하고 표시할 수 있는 Chrome 및 Firefox의 좋은 디버깅 방법이 있습니까?

html 코드:

으아아아

css 코드:

으아아아

js 코드:

으아아아

Answer 1

이벤트를 통해 호출된 함수의 this는 이벤트를 트리거한 요소를 가리키므로 op[0].onmouseover 이벤트에 의해 호출된 함수의 this는 op[0];을 가리킵니다.

changeStyle 함수에 의해 전달된 콜백 함수의 this는 창을 가리킵니다. if (fn) { fn();}은 함수를 호출하는 창과 동일하기 때문입니다

코드 실행을 추적하려면 중단점 디버깅을 사용하여 작업 중 각 변수의 할당을 확인할 수 있습니다

Answer 2

함수 실행 시 자동으로 생성되는 내부 객체를 나타내며, 함수 내부에서만 사용할 수 있습니다.
기능이 다양한 상황에서 사용됨에 따라 이 값이 변경됩니다. 그러나 일반적인 원칙이 있습니다. 즉, 함수를 호출하는 객체를 참조한다는 것입니다. Ruan Yifeng의 이 기사를 읽어보실 수 있을 것 같습니다: http://www.ruanyifeng.com/blo...

Answer 3

가리키는 걱정은 이제 그만, (es6) 화살표 기능을 이용해 보세요this

Answer 4

통과하지 못하면 변경 기능이 누구의 스타일을 바꾸는지 아시나요? 이것을 직접 사용하면 1층에서 말한 것처럼 창을 가리킨다. 깨자마자 중단점을 알 수 있다

Answer 5

this를 현재 어휘 범위에 바인딩하기 위해 that=this를 사용하지 않으면 this는 this의 기본 바인딩인 전역 개체 창을 가리킵니다.