JavaScript

객체 - 객체 안에 함수 넣기

코딩공부 2020. 9. 7. 00:25

객체 - 객체 안에 함수 넣기

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