앗뇽앗뇽 나는 죠니야🙋🏻♀️
오늘 우리는 같이 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,
Nice entry. Keep up the good work!!!