this 에 대해 질문드리고 싶습니다

Question

안녕하세요

강의 4분 21초부터 어려워서

강사님의 블로그를 찾아서 공부했습니다

링크에서는 call apply bind 설명부터는 기본기가 부족해서 이해를 못했습니다

그러다가 궁금한 점이 생겨서 질문드립니다

질문1. function도 객체라고 볼 수 있는데

this는 function( ) 객체 안에 있어도 function 객체를 가리키지 않고 window를 가리킨다는 것을 공식으로 알아야 하나요?

예외적으로 객체 A안의 funtion안의 this의 경우는

function을 포함하는 A객체를 가리킨다고 생각해야 하나요?

질문2. 강의 4분 2초에서

funtion은 funtion마다 자기만의 this를 가진다는 말씀을 이해 못했습니다

C++이나 자바에서 생성자들이 자신만의 this를 갖는다는 맥락일까 싶기도 했고 아리송해서

직접 실험해보는 게 좋겠다 싶어서 68행에

this와 that을 비교해봤습니다

아래는 소스코드입니다

var relationship1 = {

name:'zero',

friends : ['nero', 'hero', 'xero'],

logFriends: function(){

var that = this;

console.log(`this: ${this}, that: ${that}`);

this.friends.forEach(function(friend){

console.log(that.name,friend);

console.log(`this: ${this}, that: ${that}`);

});

}

relationship1.logFriends();

왜 여기서 68행의 this는 relationship1이 아닌, undefined가 나오는지 도저히 이해가 어려웠습니다

강사님께서 부모의 this 와 자식의 this 개념을 설명해주시긴 했지만, 제 기본기가 부족해서 이 코드에서 부모와 자식이 무엇인지 보이지가 않았습니다

자바나 C++에서 부모, 자식 클래스, 생성자, this, 오버라이딩 같은 개념을 공부하긴 했는데,

자바스크립트를 제대로 기본기를 다지지 않고, "모르는 개념이 나올 때마다 찾아서 공부하면 되겠지"라는 사고방식으로 하려니 한계에 부딪힌 느낌입니다

이럴 때는 강사님의 렛츠기릿 자바스크립트 강의를 처음부터 완주하는 게 나을지 질문드리고 싶습니다

Answer

1. 함수 안에서는 전부 window입니다. obj.a의 this도 그 자체로는 window인데 obj.a() 하는 순간 this가 obj로 바뀝니다. 앞에 객체가 붙은것이 키포인트입니다.

2.68행의 this는 forEach 함수의 인수로 제공된 function의 this입니다. logFriends의 function이 부모고 forEach의 function이 자식함수입니다.

js의 this는 이해하고 나면 정말 쉬운 개념입니다. 다만 다른 언어 this의 지식은 잊어버리셔야 합니다. 그게 사람을 헷갈리게 만듭니다.