객체 Object의 method와 this

* method : 객체 프로퍼티(키)에 할당 된 함수

const superman = {
     name : 'clack',
     age : 33,
     fly : function(){
         console.log('날아갑니다.');
     }
}

//호출
superman.fly();//날아갑니다

//fly함수가 슈퍼맨 객체의 method

//단축해서 작성 가능
const superman = {
     name : 'clack',
     age : 33,
     fly(){
         console.log('날아갑니다.');
     }
}

---

* 객체와 method의 관계

const user = {
     name : 'Mike',
     sayHello : function(){
         console.log(`Hello, I'm ${this.name}`);//${user.name}을 사용할 수도 있지만 문제가 있음, 그래서 this 사용
     }
}

user.sayHello();//Hello, I'm Mike : this를 사용하면 .점 앞의 user가 sayHello 메서드의 this가 됨

//-------------------------------------------------------------------------------------------
let boy = {
     name : 'Mike',
     sayHello,
}

let girl = {
     name : 'Jane',
     sayHello,
}

sayHello : function(){
     console.log(`Hello, I'm ${this.name}`);
     }

boy.sayHello();//Hello, I'm Mike
girl.sayHello();//Hello, I'm Jane
//sayHello메소드의 this는 해당 객체{}를 의미함, 즉 .점 앞의 각각 boy girl의 {}객체를 의미함

/*다른 예시*/
let boy = {
     name : 'Mike',
     showName : function(){
     	console.log(boy.name);
     }
}

boy.showName();//Mike

//Mike의 별명을 하나더 만들어줌
let man = boy;

man.showName();//Mike

//man의 이름을 Tom으로 바꾸면
man.name='Tom';
console.log(boy.name);//Tom : boy의 이름도 Tom으로 바뀜

//boy를 null로 만들어줌
boy=null;

man.showName();//에러, boy를 null로 해서 name도 사라지고 showName도 사라짐

//이럴때 name을 this로 바꿔줌
let boy = {
     name : 'Mike',
     showName : function(){
     	console.log(this.name);
     }
}

let man = boy;
boy=null;

man.showName();//Mike, 즉 메소드showName의 this는 해당 boy의 객체 {}를 가리키기 떄문

//-------------------------------------------------------------------------------------------
/*
여기서 중요한점 만약 저 동작을 화살표 함수로 바꾸면 결과가 전혀 달라짐
화살표 함수는 일반 함수와 달리 자신만의 this를 가지지 않기 때문
화살표 함수 내부에서 this를 사용하면 그 this는 외부에서 값을 가져옴
*/
let boy = {
     name : 'mike',
     sayHello : () => {
     console.log(`hello, i'm ${this.name}`);
     }
}
boy.sayHello();//this!=boy, 여기서 쓰는 this는 전역객체를 가리킴
//참고 브라우저 환경에서 전역객체는 window, Node js에서 global

/*다른 예시*/
let boy = {
     name : 'Mike',
     sayThis : function(){
     	console.log(this);
     }
}
boy.sayThis();//Object{name: 'Mike', sayThis: {∞}}

//화살표 함수로 바꾸면
let boy = {
     name : 'Mike',
     sayThis : () => {
     	console.log(this);
     }
}
boy.sayThis();//window : 브라우저이 전역객체인 window가 출력됨