[JavaScript] this

#1. this?

- this는 자기 참조 변수

- this는 호출한 방법에 의해 결정된다.

- 대부분의 경우 this는 호출한 놈!

 

* 예외

- 전역 스코프에서 this는 window객체

- 화살표 함수에서 this는 상위 스코프의 this

- strict mode에서 this의 기본값은 undifined (window아님)

 

 

 

case1. 대부분의 경우 this는 자신을 호출한 놈

-  대부분의 경우 this 는 자신을 호출한 놈이다.

var person = {
    name : "사람",
    getThis : function(){
        console.log(this);
    } 
}

// case01. this는 자신을 호출한 person
person.getThis();  // {name: '사람', getThis: ƒ}

 

 

case2. 따로 지정해둔게 없다면 기본적으로 this 는 전역 객체

- 호출한 놈이 따로 없을때, this는 기본적으로 전역객체(window)를 갖는다

function fn(){
    console.log(this);
}

fn();  // window

var person = {
    name : "사람",
    getThis : function(){
        console.log(this);
    } 
}

// case01. this는 자신을 호출한 person
person.getThis();  // {name: '사람', getThis: ƒ}


// case02. this를 호출한 객체가 따로 없으므로, this는 전역객체 window
var getThis2 = person.getThis;
getThis2();  // Window

 

 

case3. 콜백함수에서 this는 주의해야함.

- this를 부르는 btn이 this임

See the Pen 콜백함수에서 this by jang (@todak) on CodePen.

 

- person.fn 형태로 호출을 해도, 안의 setTimeout 은 호출하는 놈이 없으니, this는 전역객체 window로 출력

let person = {
	name: '김윤아',
	fn: function(){
		setTimeout(function(){
        	console.log(this);
        }, 1000)
	}
}

person.fn();  // window

 

 

case4. this를 임의로 넣고 싶다면, bind()메소드를 쓴다.

function getThis() {
	console.log(this);
}

let person1 = {
	name: '홍길동'
}

getThis();  // window

// this의 값을 정해주기 위해서는 bind메소드를 사용한다
let getThis2 = getThis.bind(person1);
getThis2();  // {name: '홍길동'}

 

- 바인드는 한번만 사용 가능하다.

- bind된 함수에 bind를 한번 더 해봤자 처음에 bind 된 값만 나온다 

function getThis() {
	console.log(this);
}

let person1 = {
	name: '홍길동'
}

let person2 = {
	name: '김나영'
}

// this의 값을 정해주기 위해서는 bind메소드를 사용한다
let getThis2 = getThis.bind(person1);
getThis2();  // {name: '홍길동'}

// bind는 한번만 쓸 수 있다. bind된 함수에 bind를 한번 더 해봤자 처음에 bind 된 값만 나온다
let getThis3 = getThis2.bind(person2);
getThis3();  // {name: '홍길동'}

 

- 앞의 setTimeout 콜백함수도, this를 bind해주면, 자신을 감싼 함수를 this로 받아올 수 있다.

let person = {
	name: '김윤아',
	fn: function(){
    	console.log(this);  // {name: '김윤아', fn: ƒ}
        
		setTimeout(function(){
        	console.log(this);
        }.bind(this), 1000)
	}
}

person.fn();  // {name: '김윤아', fn: ƒ}

 

 

case5. 화살표 함수에서 this 는 상위 스코프의 this

- 화살표 함수 안에서 this는 언제나 상위 스코프의 this 

- 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정됨

let person = {
	name: '김윤아',
	fn: function(){
    	console.log(this);  // {name: '김윤아', fn: ƒ}
        
		setTimeout(() => {
        	console.log(this);
        }, 1000)
	}
}

person.fn();  // {name: '김윤아', fn: ƒ}

 

 

case6. Strict Mode

- Strict Mode 에서 호출한 놈이 없을땐, 기본값이 undifined

'use strict'  // strict mode 선언
function fn(){
    console.log(this);
}

fn();  // undefined

 

---

* 참고 자료

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

이웅모. 『모던 자바스크립트 Deep Dive』. 위키북스, 2020

https://www.youtube.com/watch?v=GteV4zfqPIk