๐Ÿ“– this

seeh_hยท2020๋…„ 12์›” 22์ผ
0

Javascript ๊ฐœ๋…์ •๋ฆฌ

๋ชฉ๋ก ๋ณด๊ธฐ
9/15

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ํ•ญ์ƒ ํ—ท๊ฐˆ๋ ธ๋˜..๐Ÿ™„ this์— ๋Œ€ํ•ด์„œ ์ •๋ฆฌ๋ฅผ ํ•ด๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

this ํ‚ค์›Œ๋“œ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ this๋Š” ์ •๋ง ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ํ‚ค์›Œ๋“œ์ด๋‹ค. ๋”ฐ๋ผ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋ผ๋ฉด this์— ๋Œ€ํ•ด์„œ ๊ผญ ์•Œ์•„๋‘์–ด์•ผ ํ•œ๋‹ค.

this์˜ ๊ฐ’์€ ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฉ๋ฒ•์— ์˜ํ•ด ๊ฒฐ์ •๋œ๋‹ค. ๋” ์ž์„ธํžˆ ๋งํ•˜๋ฉด this ๋ฐ”์ธ๋”ฉ์€ ํ•จ์ˆ˜ ํ˜ธ์ถœ ๋ฐฉ์‹, ํ•จ์ˆ˜๊ฐ€ ์–ด๋–ป๊ฒŒ ํ˜ธ์ถœ๋˜์—ˆ๋Š”์ง€์— ๋”ฐ๋ผ ๋™์ ์œผ๋กœ ๋ณ€ํ•œ๋‹ค. this์˜ ๊ฐ’์ด ์–ด๋–ป๊ฒŒ ํ• ๋‹น๋˜๋Š”์ง€ ์•Œ์•„๋ณด์ž.

โœจ๊ธฐ๋ณธ ์›์น™โœจ

this ๋ฐ”์ธ๋”ฉ์˜ ๊ธฐ๋ณธ ์›์น™ 3๊ฐ€์ง€๋ฅผ ๊ธฐ์–ตํ•˜์ž!

  1. ์ผ๋ฐ˜ ํ•จ์ˆ˜ ํ˜ธ์ถœ์—์„œ this๋Š” window๊ฐ€ ๋ฐ”์ธ๋”ฉ๋œ๋‹ค.
  2. ๋ฉ”์„œ๋“œ ํ˜ธ์ถœ์—์„œ this๋Š” ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฅดํ‚จ๋‹ค.
  3. ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ํ˜ธ์ถœ์—์„œ this๋Š” ์ƒ์„ฑ๋  instance๋ฅผ ๊ฐ€๋ฅดํ‚จ๋‹ค.

๊ฐ๊ฐ์˜ ์›์น™์„ ์ฝ”๋“œ๋ฅผ ํ†ตํ•ด ์กฐ๊ธˆ ๋” ์ž์„ธํžˆ ์‚ดํŽด๋ณด๋ฉฐ ์ดํ•ดํ•ด๋ณด์ž. ๐Ÿ˜

์›์น™1 & ์›์น™2

์ฒ˜์Œ ์˜ˆ์ œ๋Š” ์ฒซ๋ฒˆ์งธ์™€ ๋‘๋ฒˆ์งธ ์›์น™์„ ๋™์‹œ์— ํ™•์ธํ•ด ๋ณด๋Š” ์˜ˆ์ œ์ด๋‹ค.

์œ„ ์ฝ”๋“œ๋ฅผ ๋ณด๋ฉด, obj.foo()๋กœ ํ˜ธ์ถœ์ด ๋˜์—ˆ์„๋•Œ, ์•ž์˜ ๊ฐ์ฒด์ธ obj๊ฐ€ ๋ฐ”์ธ๋”ฉ๋œ๋‹ค. ์ฆ‰ ๋ฉ”์„œ๋“œ๋กœ ํ˜ธ์ถœ ๋˜์—ˆ์„๋•Œ ๋ฉ”์„œ๋“œ ์ด๋ฆ„ ์•ž์˜ ๋งˆ์นจํ‘œ(.) ์•ž์— ๊ธฐ์ˆ ํ•œ ๊ฐ์ฒด๊ฐ€ ๋ฐ”์ธ๋”ฉ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

๋ฐ˜๋ฉด, bar() ํ•จ์ˆ˜์˜ ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ์•Œ ์ˆ˜ ์žˆ๋“ฏ, ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœ๋˜๋ฉด this์—๋Š” window๊ฐ€ ๋ฐ”์ธ๋”ฉ๋œ๋‹ค.



๋˜ ๋‹ค๋ฅธ ์˜ˆ์‹œ๋ฅผ ์‚ดํŽด๋ณด์ž

์œ„์˜ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ๊ฐ™์€ ๋ฉ”์„œ๋“œ๋ฅผ ์‹คํ–‰ํ•˜๋”๋ผ๋„ ์‹คํ–‰ ๋ฐฉ์‹์— ๋”ฐ๋ผ this์— binding ๋˜๋Š” ๊ฐ์ฒด๊ฐ€ ๋‹ฌ๋ผ์ง€๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

obj.foo๋กœ ๋ฉ”์†Œ๋“œ๋กœ์„œ ์‹คํ–‰ ๋์„๋•Œ this๋Š” obj์— ๋ฐ”์ธ๋”ฉ ๋์ง€๋งŒ, ๋ณ€์ˆ˜ a์— ๋Œ€์ž…๋˜์–ด ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ์„œ ์‹คํ–‰ ๋์„๋•Œ๋Š” window ๊ฐ์ฒด๊ฐ€ ๋ฐ”์ธ๋”ฉ๋œ๋‹ค.

์ฆ‰ this๋Š” ๋Ÿฐํƒ€์ž„์—์„œ ๋™์ ์œผ๋กœ ๋ฐ”์ธ๋”ฉ ๋œ๋‹ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค!



์›์น™3

์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ this๋Š” new ํ‚ค์›Œ๋“œ์™€ ํ•จ๊ป˜ ํ˜ธ์ถœ๋˜๋ฉด ์ƒˆ๋กญ๊ฒŒ ์ƒ์„ฑ๋  ์ธ์Šคํ„ด์Šค๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค.


function C() {
  this.a = 37; // this๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์ƒ์„ฑ๋  ์ธ์Šคํ„ด์Šค๋ฅผ ๊ฐ€๋ฅดํ‚จ๋‹ค
}

let newObject = new C();
console.log(newObject.a); // 37

function C2() {
  this.a = 37;
  // ์ž„์˜๋กœ a = 38์˜ ๊ฐ’์„ ๊ฐ–๋Š” ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜
  return {a: 38};
}

let newObject2 = new C2();
console.log(newObject2.a); // 38

์œ„ ์ฝ”๋“œ์˜ ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด this๋Š” ์ƒˆ๋กญ๊ฒŒ ์ƒ์„ฑ๋  ์ธ์Šคํ„ด์Šค๋ฅผ ๊ฐ€๋ฅดํ‚จ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.



๊ฐ์ฒด ์•ˆ์— ๋ฉ”์†Œ๋“œ๋Š” ๊ฐ์ฒด์— ๋…๋ฆฝ์ ์ธ ๊ฐ์ฒด๋กœ์„œ ์กด์žฌํ•œ๋‹ค.

์ถ”๊ฐ€์ ์œผ๋กœ ํ•˜๋‚˜์˜ ์˜ˆ์ œ๋ฅผ ๋” ์‚ดํŽด๋ณด์ž.

object ์•ˆ์— ์žˆ๋Š” ๋ฉ”์„œ๋“œ๋ผ๊ณ  ํ•˜๋”๋ผ๋„ ๋‹ค๋ฅธ ๊ฐ์ฒด์— ๋Œ€์ž…๋˜์–ด์„œ ์‹คํ–‰ ๋  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ ์ด์œ ๋Š” object์•ˆ์— ์ƒ์„ฑ๋œ sayName ๋ฉ”์„œ๋“œ๋Š” obj1์— ํฌํ•จ๋œ ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ๋…๋ฆฝ์ ์ธ ๊ฐ์ฒด๋กœ์„œ ์™ธ๋ถ€์— ์กด์žฌํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

๋‹จ์ง€ sayName ํ”„๋กœํผํ‹ฐ๊ฐ€ function์„ ๊ฐ€๋ฅดํ‚ค๊ณ  ์žˆ์„ ๋ฟ์ด๋‹ค.

๋”ฐ๋ผ์„œ sayName์€ ๋‹ค๋ฅธ ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋กœ ํ˜ธ์ถœ ๋  ์ˆ˜๋„ ์žˆ๊ณ  ์ผ๋ฐ˜ ๋ณ€์ˆ˜์— ๋‹ด์•„์ ธ ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœ ๋  ์ˆ˜๋„ ์žˆ๋‹ค.

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์—์„œ์˜ this

์•ž์—์„œ ์ผ๋ฐ˜ this์— ๋Œ€ํ•ด์„œ ์‚ดํŽด๋ณด์•˜๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ES6์—์„œ ์ƒˆ๋กœ ์ถ”๊ฐ€๋œ ์‚ฌ์–‘์ธ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์—์„œ this๋Š” ์–ด๋–ค ์ ์ด ๋‹ค๋ฅผ๊นŒ?

๊ฐ€์žฅ ํฐ ์ฐจ์ด์ ์€, ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” this ๋ฐ”์ธ๋”ฉ์ด ์—†๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜ ์ž์ฒด์˜ this, argument, super, new.target ๋ฐ”์ธ๋”ฉ์„ ๊ฐ–์ง€์•Š๋Š”๋‹ค.

๋”ฐ๋ผ์„œ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ this๋ฅผ ์ฐธ์กฐํ•˜๋ฉด ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this๋ฅผ ๊ทธ๋Œ€๋กœ ์ฐธ์กฐํ•˜๊ฒŒ ๋œ๋‹ค.
๋‹ค์Œ ์˜ˆ์‹œ๋ฅผ ๋ณด์ž.

const counter = {
  num: 1,
  increase: () => ++this.num
};

console.log(counter.increase()); // NaN

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” this๊ฐ€ ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์œ„ ์Šค์ฝ”ํ”„์ธ ์ „์—ญ ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•ด์„œ this.num์€ ์ „์—ญ๊ฐ์ฒด์˜ num์„ ์ฐธ์กฐํ•˜๊ฒŒ ๋œ๋‹ค. ๋”ฐ๋ผ์„œ undefined์— ++์—ฐ์‚ฐ์„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— NaN์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

์œ„์˜ ์˜ˆ์ œ๋ฅผ ๋ณด๋ฉด ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜๋Š” ๊ฒƒ์€ ๊ฝค๋‚˜ ๋ถˆํŽธํ•ด ๋ณด์ธ๋‹ค. ๊ทธ๋ ‡๋‹ค๋ฉด ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ์™œ ES6์—์„œ ์ƒˆ๋กœ ๋„์ž…๋˜์—ˆ์„๊นŒ?

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ this๊ฐ€ ์ „์—ญ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค!
๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ๋ณด์ž.

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map(function (item) {
      return this.prefix + item; // TypeError: Cannot read property 'prefix' of undefined
    });
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));

Prefixer ๋‚ด๋ถ€์˜ add ๋ฉ”์„œ๋“œ๋ฅผ ์‚ดํŽด๋ณด์ž. ๊ฐœ๋ฐœ์ž๊ฐ€ ์˜๋„ํ•œ ๋™์ž‘์€ ์ „๋‹ฌํ•œ ๋ฐฐ์—ด์˜ ์›์†Œ๋ฅผ ๋Œ๋ฉฐ prefix์ธ '-webkit-'์„ ๋ถ™์ธ ๋ฌธ์ž์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

ํ•˜์ง€๋งŒ ์ผ๋ฐ˜ ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœ๋œ arr.map์•ˆ์—์„œ this๋Š” ์ „์—ญ ๊ฐ์ฒด์ธ window๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ธฐ ๋•Œ๋ฌธ์— prefix๊ฐ’์„ ์ฐธ์กฐํ•  ์ˆ˜ ์—†๋‹ค.

์ด๋Ÿฐ ๊ฒฝ์šฐ ๊ธฐ์กด์—๋Š” bind๋ฅผ ํ†ตํ•ด this๋ฅผ bindingํ•˜์—ฌ ํ•ด๊ฒฐํ•˜์—ฌ์•ผ ํ–ˆ๋‹ค. ES6 ์ด์ƒ์˜ ๊ฐœ๋ฐœํ™˜๊ฒฝ์—์„œ๋Š” ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜๋ฉด ์œ„ ๋ฌธ์ œ๋ฅผ ์‰ฝ๊ฒŒ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•œ ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ๋ณด์ž.

class Prefixer {
  constructor(prefix) {
    this.prefix = prefix;
  }

  add(arr) {
    return arr.map(item => this.prefix + item);
  }
}

const prefixer = new Prefixer('-webkit-');
console.log(prefixer.add(['transition', 'user-select']));
// ['-webkit-transition', '-webkit-user-select']

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” this ๋ฐ”์ธ๋”ฉ์ด ์—†๊ธฐ ๋•Œ๋ฌธ์— ์ƒ์œ„ ์Šค์ฝ”ํ”„์ธ Prefixer class๋ฅผ ์ฐธ์กฐํ•˜๊ฒŒ ๋œ๋‹ค.

๋˜ํ•œ class ์•ˆ์—์„œ์˜ this๋Š” ์ƒˆ๋กœ ๋งŒ๋“ค์–ด์งˆ ์ธ์Šคํ„ด์Šค๋ฅผ ์ฐธ์กฐํ•˜๊ธฐ ๋•Œ๋ฌธ์—,
ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜๋ฉด ์›ํ•˜๋Š” ๋Œ€๋กœ ๋™์ž‘ํ•˜๋„๋ก ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค.๐Ÿ˜Š

์ถœ์ฒ˜

https://poiemaweb.com/js-this
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this

profile
์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ž ์„ฑ์žฅ๊ธฐ๐Ÿ˜Ž

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