객체 - 객체 안에 함수 넣기
const dog={
name: '멍멍이',
sound:'멍멍!',
say: funciton say(){
console.log(this.sound); //this는 함수가 위치한 객체의 자기자신 --> dog 를 의미
}
};
dog.say(); //멍멍!
// function을 지워줘도 동작함
const dog={
name: '멍멍이',
sound:'멍멍!',
say: say(){
console.log(this.sound); //this는 함수가 위치한 객체의 자기자신 --> dog 를 의미
}
};
dog.say(); //멍멍!
//화살표 함수를 사용했을때에는 동작안함
const dog={
name: '멍멍이',
sound:'멍멍!',
say: () =>{
console.log(this); // TypeError: this가 undefined되어서 출력이 되지 않음
console.log(this.sound); // TypeError: this가 undefined되어서 출력이 되지 않음
}
};
dog.say(); //error
안에 함수를 넣을때, 화살표함수로 선언하면 재대로 동작하지 않습니다.
이유는 function 으로 선언한 함수는 this 가 제대로 자신이 속한 객체를 가르키게 되는데,
화살표 함수는 그렇지 않기 때문입니다.
const dog = {
name: '멍멍이',
sound: '멍멍!',
say: function(){
console.log(this.sound);
}
};
const cat = {
name: '야옹이',
sound: '야옹~'
}
cat.say = dog.say;
dog.say(); //멍멍!
//dog - cat 연결되었기 때문에 cat안에 say함수가 들어가 this는 cat을 가르키게 된다.
cat.say(); //야옹~
// 3.함수를 밖으로 꺼내버리면 this와의 관계가 사라져 버린다.
const catSay = cat.say;
catSay(); // typeError: undefined erorr
1. 함수의 this 는 자기가 속해있는곳이 어딘지 나타냅니다.
2. 화살표 함수는 내부에서는 this가 무엇인지 인지하지 못합니다.
3. 함수를 밖으로 꺼내버리면 this와의 관계가 사라져 버립니다.
'JavaScript' 카테고리의 다른 글
함수 - function (0) | 2020.09.10 |
---|---|
객체 - Getter와 Setter 함수 (0) | 2020.09.07 |
객체 - 비구조화 할당 (0) | 2020.09.07 |
객체 (0) | 2020.09.07 |
Script 함수 (0) | 2020.09.06 |