[JS] this์™€ arrow function

Junoยท2021๋…„ 5์›” 29์ผ
12
post-thumbnail

๐ŸŽ‰ ๋“ค์–ด๊ฐ€๊ธฐ

๋ณธ ํฌ์ŠคํŒ…์€ ์ฝ”์–ด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ๋Š” ์ฑ…์„ ์ฃผ์ œ๋กœ 27๊ธฐ SOPT ์ž๊ธˆ์„ฑ ์Šคํ„ฐ๋””์˜ ์ •์žฌํ˜„๋‹˜์˜ ๋ฐœํ‘œ์ž๋ฃŒ๋ฅผ ์žฌ๊ตฌ์„ฑํ•˜์—ฌ ์ž‘์„ฑํ•˜์˜€์Šต๋‹ˆ๋‹ค!

JavaScript์—์„œ๋Š” ์„ ์–ธํ•  ๋•Œ ๊ฒฐ์ •๋˜๋Š” ๋ถ€๋ถ„๊ณผ ํ˜ธ์ถœํ•  ๋•Œ ๊ฒฐ์ •๋˜๋Š” ๋ถ€๋ถ„์ด ์žˆ๋‹ค.

this๋Š” ํ˜ธ์ถœํ•  ๋•Œ ๊ฒฐ์ •๋˜๋Š” ๊ฒƒ์ธ๋ฐ, this๋ผ๋Š” ๊ฐ’์€ ํ•จ์ˆ˜๋ฅผ ์–ด๋–ป๊ฒŒ ์‹คํ–‰์‹œํ‚ค๋Š๋ƒ์— ๋”ฐ๋ผ์„œ ๋‹ฌ๋ผ์ง„๋‹ค.

์ด ์ฃผ์ œ๋ฅผ ๋ฐฐ์šฐ๋Š” ์ด์œ ๋Š” this์˜ ๊ฐ’์„ ํŒ๋ณ„ํ•  ๋•Œ ์–ด๋ ค์›€์„ ๊ฒช๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์€๋ฐ, this์˜ ๊ฐ’์ด ๊ฒฐ์ •๋˜๋Š” 4๊ฐ€์ง€ ๊ฒฝ์šฐ๋ฅผ ์ž˜ ์—ฐ์Šตํ•œ๋‹ค๋ฉด, this์˜ ๊ฐ’์„ ํŒ๋ณ„ํ•  ๋•Œ ๋„์›€์ด ๋œ๋‹ค.

this

  1. ํ• ๋จธ๋‹ˆ: ๋‚˜๋Š” ํ—ˆ๋ฆฌ๊ฐ€ ์•„ํ”„๋‹ค ( ๋‚˜ === ํ• ๋จธ๋‹ˆ )
  2. ์•„๋ฒ„์ง€: ๋‚˜๋Š” ๋‹ค๋ฆฌ๊ฐ€ ์•„ํ”„๋‹ค ( ๋‚˜ === ์•„๋ฒ„์ง€ )
  3. ์–ด๋จธ๋‹ˆ: ๋‚˜๋Š” ๋จธ๋ฆฌ๊ฐ€ ์•„ํ”„๋‹ค ( ๋‚˜ === ์–ด๋จธ๋‹ˆ )

JS์—์„œ this๋ž€ ์œ„์˜ ๋ฌธ์žฅ ์† '๋‚˜'์™€ ๋น„์Šทํ•˜๋‹ค. ์–ด๋–ค ๋ฌธ๋งฅ์ด๋ƒ์— ๋”ฐ๋ผ ๊ทธ ์˜๋ฏธ(๊ฐ’)๊ฐ€ ๋ณ€ํ•œ๋‹ค.

๋”ฐ๋ผ์„œ '๋‚˜'๋Š” this์™€ ๋น„์Šทํ•œ ๋ฌธ๋งฅ์ด๋‹ค.

์ฆ‰ this๋Š” ์–ด๋–ป๊ฒŒ ์‹คํ–‰ํ•˜๋ƒ์— ๋”ฐ๋ผ์„œ this์˜ ๊ฐ’์ด ๋ฐ”๋€Œ๊ฒŒ ๋œ๋‹ค!

์‹คํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” 4๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

  1. ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰๋ฐฉ์‹
  2. Dot Notation ์‹คํ–‰๋ฐฉ์‹
  3. ๋ฉ”์†Œ๋“œ(call() apply() bind())๋ฅผ ์ด์šฉํ•œ ์‹คํ–‰๋ฐฉ์‹
  4. new๋ฅผ ์ด์šฉํ•œ ์‹คํ–‰๋ฐฉ์‹

์ฆ‰, ์ด 4๊ฐ€์ง€ ์ค‘ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์‹คํ–‰ํ•˜๋Š๋ƒ์— ๋”ฐ๋ผ this์˜ ๊ฐ’์€ ๋ฐ”๋€๋‹ค.

1. ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰๋ฐฉ์‹

์ „์—ญ๊ณต๊ฐ„์—์„œ this๋Š” ์ „์—ญ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค. ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ ์ „์—ญ๊ฐ์ฒด๋Š” window์ด๋‹ค.

function foo(){
	console.log(this); // 'this' === global object (๋ธŒ๋ผ์šฐ์ € ์ƒ์—์„œ๋Š” window ๊ฐ์ฒด)
}
foo();

์•„๋ฌด ํŠน์ด์  ์—†์ด ๊ทธ๋ƒฅ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ ์‹œํ‚ค๋Š” ๊ฒฝ์šฐ์ด๋‹ค. ์ด๋ ‡๊ฒŒ ์ผ๋ฐ˜์ ์œผ๋กœ ๋ฐ”๋กœ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ค๋Š” ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰๋ฐฉ์‹์—์„œ this ๋Š” global object๊ฐ€ ๋œ๋‹ค. ( ๋ธŒ๋ผ์šฐ์ € ์ƒ์—์„œ๋Š” window ๊ฐ์ฒด )

์˜ˆ์™ธ) strict mode

// ์—„๊ฒฉํ•œ mode 

'use strict';

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

์‚ฌ์‹ค์ƒ ๊ฐœ๋ฐœ์ž๋“ค์ด this๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ window ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋ ค๊ณ  this๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒฝ์šฐ๋Š” ๊ฑฐ์˜ ์—†๋‹ค. ๋”ฐ๋ผ์„œ ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰๋ฐฉ์‹์—์„œ 'use strict' ๋ชจ๋“œ์—์„œ this๋Š” window๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค์ง€ ์•Š๊ณ , undefined๊ฐ€ ๋œ๋‹ค.

์—ฌ๊ธฐ์„œ undefined ๋ผ๋Š” ๊ฒƒ์€ ๊ฐ์ฒด๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— undefined ์˜ name ์†์„ฑ์„ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.

ํ•ต์‹ฌ์€ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ๋ถ€๋ถ„์„ ์ฐพ๋Š” ๊ฒƒ์ด๋‹ค.

// example 1

let age = 100;

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

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

foo();

์—ฌ๊ธฐ์„œ foo()๋ฅผ ์‹คํ–‰์‹œํ‚ค๋ฉด bar()๊ฐ€ ์‹คํ–‰๋  ๋•Œ ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰ ๋ฐฉ์‹์œผ๋กœ ์‹คํ–‰ํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— this.age์˜ this๋Š” window ๊ฐ์ฒด๊ฐ€ ๋œ๋‹ค!

๊ฐ„๋‹จํ•˜๊ฒŒ ์ƒ๊ฐํ•˜์ž, this๋ผ๋Š” ๊ฐ’์„ ์“ฐ๋Š” ํ•จ์ˆ˜๊ฐ€ ์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ์‹คํ–‰ ๋˜๋Š”์ง€๋ฅผ ๋ดค์„ ๋•Œ, ๊ทธ ๋ถ€๋ถ„์ด ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰ ๋ฐฉ์‹์ด๊ธฐ ๋•Œ๋ฌธ์—, ์ฆ‰ this๊ฐ€ window์ด๊ธฐ ๋•Œ๋ฌธ์— global ๋‹จ๊ณ„์˜ ๊ฐ’์ธ 100์ด ๋‚˜์˜ค๊ฒŒ ๋œ๋‹ค.

ํ•ต์‹ฌ์€ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ๋ถ€๋ถ„์„ ์ฐพ๋Š” ๊ฒƒ!

// example 2

let baseBall = 4;

function foo(){
	let baseBall = 3;
	bar();
}

function bar() {
	console.log(this.baseBall);
}

foo(); // ?

์ฒซ๋ฒˆ์งธ ๋ฐฉ์‹ ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰๋ฐฉ์‹ ์ •๋ฆฌ

  • ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰๋ฐฉ์‹ โ†’ this๋Š” ์ „์—ญ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.
  • strict mode ์—์„œ๋Š” this ๋ฒ„๊ทธ๋ฅผ ๋ง‰๊ธฐ์œ„ํ•ด undefined๋กœ ์ฒ˜๋ฆฌ๋œ๋‹ค.
  • 2๊ฐ€์ง€ ์˜ˆ์ œ์—์„œ ๋ณธ ๊ฒƒ์ฒ˜๋Ÿผ ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ๋ถ€๋ถ„์„ ์ฐพ์œผ๋ฉด this์˜ ๊ฐ’์„ ํŒ๋ณ„ ๊ฐ€๋Šฅํ•˜๋‹ค!

2. Dot Notation ์‹คํ–‰๋ฐฉ์‹

Dot Notation์€ ๊ฐ€์žฅ ๊ฐ„ํŽธํ•˜๊ฒŒ this์˜ ๊ฐ’์„ ํŒ๋ณ„์ด ๊ฐ€๋Šฅํ•˜๋‹ค. . ์•ž์— ์žˆ๋Š” ๊ฐ์ฒด๊ฐ€ this๋กœ ์„ค์ •์ด ๋˜๋Š”๋ฐ, ์ฃผ์˜ํ• ์ ์€ ๋‹ค๋ฅธ ์‹คํ–‰๋ฐฉ์‹๊ณผ ํ˜ผํ•ฉ๋˜์–ด์žˆ์„๋•Œ ํ˜ผ๋™์ด ์˜ฌ ์ˆ˜ ์žˆ์œผ๋‹ˆ ๊ทธ ๋ถ€๋ถ„์„ ์œ ์˜ํ•ด์•ผํ•œ๋‹ค.

//example 1

let age = 100;

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

ken.foo();

.์•ž์— ์žˆ๋Š” ๊ฐ์ฒด๊ฐ€ this๋กœ ์„ค์ •์ด ๋œ๋‹ค. ๋”ฐ๋ผ์„œ ken์ด๋ผ๋Š” ๊ฐ์ฒด๊ฐ€ this์˜ ๊ฐ’์œผ๋กœ ์„ค์ •์ด ๋œ๋‹ค.

//example 2

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

let age = 100;

let ken = {
	age: 35,
	foo: foo
};

let wan = {
	age: 31,
	foo: foo
}

ken.foo();
wan.foo();

๋งˆ์ฐฌ๊ฐ€์ง€๋กœ .์•ž์—์žˆ๋Š” ken๊ณผ wan ๊ฐ์ฒด์˜ age๊ฐ€ ์ถœ๋ ฅ๋œ๋‹ค.

// example 3

let age = 100;

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

let wan = {
	age: 31,
	foo: ken.foo
}

var foo = ken.foo;  // bar() ๋ผ๋Š” ํ•จ์ˆ˜ ์ž์ฒด๋ฅผ foo์— ๋„ฃ์–ด๋‘” ๊ฒƒ

ken.foo(); // 35
wan.foo(); // 31
foo(); //     100 -> ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰๋ฐฉ์‹

ken์˜ ๊ฒฝ์šฐ .์œผ๋กœ ์ ‘๊ทผํ•œ ๊ฐ์ฒด์˜ 35

wan์˜ ๊ฒฝ์šฐ foo๊ฐ€ ken.foo ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ์— 31

var foo ์˜ ๊ฒฝ์šฐ ken.foo ํ•จ์ˆ˜๋ฅผ ๋œปํ•˜๊ธฐ์— ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰๋ฐฉ์‹ ์ด๋ฏ€๋กœ ์ „์—ญ์˜ 100

// example 4

let score = 4;

let SSG = {
	score: 5,
	foo: function bar() {
		console.log(this.score);
	}
};

let Doosan = {
	score: 3,
	foo: SSG.foo
}

var foo = SSG.foo;

SSG.foo(); // 5
Doosan.foo(); // 3
foo(); // 4 

Dot Notaion ์ •๋ฆฌ

  • .์•ž์— ์žˆ๋Š” ๊ฐ์ฒด๊ฐ€ this๋กœ ์„ค์ •์ด ๋œ๋‹ค.

3. ๋ช…์‹œ์ ์œผ๋กœ this๋ฅผ ๋ฐ”์ธ๋”ฉ ํ•˜๋Š” ๋ฐฉ๋ฒ• (call/apply/bind)

this์˜ ๊ฐ’์„ ํŒ๋ณ„ํ•˜๋Š”๊ฒƒ์€ ํ•จ์ˆ˜๊ฐ€ ์–ด๋–ป๊ฒŒ ์‹คํ–‰๋˜๋Š๋ƒ์— ๋”ฐ๋ผ ๊ตฌ๋ถ„๋˜๋Š”๋ฐ, ๊ทธ ์„ธ๋ฒˆ์งธ ๋ฐฉ์‹์œผ๋กœ ๋ฉ”์†Œ๋“œ๋ฅผ ํ†ตํ•ด ๋ช…์‹œ์ ์œผ๋กœ this๊ฐ€ ๋ฌด์—‡์„ ๋‚˜ํƒ€๋‚ด๋Š”์ง€ ๋ฐ”์ธ๋”ฉ ํ•ด์ฃผ๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด์ž.

( function.prototype.call / function.prototype.bind / function.prototype.apply )

์ด๊ฒƒ๋“ค์€ ํ•จ์ˆ˜๊ฐ€ ๊ฐ–๊ณ  ์žˆ๋Š” ๋ฉ”์†Œ๋“œ๋“ค์ธ๋ฐ, ์ด ๋ฉ”์†Œ๋“œ๋“ค์„ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ๋„ this์˜ ๊ฐ’์ด ๋ณ€ํ•˜๊ฒŒ ๋œ๋‹ค.

1. call()

// call() example 1

let age = 100;

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

let wan = {
	age: 31;
};

foo();  // ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰๋ฐฉ์‹

foo.call(wan);  // 31 

๋งˆ์ง€๋ง‰์ค„์— ๋ณด๋ฉด foo ๋ผ๋Š” ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰ ๋˜๋Š”๋ฐ, call(wan) ์—์„œ wan๊ฐ์ฒด๊ฐ€ foo๋ผ๋Š” ํ•จ์ˆ˜์˜ this๋กœ ์„ค์ •๋˜์–ด ๋“ค์–ด๊ฐ€๊ฒŒ ๋œ๋‹ค.

2. apply()

// apply() example 1

let age = 100;

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

let ken = {
	age: 35;
};

foo();

foo.apply(ken); // 35

๋งˆ์ง€๋ง‰์ค„์— ๋ณด๋ฉด foo ๋ผ๋Š” ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰ ๋˜๋Š”๋ฐ, apply(ken) ์—์„œ ken๊ฐ์ฒด๊ฐ€ foo๋ผ๋Š” ํ•จ์ˆ˜์˜ this๋กœ ์„ค์ •๋˜์–ด ๋“ค์–ด๊ฐ€๊ฒŒ ๋œ๋‹ค.

์ •๋ฆฌํ•˜๋ฉด, call๊ณผ apply ์˜ ๊ฒฝ์šฐ ์ผ๋ฐ˜ํ•จ์ˆ˜ ์‹คํ–‰๋ฐฉ์‹์ด๋‚˜, dot notation์„ ์‚ฌ์šฉํ–ˆ์„ ๋•Œ์™€๋Š” ๋‹ค๋ฅด๊ฒŒ, ์šฐ๋ฆฌ๊ฐ€ ์ง์ ‘์ ์œผ๋กœ ๊ฐ์ฒด๋ฅผ ์ง€์ •ํ•ด์„œ this์— ํ• ๋‹นํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ฐจ์ด์ ์ด ์žˆ๋‹ค.

//example 3

let age = 100;

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

let 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

์•ž์—์„œ๋Š” ์ธ์ž๋ฅผ ํ•˜๋‚˜๋งŒ ๋ฐ›์•˜์—ˆ๋Š”๋ฐ, ์ธ์ž๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ ๋ฐ›๋Š”๊ฒฝ์šฐ ํ™œ์šฉ ๋ฐฉ์‹์ด ๋ฐ”๋€Œ๊ฒŒ ๋œ๋‹ค.

foo.call() ์˜ ๊ฒฝ์šฐ ์ฒซ๋ฒˆ์งธ ์ธ์ž๊ฐ€ ๊ฐ์ฒด๋กœ ์ธ์ •์ด ๋˜๊ณ , ๋‘๋ฒˆ์งธ๋ถ€ํ„ฐ ๋‚˜๋จธ์ง€ ์ธ์ž๋“ค์„ foo๋ผ๋Š” ํ•จ์ˆ˜์˜ ์ธ์ž๋“ค๋กœ ๋“ค์–ด๊ฐ€๊ฒŒ ๋œ๋‹ค. a = 1 b = 2 c = 3 d = 4 e = 5 ๊ฐ€ ๋œ๋‹ค.

foo.apply ์˜ ๊ฒฝ์šฐ ์ฒซ๋ฒˆ์งธ ์ธ์ž๊ฐ€ ๊ฐ์ฒด๋กœ ์ธ์ •์ด ๋˜๊ณ , ๋‘๋ฒˆ์งธ ์ธ์ž๊ฐ€ ๋ฐฐ์—ดํ˜•ํƒœ๋กœ ๊ฒฐ์ •ํ•ด์„œ ๋ฐฐ์—ด์˜ ์›์†Œ๋“ค์ด ๊ฐ๊ฐ์˜ argument๋กœ ๋“ค์–ด๊ฐ€๊ฒŒ ๋œ๋‹ค.

์ •๋ฆฌํ•˜๋ฉด, call์€ ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ธ์ž์˜ ์ˆ˜๊ฐ€ ์ •ํ•ด์ ธ ์žˆ์ง€ ์•Š๋‹ค. ๊ทธ๋Ÿฐ๋ฐ, apply๋Š” ์ธ์ž๋ฅผ 2๊ฐœ๋งŒ ๋ฐ›๋Š”๋‹ค. ์ฒซ๋ฒˆ์งธ ์ธ์ž๊ฐ€ this๊ฐ’์œผ๋กœ ์„ค์ •ํ•˜๊ณ  ์‹ถ์€ ๊ฐ์ฒด๋ฅผ ๋„ฃ์–ด์ฃผ๊ณ , ๋‘๋ฒˆ์งธ ์ธ์ž๋Š” ๋ฐฐ์—ด์„ ๋„ฃ์–ด์ฃผ๊ณ , ๋ฐฐ์—ด์˜ ์›์†Œ๋“ค์ด ์•„๊ทœ๋จผํŠธ๋กœ ๋“ค์–ด๊ฐ„๋‹ค.

3. bind()

apply์™€ call ๋ฉ”์„œ๋“œ๋“ค์€ ๊ฐ์ฒด์™€ ์›์†Œ๋ฅผ ์„ค์ •ํ•œ ๋’ค ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ ์‹œ์ผฐ๋‹ค.

๋ฐ”์ธ๋“œ๋Š” call/apply ์™€ ๋‹ค๋ฅด๊ฒŒ ๋ฐ”๋กœ ํ•ด๋‹นํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ค์ง€ ์•Š๋Š”๋‹ค. ๋Œ€์‹  ๊ฐ์ฒด๋ฅผ bindํ•œ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•ด์ค€๋‹ค. ํ•ต์‹ฌ์€ ๊ฐ์ฒด๋ฅผ ์„ค์ •ํ•˜๊ณ , ์„ค์ •๋œ ํ•จ์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ

// example 4
let age = 100;

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

let ken = {
	age: 34
}

let bar = foo.bind(ken); // bar์— ๋ฐ˜ํ™˜ํ•œ๋‹ค.

bar();

foo.bind(ken) ์„ ๋ณด๋ฉด, ken์„ this๊ฐ’์œผ๋กœ ์„ค์ •์„ ํ•˜๋Š”๊ฒƒ์€ ๋งž์ง€๋งŒ, ์‹คํ–‰์‹œํ‚ค์ง€๋Š” ์•Š๊ณ  ๋ฐ˜ํ™˜์„ ํ•œ๋‹ค.

// example 5
let age = 100;

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

let ken = {
	age:34
};

let bar = foo.bind(ken);

bar(1,2,3,4,5); // ์ด์ œ์„œ์•ผ ์‹คํ–‰์ด ๋œ๋‹ค.

๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ken๊ฐ์ฒด๋ฅผ this๊ฐ’์œผ๋กœ ์„ค์ • ํ•ด ์ค€ ๋’ค, bar์— ์›์†Œ๋ฅผ ์‚ฝ์ž…ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

๋ฉ”์†Œ๋“œcall() apply() bind() ๋ฅผ ์ด์šฉํ•œ ์‹คํ–‰๋ฐฉ์‹ ์ •๋ฆฌ

  • ํ•˜๋‚˜์˜ ์•„๊ทœ๋จผํŠธ๋ฅผ ๋ฐ›์„ ๋•Œ call( object ) ๋ฉ”์†Œ๋“œ์˜ ๊ฒฝ์šฐ, object๊ฐ€ this๊ฐ’์ด ๋˜์–ด ์‹คํ–‰๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์—ฌ๋Ÿฌ๊ฐœ์˜ ์•„๊ทœ๋จผํŠธ๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ๊ทธ ๊ฒฝ์šฐ ์ฒซ๋ฒˆ์งธ ์•„๊ทœ๋จผํŠธ๋Š” ๊ฐ์ฒด๊ฐ€ this๋กœ ์„ค์ •์ด ๋˜๋ฉฐ, ๋‚˜๋จธ์ง€ ๊ฐ’์€ ํ•จ์ˆ˜์˜ ์•„๊ทœ๋จผํŠธ๋กœ ๋“ค์–ด๊ฐ€๊ฒŒ ๋˜์–ด ์‹คํ–‰๋œ๋‹ค.
  • ํ•˜๋‚˜์˜ ์•„๊ทœ๋จผํŠธ๋ฅผ ๋ฐ›์„ ๋•Œ apply( object ) ๋ฉ”์†Œ๋“œ์˜ ๊ฒฝ์šฐ, object๊ฐ€ this๊ฐ’์ด ๋˜์–ด ์‹คํ–‰๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๋‹จ 2๊ฐœ์˜ ์•„๊ทœ๋จผํŠธ๋ฅผ ๋ฐ›์„ ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์ฒซ๋ฒˆ์งธ ์•„๊ทœ๋จผํŠธ๋Š” ๊ฐ์ฒด๊ฐ€ this๋กœ ์„ค์ •์ด ๋˜๋ฉฐ, ๋‚˜๋จธ์ง€ ๊ฐ’์€ ๋ฐฐ์—ด๋กœ ๊ฒฐ์ •์ด ๋˜๋Š”๋ฐ, ๋ฐฐ์—ด์˜ ์›์†Œ๋“ค์ด ํ•จ์ˆ˜์˜ ์•„๊ทœ๋จผํŠธ๋กœ ๋“ค์–ด๊ฐ€๊ฒŒ ๋˜์–ด ์‹คํ–‰๋œ๋‹ค.
  • ๋งˆ์ง€๋ง‰์œผ๋กœ bind()์˜ ๊ฒฝ์šฐ object๊ฐ€ this์˜ ๊ฐ’์ด ๋˜๋Š” ๊ฒƒ์€ ๋™์ผ ํ•˜๋‚˜, ์‹คํ–‰์€ ๋˜์ง€ ์•Š๊ณ  ๋ฐ˜ํ™˜์„ ํ•œ๋‹ค.

4. new๋ฅผ ์ด์šฉํ•œ ์‹คํ–‰๋ฐฉ์‹

this๋ผ๋Š” ๊ฐ’์€ ํ•จ์ˆ˜๋ฅผ ์–ด๋–ป๊ฒŒ ์‹คํ–‰์‹œํ‚ค๋Š๋ƒ์— ๋”ฐ๋ผ์„œ ๋‹ฌ๋ผ์ง„๋‹ค.

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

new foo();  // ์ด๋Ÿด๋•Œ this์˜ ๊ฐ’์€ ๋นˆ ๊ฐ์ฒด๊ฐ€ ๋“ค์–ด๊ฐ„๋‹ค.

์ด๋•Œ new๋ฅผ ํ•˜๋ฉด ๋นˆ ๊ฐ์ฒด๊ฐ€ ์ƒˆ๋กœ ์ƒ์„ฑ๋˜๋ฉด์„œ ๋นˆ ๊ฐ์ฒด๊ฐ€ this์†์— ํ• ๋‹น ๋œ๋‹ค.

[new โ†’ ์ƒˆ๊ฑฐ] this์— ๋นˆ ๊ฐ์ฒด๊ฐ€ ์ƒˆ๋กœ์ด ํ• ๋‹น๋˜์–ด ์‹คํ–‰๋œ๋‹ค.

function foo(){
	this.name = '์ž๊ธˆ์„ฑ';
}

var jagum = new foo();

console.log(jagum);
function foo(){
	// this = {};
	
	this.name = '์ž๊ธˆ์„ฑ';

	//{
	//	name: '์ž๊ธˆ์„ฑ'
	//}

	// return this;
}

var jagum = new foo();

console.log(jagum);  // 

์ฆ‰,

foo()์—๋Š” ๋ฆฌํ„ด๊ฐ’์ด ์ „ํ˜€ ์—†๋Š”๋ฐ, new๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด return this๊ฐ€ ๋œ๋‹ค. (์˜ˆ์™ธ๊ฐ€ ์žˆ์ง€๋งŒ)

new๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋นˆ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ์ด ๋˜๊ณ , ์šฐ๋ฆฌ๊ฐ€ return์„ ๋ช…์‹œํ•˜์ง€ ์•Š๋”๋ผ๋„ return this๊ฐ€ ์ž๋™์œผ๋กœ ์„ค์ •์ด ๋œ๋‹ค.

new๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰์‹œํ‚ค๋ฉด, this={} ๋นˆ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ์ด ๋˜๊ณ  ๋งˆ์ง€๋ง‰์—๋Š” this๊ฐ€ ๋ฆฌํ„ด์ด ๋œ๋‹ค.

// ์ธ์ž๋ฅผ ๋„˜๊ฒจ์ฃผ๋Š” ๊ฒฝ์šฐ

function foo(name){
	this.name = name;
}

let jagum = new foo('์ž๊ธˆ์„ฑ');

console.log(jagum);

๊ธฐ๋ณธ์ ์œผ๋กœ new๋ฅผ ํ•˜๋ฉด์„œ ์ธ์ž๋ฅผ ๋„ฃ์–ด์ค˜๋„ ์ƒ๊ด€์—†๋‹ค.

// ์ƒ์„ฑ์ž ํ•จ์ˆ˜

function Person(name, age){
	this.name = name;
	this.age = age;
}

// ์ธ์Šคํ„ด์Šค

let Hong = new Person('HGD', 20);  // ์ƒˆ๋กœ์šด ๋นˆ ๊ฐ์ฒด๊ฐ€ ์ƒ์„ฑ๋˜์–ด ๊ฐ๊ฐ ๋‹ค๋ฅธ ๊ฐ์ฒด๊ฐ€ ๋งŒ๋“ค์–ด์ง„๋‹ค.
let Kim = new Person('KKK', 24);

console.log(Hong);
console.log(Kim);

new๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ผ๊ณ  ํ•œ๋‹ค. ์ผ๋ฐ˜์ ์œผ๋กœ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ์ฒซ๊ธ€์ž๋ฅผ ๋Œ€๋ฌธ์ž๋กœ ํ‘œ๊ธฐํ•ด์ค€๋‹ค.

new๋ฅผ ์ด์šฉํ•œ ์‹คํ–‰๋ฐฉ์‹ ์ •๋ฆฌ

  • new๋ฅผ ํ•˜๋ฉด ๋นˆ ๊ฐ์ฒด๊ฐ€ ์ƒˆ๋กœ ์ƒ์„ฑ๋˜๋ฉด์„œ ๋นˆ ๊ฐ์ฒด๊ฐ€ this์†์— ํ• ๋‹น ๋œ๋‹ค.
  • ์‚ฌ์šฉ์ž๊ฐ€ ๋”ฐ๋กœ return ์„ ์–ธ์„ ํ•˜์ง€ ์•Š์•„๋„ this๊ฐ€ ๋ฐ˜ํ™˜๋œ๋‹ค.
  • new๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์ƒ์„ฑํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ผ๊ณ  ํ•œ๋‹ค.

์‚ฌ์‹ค ๊ฐ๊ฐ์˜ ์ƒํ™ฉ๋งŒ ๋ณด๋ฉด ๊ฐ„๋‹จํ•ด ๋ณด์ด์ง€๋งŒ, ์ฝ”๋“œ๊ฐ€ ์ปค์ง€๋ฉด ์ปค์งˆ ์ˆ˜๋ก this๋ฅผ ํŒ๋ณ„ํ•˜๋Š” ๊ฒƒ์€ ์–ด๋ ต๊ธฐ ๋•Œ๋ฌธ์—, ์ด 4๊ฐ€์ง€ ์ƒํ™ฉ์„ ์™„๋ฒฝํ•˜๊ฒŒ ์ˆ™์ง€ํ•œ๋‹ค๋ฉด this๋ฅผ ํŒ๋ณ„ํ•˜๋Š” ๊ฒƒ์ด ์–ด๋ ต์ง€ ์•Š๋‹ค.

๐ŸŽฏ ES6 Arrow function

์ผ๋ฐ˜ํ•จ์ˆ˜ ์—์„œ์˜ this๋Š” ํ˜ธ์ถœ๋  ๋•Œ ์ฆ‰, ๋™์ ์œผ๋กœ ํ˜„์žฌ ์‹คํ–‰๋˜๋Š” ์ปจํ…์ŠคํŠธ์— ๋”ฐ๋ผ์„œ ์–ด๋–ค ๊ฐ์ฒด๊ฐ€ ๋ ์ง€ ๊ฒฐ์ •๋œ๋‹ค. ์„ ์–ธ๋˜๋Š” ์‹œ์ ์ด ์•„๋‹ˆ๋ผ, ํ•จ์ˆ˜๊ฐ€ ์‹คํ–‰๋˜๋Š” ์‹œ์ ์˜ ๋ฐ”์ธ๋”ฉ ๋ฐฉ๋ฒ•์— ๋”ฐ๋ผ ๊ฒฐ์ •๋˜๋Š” ๊ฒƒ์ด๋‹ค!

ํ•˜์ง€๋งŒ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜(arrow function)๋Š” ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ this์— ๋ฐ”์ธ๋”ฉํ•  ๊ฐ์ฒด๊ฐ€ ์ •์ ์œผ๋กœ ๊ฒฐ์ •๋œ๋‹ค. ๋™์ ์œผ๋กœ ๊ฒฐ์ •๋˜๋Š” ์ผ๋ฐ˜ ํ•จ์ˆ˜์™€๋Š” ๋‹ฌ๋ฆฌ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์˜ this ์–ธ์ œ๋‚˜ ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค!

const person = () =>{
    this.age = 0;
    console.log('age: ', age);
    console.log(this)

    setTimeout(()=>{
        this.age += 1;
        console.log('arrow age: ',this.age); // ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.(์ •์ ์œผ๋กœ ๊ฒฐ์ •๋จ)
    },1000);
}

person();
profile
์‚ฌ์‹ค์€ ๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ๊ธฐ๋กํ•œ ๊ฒƒ ๐Ÿ˜†

0๊ฐœ์˜ ๋Œ“๊ธ€