Skip to content

22. this #124

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions 7주차 (20~22장)/22. this/L2HYUNN/기억에 남는 내용.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# ✏️ 기억에 남는 내용
* `this`는 **자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는** 자기 참조 변수(self-referencing variable)다. `this`를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

* `this`는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디서든 참조할 수 있다.

* **`this`가 가리키는 값, 즉 `this` 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.**

* 객체 리터럴의 메서드 내부에서의 `this`는 메서드를 호출한 객체를 가리킨다.

* 생성자 함수 내부의 `this`는 생성자 함수가 생성할 인스턴스를 가리킨다.

* `this`는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.

* 함수 호출 방식과 `this` 바인딩
* 일반 함수 호출
* 기본적으로 `this`에는 전역 객체(global object)가 바인딩된다.
* 메서드 내에서 정의한 중첩 함수도 일반 함수로 호출되면 중첩 함수 내부의 `this`에는 전역 객체가 바인딩된다.
* 어떠한 함수라도 일반 함수로 호출되면 `this`에 전역 객체가 바인딩된다.
* 메서드 호출
* 메서드 내부의 `this`에는 메서드를 호출한 객체가 바인딩된다.
* **주의할 것은 메서드 내부의 `this`는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩된다는 것이다.**
* 메서드는 객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체다.
* 생성자 함수 호출
* 생성자 함수 내부의 `this`에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩된다.
* Function.prototype.apply/call/bind 메서드에 의한 간접 호출
* **apply와 call 메서드의 본질적인 기능은 함수를 호출하는 것이다.**
* apply와 call 메서드는 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 `this`에 바인딩한다.
* apply와 call 메서드는 두 번째 인수를 통해 함수에 인자를 전달한다. 인수를 전달하는 방식만 다를 뿐 `this`로 사용할 객체를 전달하면서 함수를 호출하는 것은 동일하다.
* **apply와 call 메서드의 대표적인 용도는 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용하는 경우다.**
* **bind 메서드는 메서드의 `this`와 메서드 내부의 중첩 함수 또는 콜백 함수의 `this`가 불일치하는 문제를 해결 하기 위해 유용하게 사용된다.**
6 changes: 6 additions & 0 deletions 7주차 (20~22장)/22. this/L2HYUNN/퀴즈.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
# 📝 간단한 퀴즈
1. 함수 호출 방식에 따라 `this` 바인딩이 동적으로 결정되는 방법을 간단히 정리하시오.

2. Function.prototype.apply/call/bind 메서드의 대표적인 사용 용도를 간단히 서술하시오.

3. 일반적으로 클래스 기반의 언어들에서 `this`는 언제나 클래스가 생성하는 인스턴스를 가리킨다. 하지만 자바스크립트의 경우 함수가 호출되는 방식에 따라 `this`가 가리키는 값이 바뀌게 된다. 왜 자바스크립트의 `this`는 이렇게 동작하는 걸까? 프로토타입과 관련지어 그 이유를 생각해보고 간단히 서술해보자.