this 게시물의 2번째 외전을 다뤄봅니다.
this
에 대한 정의를 다시 정리하자면,
일반 함수 내부 / 메소드 내부에서 쓰였을 때
this
값: 현재 위치에 있는 함수를 호출한 객체
생성자 내부에서 쓰였을 때
this
값: new
로 만들어진 새로운 변수이렇게 정리할 수 있습니다.
this
결론부터 말하자면,
화살표 함수 내부에는 고유한
this
가 존재하지 않습니다.
this
를 사용한다면 외부 함수에서 this
를 가져옵니다. 여러가지 예시를 준비했어요.
let user = {
firstName: "석기",
sayHi() {
let arrow = () => console.log(this);
arrow();
}
};
user.sayHi()
이를 실행하면, 다음과 같이 출력됩니다.
상단 코드에서 arrow
함수가 화살표 함수입니다.
그 내부에서 this
를 호출했으니, 외부함수에서 그 값을 찾습니다.
외부함수인 user.sayHi
의 this
값인, user
객체가 당첨!
🎈
user.sayHi
는 메소드이므로, 그 메소드를 포함하는 객체가this
죠! 여기를 참고하면 이해가 쉽습니다.
let tmp = null;
let user = {
firstName: "석기",
sayHi() {
let arrow = () => tmp = this;
arrow();
}
};
user.sayHi();
console.log(tmp === user)
위 사진을 봅시다.
user.sayHi()
실행.
arrow()
를 실행.
화살표 함수 내부에서 전역변수 tmp
에 this
를 할당.
console.log(tmp === user)
로 확인, -> true
반환.
화살표 함수 내부에서
this
는 외부함수의this
값이다.
❗ 결론충 다시 등장! 결론은,
외부 컨텍스트에 있는 this를 이용하고 싶은 경우 유용합니다.
??
예시.. 예시가 편해..
let group = {
title: "1모둠",
students: ["석기", "준영", "현주", "이나"],
showList() {
this.students.forEach(
student => console.log(this.title + ': ' + student);
);
}
};
group.showList();
이 결과는, 아래 화면과 같다.
화살표 내부에서 this
를 호출했고, 그 this
의 title
를 사용합니다.
화살표 내부의 this
=== 외부함수의 this
이므로, 결국 group
객체가 그 값 당첨.
this.students
는 group.students
, this.title
은 group.title
이 된다!
let group = {
title: "1모둠",
students: ["석기", "준영", "현주", "이나"],
showList() {
this.students.forEach(function(student) {
console.log(this)
});
}
};
group.showList()
forEach 내부에서 쓰인 함수는 화살표가 아니라, 일반함수로 선언되었다!
-> 전역객체를 가르킨다! 즉, Window
객체가 튀어나온다.
그러니까, 자연스럽게 외부
this
를 쓰고 싶으면 화살표 함수쓰면서this
쓰면 되겠다.
그렇다면 다음 예제에서는 뭐가 나올까??
let user = {
name: "Samantha Quinn",
speak: () => {
console.log(this);
},
};
user.speak();
user
객체가 나온다 생각했다면, 내가 그렇게 생각했음.
user
는 객체다.
user
는 name
프로퍼티와, 메소드가 아닌 화살표 함수 speak
가 있다.
메소드가 아니라 화살표 함수이므로,
user
객체 내부의this
가speak
의this
다.
Window
가 찍힌다.new
와 this
자, 천천히 생각해보자. 여기를 참고하면서, 천천히.
box
가 있다고 하자.let box = null;
A
가 있다고 하자.function A() {
box = this;
}
box
값을 this
로 조정한다. A()
를 실행하면, box
에는 Window
객체가 들어간다.window.A()
랑 같으니까.A
함수를 생성자로 불러보고, box
에 뭐가 들어가는지 보자.let parcel = new A();
console.log(box === parcel)
box
에는, new
로 만들어진 객체가 들어간다.
즉,
A()
를 생성자로 호출할때,A
함수 내부this
에parcel
객체를 할당한다.
this
에는 만들어진 객체를 할당한다.new
와 쓰일 수 없다.왜?
화살표 함수에는 this
가 없음.
생성자로 쓸라면 그 함수 내부에 this
에 new
로 만들어진 객체를 집어넣어야함.
집어넣을 공간이 없음.
new
와 쓰일 수 없습니다.글이 좀 길어져서, bind
와 apply
, call
은 다음 게시물에서 다루겠습니다.
잘못된 내용이 있다면 댓글로 알려주세요 :)
명쾌한 해설 감사합니다~
this 정말 처음 배우면 헷갈리더라고요 ㅠㅠ