✔️오늘 배운 것

3. this

1. 실행 컨텍스트

Ex. VariableEnvironment, LexicalEnvironment, ThisBindings

실행 컨텍스트 실행 시 결정 = this를 bind(= 묶는다.)
=> thi는 함수 호출 시 결정

1-1. 전역 공간
브라우저(window)

console.log(this);
console.log(window);
console.log(this === window)

Node.js(global)

console.log(this);
console.log(global);
console.log(this === global);

2. 메서드 호출 => 메서드 내부 this

2-1. 함수 / 메서드
함수

함수명();

메서드

객체 메서드

2-2. this 할당
함수

// 호출 주체 명시 X => (this = 전역 객체)
var func = function (x) {
	console.log(this, x);
};
func(1); // Window { ... } 1

메서드

// 호출 주체 명시 O => (this = 해당 객체(obj)
var obj = {
	method: func,
};
obj.method(2); // { method: f } 2

2-3. 함수 호출 / 메서드 호출 기준
점(.) = 대괄호([]) => 결과 같음

// Ex
obj.method(1);
obj['method'](2);

2-4. 메서드 내부 this
this = 호출을 누가 했는지에 대한 정보

// Ex
var obj = {
	methodA: function () { console.log(this) 
    };

obj.method(1);  	// this === obj
obj['methodA'](); 	// this === obj

3. 함수 호출 => 함수 내부 this

3-1. 함수 내부 this
1) 어떤 함수 => 함수로서 호출 (this 지정X => 호출 주체 모름)
2) 실행 컨텍스트 활성화 this 지정X => (this = 전역 객체)
3) this를 함수로서 독립적으로 호출 => (this = 전역 객체)

3-2. 메서드 내부함수 this
this를 함수로서 독립적으로 호출 => (this = 전역 객체)

// EX. (추후 수정 예정)

3-3. 메서드 내부함수 this 우회
개발자(사용자)가 어려워 함 => this 우회 방법 찾음

1) 변수 활용 (Self)

// Ex. (추후 수정 예정)
var obj1 = {
		outer: function() {
		console.log(this); // 1. outer
        
var innerFunc1 = function() {
		console.log(this); // 2. 전역객체
		}

var self = this;
		var innerFunc2 = function() {
			console.log(self); // 3. outer
		};
        
// 메서드 호출
obj1.outer();

2) 화살표 함수(= this binding X)
일반 함수 / 화살표 함수 차이점
=> this binding 여부

// Ex. (추후 수정 예정)
var obj = {
	outer: function() {
		console.log(this); // (1) obj
		var innerFunc = () => {
			console.log(this); // (2) obj
		};

4. 콜백 함수 호출 => 함수 내부 this

콜백 함수: 메서드 인자(매개변수)로 넘겨줌
콜백 함수에 별도로 this 지정 => 예외적으로 그 대상 참조

로직 이해 < this 상태 이해

5. 생성자 함수 내부 this

   생성자: 구체적인 인스턴스(객체) 만들기 위한 일종의 틀

var users = function (name, age) {
	this.dark = 'users';
    this.name = name;
    this.age = age;
    };
    
var A = new User('A', 30); // this: A
var B = new User('B', 20); // this : B

4. 명시적 this 바인딩

call / apply / bind

1. call 메서드
   1) 호출주체: 함수 => 즉시 실행 명령어
   2) call 명령어 사용 => 첫 번쨰 매개변수에 this로 binding할 객체
   => 명시적 binding

2. apply 메서드 (= call 메서드)
   1) his에 binding할 객체 => 나머지 부분만 배열 형태

3. call / apply 메서드 활용
   1) 유사배열객체(array-like-object) > 배열 메서드를 적용

Array.prototype.push.call(obj, '');

2) Array.from 메서드(Es6)

// 객체 -> 배열
var arr = Array.from(obj);

// 출력: 배열
console.log(arr);

3) 생성자 내부 => 다른 생성자 호출(공통된 내용의 반복 제거)

✔️어려웠던 것

• this = 함수 호출 여부
• 함수와 메서드에서의 this

✔️궁금한 것 / 부족한 것

• this = 함수 호출 여부 구조
• 응용 / 함수 예시

직접 코드를 짜면서 함수를 이해하는 방법으로 보충할 예정이다.

강의와 자료에서만 나오는 함수만으론 턱없이 부족하기에 코드를 직접 짜야하는데,
아직까진 이해를 완전히 못 한 상태라 좀 아쉽다.

✔️느낀점

코드를 보며 이해해도 내가 직접 코드를 짜지 못 한다면 코드를 이해하지 못한 것이라 생각한다.
나중에 보충자료를 찾아서 코드를 이해한 후 다시 정리하는 시간을 가져야겠다.