본 정리글은 인프런 김영보 강사님의 자바스크립트 중고급 : 근본 핵심 논리 강의를 수강하고 정리한 글입니다.

자바스크립트 중고급 : 근본 핵심 논리

📖 this 1

📌 this 개요

• 키워드

• obj.name() 형태로 호출한 함수 (메소드)에서 this로 인스턴스 (오브젝트)를 참조

• 실행 콘텍스트의 this 바인딩 컴포넌트에 바인딩

📌 this와 글로벌 오브젝트

• 글로벌 오브젝트에서 this는 글로벌 오브젝트 참조

• this와 window 오브젝트
  -- window는 JS에서 만든 것이 아니며 글로벌 오브젝트의 스코프도 아님
  -- window와 글로벌 오브젝트를 같은 선상에서 사용

• Host 오브젝트 개념 적용하기 때문

• 글로벌 오브젝트에 코드 작성
  -- window.onload = function(){
  // 안이 아니라 밖에 코드 작성
  - 그래야 글로벌 오브젝트와 this 비교 가능
  }

log(this === window);

true

1. true가 출력된 것은 값과 타입이 같다는 것

• this가 window 참조

var value = 100;
log(this.value);

100

1. var value = 100
   value는 글로벌 변수
2. this.value - this가 글로벌 오브젝트를 참조하므로 this.value 형태로 글로벌 변수 사용 가능

• this로 글로벌 변수 사용

var value = 100;
log(window.value);

100

1. window.value
2. window가 글로벌 오브젝트로 참조하므로 window.value 형태로 글로벌 변수 사용 가능

this.value = 100;
log(window.value);

100

• window로 글로벌 변수 사용

1. this.value = 100
2. this가 글로벌 오브젝트를 참조하므로 글로벌 오브젝트에 설정
3. window가 글로벌 오브젝트를 참조하므로 value 사용 가능
4. window 오브젝트와 같이 다른 오브젝트를 마치 내 것처럼 사용하는 개념을 Host 오브젝트라고 함
   DOM 오브젝트도 Host 오브젝트이다

• this.value = 100 형태로 값 할당

📌 this와 window 오브젝트

• window.onload = function(){
  // 여기에 코드 작성
  }

window.onload = function(){
  	log(this === window);
};

true

1. true가 출력된 것은 값과 타입이 모두 같다는 것
2. this가 window를 참조하는 것은 window.onload = function(){...}에서 onload()가 window의 핸들러 함수이기 때문

• this가 window 참조

window.onload = function(){
  	var value = 100;
  	log(this.value);
};

undefined

1. var value = 100
   value는 핸들러 함수의 지역 변수

2. this.value

• this가 window 오브젝트를 참조하므로 this.value로 지역 변수에 악세스 할 수 없다

• this로 로컬(지역)변수 사용

window.onload = function(){
  	this.value = 100;
  	log(window.value);
};

100

1. this.value = 100;
2. this가 window 오브젝트를 참조하므로 window 오브젝트에 설정된다.

• this.value = 100; 형태로 값 할당

- 함수이든, 이벤트 핸들러이든, 함수 앞에 작성한 오브젝트를 함수에서 this로 참조 (글로벌 오브젝트든 일반 오브젝트든 간에 똑같음)

📌 this와 strict 모드

• 오브젝트.함수이름() 형태로 함수 호출
  -- 글로벌 오브젝트는 오브젝트 이름이 없으므로 함수 이름만 작성하여 호출

• strict 모드에서는 window.book()처럼 book() 앞에 window를 글로벌 오브젝트로 작성
  -- 함수 안에 오브젝트를 작성하지 않으면 this 바인딩 컴포넌트에 undefined가 설정되므로 this로 window를 참조할 수 없음

function book(){
  	"use strict"
  	return this;
};
var result = book();
log(result);

undefined

1. 호출하는 book() 함수 앞에 오브젝트를 작성하지 않으면 return this 에서 undefined 반환
2. this 바인딩 컴포넌트에 undefined가 설정된다는 뜻

function book(){
  	"use strict"
  	return this;
};
var obj = window.book();
log(obj === window);

true

1. 호출하는 book() 함수 앞에 window 오브젝트 작성
2. book() 함수가 글로벌 함수이므로 호출되며 return this에서 window 오브젝트 반환

📌 this 참조 오브젝트

var book = {
	point : 100
  	member : {
  		point : 200,
  		get : function(){
         	log(this === book.member)
          	log(this.point)
        }
	}
}
book.member.get()

true
200

• this가 참조하는 오브젝트

• 마지막 줄에서 book.member.get() 호출
  -- this가 member 오브젝트 참조
  -- book은 get()을 호출하는 경로 역할

• console.log(this === book.member)
  -- 실행결과에 true 출력
  -- this가 book.member을 참조하기 때문
  -- 즉, this 바인딩 컴포넌트에 book.member 오브젝트가 설정됨

• console.log(this.point)
  -- this가 book.member를 참조하므로 book.point 값인 100이 아니라 book.member.point 값인 200 출력

📌 this와 인스턴스

• 인스턴스 목적? - 인스턴스마다 고유값 유지

• 인스턴스에서 this의 목적 - this로 인스턴스를 참조하여 this.name 형태로 프로퍼티에 접근

• proto 프로퍼티 접근
  -- prototype에 연결된 프로퍼티가 인스턴스의 proto에 첨부되며 this.method() 형태로 proto에 첨부된 method() 호출

var book = {};
book.point = function(point){
  	this.point = point;
};
book.point.prototype.getPoint = function(){
  	log(this.point);
};
var obj = new book.point(100);
obj.getPoint();

100

1. var obj = new book.point(100)
   -- book.point의 인스턴스 생성

2. this.point = point
   -- this 생성한 인스턴스를 참조하므로 point는 인스턴스 프로퍼티가 된다
   -- 이 논리로 인스턴스마다 프로퍼티 이름과 값을 유지할 수 있다

3. obj.getPoint()
   -- obj 인스턴스의 getPoint() 메소드 호출

4. console.log(this.point)
   -- obj.getPoint()로 호출, this가 아닌 obj 참조
   -- obj는 book.point 인스턴스
   -- book.point 인스턴스의 point 값 출력

📌 this와 call()

• getTotal.call(this, 10, 20)
  -- 10과 20을 파라미터 값으로 넘겨 줌
  -- 첫 번째는 파라미터 값으로 넘어가지 않고 두 번째부터 넘어감

• 첫 번째 파라미터에 호출된 함수에서 this로 참조할 오브젝트 작성
  -- this 이외에 다른 오브젝트 사용 가능

📌 this 사용

"use strict"
var value = 100;
function get(param){
  	return param + this.value;
};
var result = get.call (this, 20);
log(result);

120

• window.onload = function(){
  // onload 밖에 코드를 작성
  // 즉, 글로벌 오브젝트에서 실행됨
  }

1. get.call(this, 20) - 첫 번째 파라미터에 this 작성
2. return param + this.value
   -- this가 글로벌 오브젝트를 참조하므로 (var value = 100)을 사용

------------------------------------- call()을 사용하지 않음 -------------------------------------

3. return param + this.value

• get(20)으로 호출하면 this가 undefined를 참조하므로 에러 발생!

📌 Object 사용

var get = function(value) {
	return this.base * this.rate + value;
};
var value = {base : 20, rate : 30};
var result = get.call(value, 50);
log(result);

650

1. var result = get.call(value, 50)
   -- call()의 첫 번째에 Object 작성
   -- 50은 파라미터 값

2. return this.base this.rate + value
   -- this가 {base : 20, rate : 30}을 참조
   -- 20 30 + 50

3. this로 참조 할 오브젝트를 변경할 수 있는 것이 call()의 특징

📌 숫자 작성

function get(){
	return this.valueOf();
};
var result = get.call(123);
log(result);

123

1. var result = get.call(value, 50)
   -- this가 오브젝트를 참조하므로 숫자 (123)을 작성하면 에러가 발생해야 하지만 but,

2. 값(123) 타입에 해당하는 Number 인스턴스를 생성하고 123을 프리미티브 값으로 설정
   -- this가 Number 인스턴스 참조

📌 this 참조 변경

var book = {
  	value : 123,
  	point : {
     	value : 456,
      	get : function(){
          		log(this.value)
        	  }
    }
}
book.point.get.call(book)
book.point.get.call(book.point)

123
456

1. book.point.get.call(book)
   -- book.point의 get() 호출
   -- get()에서 this로 book 오브젝트 참조
   -- this.value가 book.value이므로 123 출력

2. book.point.get.call(book.point)
   -- book.point의 get() 호출
   -- get()에서 this로 book.point 오브젝트 참조
   -- this.value가 book.point.value이므로 456 출력