[TIL / JavaScript] this (1)

Changyun Go·2022년 1월 4일

JavaScript TIL

[TIL / JavaScript] this (1)

this란 쉽게 말해

할머니: 나는 허리가 아프다. → ‘나’는 할머니

아버지: 나는 다리가 아프다. → ‘나’는 아버지

여기서 ‘나’와 유사하다

대부분의 상황에서 객체다.
this를 사용하는 함수를 어떻게 실행하는지에 따라 값이 달라진다.

1. Regular function call

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

foo(); // window

일반 함수로 호출하면 this는 그냥 전역 객체(window)다.

'use strict';

var name = 'ken';

function foo () {
	console.log(this.name); // this === undefined
}

foo(); // error

strict 모드에서는 undefined로 나온다. → window를 가리키기 위해 this를 사용하지 않기 때문에 버그로 인식한다.
strict 모드
- 오류나 실수를 줄이기 위해 엄격한 코드 실행 방식을 적용해 주는 모드다.

var age = 100;

function foo () {
	var age = 99;
	bar();
}

function bar () {
	console.log(this.age); // this === window
}

foo(); // 100

함수를 어디서 호출하는지와 관계없이 일반 함수를 호출하면 this는 전역 객체다.

2. Dot Notation

var age = 100;

var ken = {
	age: 35,
	foo: function foo () {
		console.log(this.age); // this === ken
	}
};

ken.foo(); // 35

메소드로서 실행될 때는 점 앞에 있는 객체가 this다.

var age = 100;

var ken = {
	age: 35,
	foo: function bar () {
		console.log(this.age);
	}
};

var wan = {
	age: 31,
	foo: ken.foo
};

var foo = ken.foo;

ken.foo(); // 35
wan.foo(); // 31
foo(); // 100

함수가 정의된 곳과 관계없이 this는 호출한 객체를 가리킨다.

3. call / bind / apply

var age = 100;

function foo () {
	console.log(this.age);
}

var ken = {
	age: 35
};

var wan = {
	age: 31
};

foo(); // 100

foo.call(wan); // 31 (this === wan)
foo.apply(ken); // 35 (this === ken)

call이나 apply 메소드를 사용하면 인자로 넣어준 객체로 this가 설정되어 함수가 실행된다.

var age = 100;

function foo (a,b,c,d,e) {
	console.log(this.age);
	console.log(arguments);
}

var ken = {
	age: 35
};

foo.call(ken, 1, 2, 3, 4, 5); 
// 35
// 1, 2, 3, 4, 5 (유사 배열)
foo.apply(ken, [ 1, 2, 3, 4, 5 ]); 
// 35
// 1, 2, 3, 4, 5 (유사 배열)

call 메소드의 첫 번째 인자는 this로 설정되고 나머지 인자들은 함수의 인자로 넘어간다. → 인자의 수가 정해져 있지 않다.
apply 메소드의 첫 번째 인자는 this로 설정되고 두 번째 인자로 받는 배열 안의 요소들이 함수의 인자로 각각 넘어가게 된다.
call과 apply 메소드의 실행 결과는 같다.

var age = 100;

function foo () {
	console.log(this.age);
}

var ken = {
	age: 34
};

var bar = foo.bind(ken);

bar(); // 34

bind 메소드의 첫 번째 인자를 this로 설정하여 함수로 반환한다. → 변수에 할당해서 함수로서 실행해 줘야 한다.

var age = 100;

function foo () {
	console.log(this.age);
	console.log(arguments);
}

var ken = {
	age: 34
};

var bar = foo.bind(ken);

bar(1, 2, 3, 4, 5); 
// 34
// 1, 2, 3, 4, 5 (유사 배열)