[자바스크립트] crazy this, 헷갈리는 자바스크립트 this 예제 총정리

https://poiemaweb.com/es6-arrow-function

Arrow function | PoiemaWeb

ㄴ> 가장 정확하고 자세하고 풍부한 예시로 설명되어 있는 문서

const obj = {
	name: '꼬부기',
	sayName: () => {
		console.log(this.name);
	}
}
obj.sayName();

class Counter {
	name = 'counter';
	count = 0;
	increase = () => {
		console.log(this);
	}
	obj = {
		name: '꼬부기',
		sayName: () => {
			console.log(this.name);
		}
	}

}
const counter = new Counter();
console.log('counter.increase()');
counter.increase(); //this 는 Counter
counter.obj.sayName();  //this는 counter

temp.js:4 
temp.js:24 counter.increase()
temp.js:13 Counter
temp.js:18 counter

 

 

다른 객체지향 프로그래밍 언어에서 this 란 클래스를 통해 생성한 인스턴스(오브젝트) 자신을 가르켰다.

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

즉, 만들어진 객체 그 자신이었다.

 

그러나 자바스크립트의 this 는 알라딘 요술램프의 지니(;;;)이다.

누가 부르냐에 따라서 this의 주인이 달라지기 때문이다.

누가 호출했는지,

호출 문맥에 따라서 this가 동적으로 변경될 수 있기 때문에 다른 언어에 비해서 자바스크립트의 this는 유독 더 헷갈릴 수 있다.

그런데 화살표 함수는 또 다르다.

화살표 함수는 선언한 시점의 부모 스코프가 this이다. 고로 불변이다.(;;;)

 

console.log(this); //this 는 window
function func() {
	console.log(this);
}
func(); //this 는 window
window.func(); //상동, 글로벌에서 함수를 호출한다는 것은 윈도우에서 호출한다는 것과 같기 때문

class Counter {
	count = 0;
	increase = function () {
		console.log(this);
	}

}
const counter = new Counter();
counter.increase(); //this 는 Counter

const tempIncrease = counter.increase;
tempIncrease(); //this 는 undefined

const counter = new Counter();
counter.increase(); //this 는 Counter

Counter에서 increase()를 호출했으므로 여기까지만 해도 this는 클래스를 가르키고 있었으나,

 

const tempIncrease = counter.increase;
tempIncrease(); //this 는 undefined

tempIncrease라는 변수에 할당한 순간,

그 어떠한 객체가 tempIncrease()를 호출하는 것이 아니기에 this의 주인은 상실되고

undefined가 출력되게 된다.(let과 const로 선언된 변수는 윈도우에 등록되어있지 않다. 그래서 윈도우가 호출 하는 것도, 그 어떠한 오브젝트가 호출하는 것도 아닌 것이 된 것이다.)

 

console.log(this); //this 는 window
function func() {
	console.log(this);
}
func(); //this 는 window

class Counter {
	count = 0;
	increase = function () {
		console.log(this);
	}

}
const counter = new Counter();
counter.increase(); //this 는 Counter

const tempIncrease = counter.increase;
tempIncrease(); //this 는 undefined

class CrazyJs {
}
const crazyJavascript = new CrazyJs();
crazyJavascript.func = counter.increase;

crazyJavascript.func(); //this는 CrazyJs

 

위의 상황에서 화살표 함수로 바꾸어보았다.

class Counter {
	count = 0;
	increase = () => {
		console.log(this);
	}

}
const counter = new Counter();
console.log('counter.increase()');
counter.increase(); //this 는 Counter

const tempIncrease = counter.increase;
console.log('tempIncrease()');
tempIncrease(); //this 는 undefined

class CrazyJs {
}
const crazyJavascript = new CrazyJs();
crazyJavascript.func = counter.increase;

console.log('crazyJavascript.func()');
crazyJavascript.func(); //this는 CrazyJs

 

counter.increase()
Counter

tempIncrease()
Counter

crazyJavascript.func()
Counter

 

여기서 아주 중요한 포인트는, 여타 this는 호출 시점에 결정되는데 화살표함수는 그저 선언한 부모 스코프를 늘 this로 유지한다는 점이다.

 

화살표 함수 : 부모 스코프(선언 기준)

화살표 함수인지 아닌지도 this를 결정하는데 영향을 끼친다.

 

 

//객체 안에 일반 함수 안에 화살표 함수가 있는 케이스
const obj = {
	name: '꼬부기',
	sayName() {
		console.log(this.name);
		const inner = () => {
			console.log(this.name);
			console.log(this.name === window.name);
		}
		inner(); //화살표함수를 호출시 this는 부모 스코프 기준
	}
}
obj.sayName();

//객체 안에 일반 함수 안에 일반 함수가 있는 케이스
const obj2 = {
	name: '꼬부기2',
	sayName2() {
		console.log(this.name);
		function inner() {
			console.log(this.name);
			console.log(this.name === window.name);
		}
		inner(); //이 함수를 호출할 때 this를 바꾸는 동작이 아무 것도 없으므로 this는 window
		debugger;
	}
}
obj2.sayName2();

꼬부기
꼬부기
false

꼬부기2

true

 

const person = {
	name: "홍길동",
	sayName: () => {
		console.log(this.name);
		const inner = () => {
			console.log(this.name);
			console.log(this.name === window.name);
		};
		inner();
	},
};

//화살표 함수일 경우 this는 window. 
person.sayName(); //''
console.log(window.name); //''

const obj = {
	name: '꼬부기',
	sayName() {
		console.log(this.name);
		const inner = () => {
			console.log(this.name);
			console.log(this.name === window.name);
		}
		inner(); //화살표함수를 호출시 this는 부모 스코프 기준
	}
}
obj.sayName();


const obj2 = {
	name: '꼬부기2',
	sayName2() {
		console.log(this.name);
		function inner() {
			console.log(this.name);
			console.log(this.name === window.name);
		}
		inner(); //이 함수를 호출할 때 this를 바꾸는 동작이 아무 것도 없으므로 this는 window
		debugger;
	}
}
obj2.sayName2();

true

꼬부기
꼬부기
false
꼬부기2

true

 

const obj = {
	name: '꼬부기',
	sayName: () => {
		console.log(this.name);
		function inner() {
			console.log(this.name);
			console.log(this.name === window.name);
		}
		inner(); //화살표함수를 호출시 this는 부모 스코프 기준
	}
}
obj.sayName();

 

true

 

<요약>

this 함수 선언이 아닌 호출하는 방법에 따라 달라지므로, 함수가 호출될 때 마다 다를 수 있다.

그러나 화살표 함수의 this는 선언시점이기 때문에 호출될 때마다 다를 수가 없다.

기본 this는 window다.

 

바인딩: this의 호출 방식에 따라 this가 특정 '객체'에 연결되는 것. 

 

this는 함수가 호출될 때마다 달라진다(렉시컬 스코프처럼 함수를 선언하는 순간이 아님)
기본은 window이고, this를 바꿔주는 행위(호출)을 했는지 안 했는지를 확인해애한다.

<this>
기본this, globalthis : 전역, window
strict mode : undefined
화살표 함수 : 부모 스코프(선언 기준)
객체.메서드 : 객체
new 호출 : 객체
call, apply, bind : this가 가리키는 객체 변경가능

2. 화살표 함수
화살표 함수 : 부모 스코프(선언 기준)

화살표 함수인지 아닌지도 this를 결정하는데 영향을 끼친다.

 

const person = {
  name: "홍길동",
  sayName: () => {
    console.log(this.name);
  },
};

//화살표 함수일 경우 this는 window. 
person.sayName(); //''
console.log(window.name); //''

 

3. 생성자 함수

생성자 함수 내부에서 this는 생성자 함수가 생성할 인스턴스와 바인딩

new를 붙여서 호출하는 경우, this는 객체 자기자신

 

 

4. this를 바꿔주는 방법 bind, apply, call

Call, Apply, Bind 메소드 사용시 메서드에 첫 번째 인수로 전달하는 객체에 바인딩

function sayName() {
  console.log(this.name);
}
sayName(); //window.name이므로 ''
sayName.bind({ name: "황진이" })(); //황진이
sayName.apply({ name: "두꺼비" });//두꺼비
sayName.call({ name: "탐관오리" }); //탐관오리

• bind : 새로운 함수를 만듬, 고로 함수 호출을 같이 해주어야 함

sayName.bind({ name: "황진이" })(); //황진이 : this를 { name: "황진이" } 으로 바꾸는 것이다.

• apply : bind에서 실행부()만 제외하면 됨. 함수 호출을 자동으로 해주기 때문

sayName.apply({ name: "두꺼비" });//두꺼비 : this를 { name: "두꺼비" } 으로 바꾸는 것이다.

• call

sayName.call({ name: "탐관오리" }); //탐관오리 : this를 { name: "탐관오리" }으로 바꾸는 것이다.

 

코드

---

1. 일반 함수 호출시 this는 전역 객체에 바인딩

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

a = 30;
console.log(window.a); // 30

function x(){
  return this;
}

x() === window; // true

2. 메서드 호출시 this는 호출한 객체에 바인딩

 

let john = {
    firstName: "John",
    lastName: "Doe",
    driveCar() {
        console.log(this.firstName + " drives a car.")
    }
}

john.driveCar(); // John drives a car

3. 생성자 함수로 호출시 생성자 함수가 생성할 객체에 바인딩

 

function person() {
    this.firstName = "John",
    this.lastName = "Doe",
    this.start = function() {
        console.log(this.firstName + "drives a car.")
    }
}

let person1 = new person();

console.log(person1); // { firstName: 'John', lastName: 'Doe', start: [Function] }​

 

4. Call, Apply, Bind 메소드 사용시 메서드에 첫 번째 인수로 전달하는 객체에 바인딩

• call

function print( a, b, c ){
    console.log(this.name);
    console.log(a + b + c);
}

const person = {
    name: '홍길동'
};

print.call(person,1,2,3);
//홍길동
//6

call 사용시 함수를 실행하고 함수의 첫번째 인자로 전달하는 객체에 this를 바인딩

 

• apply

function print( a, b, c ){
    console.log(this.name);
    console.log(a + b + c);
}

const person = {
    name: '홍길동'
};

print.apply(person,[1,2,3] ); 
//홍길동
//6

apply도 call과 거의 같은 쓰임새를 보이지만 인자를 배열 형태로 전달.

 

• bind

function logAge ( a, b, c ){

  console.log(this.age);
  console.log(a + b + c);
}

const person = {
    age: 5
};

const myAge = logAge.bind(person);
myAge(1,2,3); 
//5
//6

bind의 경우는 첫번째인자에 this를 바인딩 한다는 점은 같지만, 함수를 실행하지 않고 새로운 함수를 반환한다.

즉, 반환된 새로운 함수를 실행해야 원본 함수가 실행된다.

 

요약정리

---

이처럼 this는 함수 호출 방식에 따라 동적으로 결정.

함수를 일반 함수로 호출할 경우 this는 전역 객체를,

메서드로 호출할 경우 이를 호출한 객체를,

생성자 함수를 호출할 경우 생성자 함수가 생성할 인스턴스를

Call, Apply, Bind 메소드 사용시 메서드에 첫 번째 인수로 전달하는 객체에 바인딩

 

 

참고문헌:

[JS] 자바스크립트에서의 this

자바스크립트 this 의 개념과 바인딩 설명

Global scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

PoiemaWeb

함수 바인딩t