[기탄, JS] this

죠니·2020년 10월 23일
0
post-thumbnail

앗뇽앗뇽 나는 죠니야🙋🏻‍♀️

오늘 우리는 같이 this에 대해 알아볼 것 입니다.

함수 바디 안에는 읽기 전용 값인 this가 있습니다. this는 객체의 프로퍼티인 함수에서 의미가 있습니다. 메소드를 호출하면 this는 호출한 메소드를 소유하는 객체가 됩니다.

const j = {
  name: '죠니',
  greeting() {
    console.log(`앗뇽앗뇽 나는 ${this.name}야!`);
  },
};

j.greeting(); //앗뇽앗뇽 나는 죠니야!

j.greeting()을 호출하면 this는 j에 묶입니다.
this는 함수를 어떻게 선언했느냐가 아니라 어디서 사용했느냐에 따라 달라집니다. 즉, 지금 this는 j에서 greeting을 호출하여 '죠니'를 출력하고 있는 것입니다.

const greeting = j.greeting;
console.log(greeting === j.greeting); //true
greeting();

마지막 greeting함수는 오류를 발생시킵니다.

오류 내용은

console.log(앗뇽앗뇽 나는 ${this.name}야!);
TypeError: Cannot read property 'name' of undefined

로 함수가 어디에 속해 있는지 알 수 없기 때문에 this.name을 지정할 수 없기 때문입니다.
다음은

const t = {
  leaf: '*',
  tree: function () {
    let tree = ``;
    function makeTree() {
      for (let i = 0; i < 24; i += 2) {
        for (let j = 0; j < (24 - i) / 2; j++) {
          tree += ` `;
        }
        for (let j = 0; j <= i; j++) {
          if (i === 0 && j === 0) {
            tree += `𖤐`;
          } else {
            tree += `${this.leaf}`;
          }
        }
        tree += '\n';
      }
      for (let i = 0; i < 2; i++) {
        tree += '          | | |\n';
      }
      return tree;
    }
    return `${makeTree()}
    Christmas is around corner !
        ♪๓єггא ςђгเรt๓คร♪`;
  },
};

console.log(t.tree());

실행 결과가 어떤가요?
t.tree()를 호출할 때 this를 t에 연결하지만 tree()에서 makeTree()를 호출하면 this는 t가 아닌 undefined나 전역객체에 묶이게 됩니다. 이런 문제를 해결하기 위해 사람들은 다른 변수에 this를 넣기도 합니다.

const t = {
  leaf: '*',
  tree: function () {
    const self = this;
    let tree = ``;
    function makeTree() {
      for (let i = 0; i < 24; i += 2) {
        for (let j = 0; j < (24 - i) / 2; j++) {
          tree += ` `;
        }
        for (let j = 0; j <= i; j++) {
          if (i === 0 && j === 0) {
            tree += `𖤐`;
          } else {
            tree += `${self.leaf}`;
          }
        }
        tree += '\n';
      }
      for (let i = 0; i < 2; i++) {
        tree += '          | | |\n';
      }
      return tree;
    }
    return `${makeTree()}
    Christmas is around the corner !
        ♪๓єггא ςђгเรt๓คร♪`;
  },
};

console.log(t.tree());

혹은 화살표 함수를 이용해서 this로 출력하기도 합니다.

const t = {
  leaf: '*',
  tree: function () {
    let tree = ``;
    const makeTree = () => {
      for (let i = 0; i < 24; i += 2) {
        for (let j = 0; j < (24 - i) / 2; j++) {
          tree += ` `;
        }
        for (let j = 0; j <= i; j++) {
          if (i === 0 && j === 0) {
            tree += `𖤐`;
          } else {
            tree += `${this.leaf}`;
          }
        }
        tree += '\n';
      }
      for (let i = 0; i < 2; i++) {
        tree += '          | | |\n';
      }
      return tree;
    };
    return `${makeTree()}
      Christmas is around the corner !
          ♪๓єггא ςђгเรt๓คร♪`;
  },
};

console.log(t.tree());


(이즌 잇 어도러블 가이즈 ?ㅎㅅㅎ,,,, 마이 큩 릿을,,, 트리,,,)
이렇게 나오게 됩니다.

우리는 this를 사용하는 일반적인 방법을 알아보았습니다. call, apply, bind 메소드에서는 this를 특정 값으로 지정할 수도 있습니다. 하지만 우리는 기탄이니까 여기까지 하겠습니다~

날이 갑자기 많이 추워졌어요... 다들 감기 조심하시고 오늘도 즐거운 하루 되십쇼 !

그럼 20000,

profile
앗뇽앗뇽 나는 죠니야🙋🏻‍♀️

1개의 댓글

comment-user-thumbnail
2021년 8월 8일

Nice entry. Keep up the good work!!!

답글 달기