자바스크립트 기초 강좌 13- 객체(Object)-method, this

const superman = {
  name : 'clark',
  age : 33,
 fly : function(){                                                fly(){
    console.log('날아갑니다.')            →                console.log('날아갑니다.') 
  }                                                                           }   →단축 가능
}
superman.fly();

→ method: 객체 프로퍼티로 할당 된 함수 (fly함수가 슈퍼맨 객체의 method)

 

*객체와 method의 관계

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

 

let boy = {
  name : 'Mike',
  sayHello,
}
let girl = {
  name : 'Jane',
  sayHello,
}
sayHello : function(){
  console.log(`Hello, I'm ${this.name}`);
}


boy.sayHello();    //this = boy
girl.sayHello();   //this = girl

sayHello : () =>{

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

}

→ 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않음. 화살표 함수 내부에서 this를 사용하면, 그 this는 외부에서 값을 가져옴.

let boy = {
  name : 'Mike',
  sayHello : ()=>{
    console.log(this);  //전역객체 (브라우저 환경: window, Node.js: global)
  }
}
boy.sayHello();    //this != boy

 

let boy = {
  name : 'Mike',
  showName: function(){
    console.log(boy.name)
  }
};

let man = boy;    //man객체에 boy객체를 대입 둘 다 동일한 객체로 접근 가능
man.name = "Tom"    //man의 name을 Tom으로 바꾸면 boy의 name도 Tom으로 바뀐다

console.log(boy.name)   //"Tom"

let boy = {
  name : 'Mike',
  showName: function(){
    console.log(this.name)       
  }
};

let man = boy;   
boy = null;

man.showName();     //"Mike"

 

→ boy.name 대신 this.name 을 사용해서 boy =null 이지만 man에 저장된 객체의 주소값을 통해 this=man 으로 해석되어 "Mike"의 값을 반환한다. 

객체는 생성되고 나면 직접 변수에 담기는 게 아니라, 컴퓨터 메모리 상 어딘가에 저장이 됩니다. let boy = {...} 에서는 boy에 객체가 직접 담기는게 아니라, 생성된 객체가 들어있는 위치의 주소값이 저장이 됩니다. man = boy 를 하면 boy가 알고 있는 객체의 주소값을 man에게 복사해주는 거구요. 이제 man 도 boy와 같이 객체의 주소를 알게 된 겁니다. boy．name = "TOM"이라고 바꾸면, boy안에 들어있는 name을 바꾸는 것 같지만, 실제로는 'boy가 알고있는 주소에 있는 객체'의 name 값을 바꾸게 됩니다. man도 객체의 주소값을 알고 있기 때문에 해당 객체를 찾아가면 name 값이 TOM으로 바뀌었다는 것을 알 수 있죠. boy를 null로 바꾸면, boy에 들어있던 주소값은 비워져서 없어져버립니다. 객체를 지운게 아니라, boy라는 변수에 '객체의 주소값' 대신 null을 할당한거죠. 하지만 man은 주소를 기억하고 있죠. 객체는 아직 어딘가에 살아있습니다. 자바스크립트 엔진은 어떤 변수가 객체의 주소를 기억하고 있으면, 객체를 함부로 지우지 않고 놔둡니다. 아무도 기억할 필요가 없게 되었을 때 그제서야 자바스크립트엔진은 객체를 메모리에서 지워버립니다. boy가 null 이 되었기 때문에 boy.name은 에러가 나게 됩니다.

 

 

let boy = {
  name : 'Mike',
  sayThis : ()=>{
    console.log(this);             //this = window  → this를 사용하면 화살표 함수 내에서 작동x 전역 객체를 가리킴,
  }
};

boy.sayThis();   //오류 발생