Superman
name : clark
age : 33
이를 객체로 나타내면
const superman = {
name : 'clark',
age : 33,
}
이제 하늘을 나는 능력을 추가해보자.
const superman = {
name : 'clark',
age : 33,
fly : function(){
console.log('날아갑니다.')
}
}
superman.fly();
// 날아갑니다.
이처럼 객체 프로퍼티로 할당된 함수를 method라고 함.
여기서는 fly가 superman 함수의 method가 된다.
단축 구문으로도 작성 가능.
const superman = {
name : 'clark',
age : 33,
fly(){
console.log('날아갑니다.')
}
}
이제 객체와 method의 관계에 대해 알아보자.
const user={
name : 'Mike',
sayHello : function(){
console.log(Hello, I'm ${this.name});
}
}
- this.name 대신에 user.name을 사용하면 문제가 발생할 수 있음.
- user.sayHello(); //Hello, I'm Mike
로 호출하면 user가 this가 됨.
예제
let boy = {
name : 'Mike',
}
let girl = {
name : 'Jane;,
}
sayHello : function(){
console.log(Hello, I'm${this.name});
}
이제 이 함수를 각 객체의 메소드로 넣어보자.
boy.sayHello(); // I'm Mike
girl.sayHello(); // I'm Jane
sayHello : function(){
console.log(Hello, I'm ${this.name});
}
this : 각 객체에서 boy와 girl을 의미.
그런데 이 함수를 화살표 함수로 선언하면 동작이 전혀 달라짐.
화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음.
화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴.
let boy = {
name : 'Mike',
sayHello : () =>{
console.log(this); // this는 전역객체를 가리킴.
}
}
boy.sayHello();
// 즉, 여기서의 this != boy
전역객체를 가리킴. 브라우저 환경에서의 전역객체는 window를 가리키고, Node js는 global 이 된다.
이제 method로 돌아와서 코드로 살펴보자.
let boy = {
name: "Mike",
showName: function () {
console.log(boy.name)
}
};
boy.showName();
-> "Mike"
여기 뒤에 man을 추가하는 내용부터는 이해가 잘 안간다 ㅠㅠ 복습하고 다시 돌아오겠다 !
