JavaScript DAY05 (2022.11.06)

준영·2022년 11월 6일
0
post-thumbnail
/* JavaScript DAY05 2022.11.06 */

// 객체(Object) method, this
const user = {
  name: 'Mike',
  // 객체의 프로퍼티로 함수를 할당 할 수 있는데, 이것을 메소드(method)라고 한다.
  // method: 객체 프로퍼티로 할당 된 함수 ex) user.sayHello()
  sayHello: function(){
    // 객체 안에 name을 출력하기 위해선 user.name을 쓸 수 있지만, 이러한 부분은 문제가 발생 할 수 있다.
    // 따라서 이러한 경우에는 user가 아닌 this를 사용하여 접근이 가능하다. this.name의 형태로 사용하자. 
    // this를 써야하는 이유 => [예시 1번 참고]
    // 화살표 함수는 일반 함수와는 달리 자신만의 this를 가지지 않는다. 만약 사용하게 되면 그 this는 외부(전역객체)에서 값을 가져 올 것이다.
    // 브라우저 환경에서는 전역객체는 window, Node.js 환경에서는 global이다.
    console.log(`Hello ${this.name}`);
  },
  // 또는 위의 함수를 단축 구문으로도 작성 할 수 있다.
  sayHello2(){
    console.log(`Hello ${this.name}`);
  }
};
// 출력결과: 'Hello Mike'
user.sayHello();
// 출력결과: 'Hello Mike'
user.sayHello2();

/* ------------------------------------------------------------------------------------ */

//[예시 1번]
let boy = {
  name: 'Joonyoung',
  showName: function(){
    console.log(boy.name)
  }
};
// man으로도 boy에 접근하게 함
let man = boy;
// boy를 null로 만듦
boy = null;
// 출력결과: TypeError: Cannot read properties of null (reading 'name')
console.log(man.showName());
// 위와 같은 경우에 this를 사용하면 정상적으로 출력 할 수 있는데, method의 this는 해당 객체를 가리키기 때문이다. 

/* ------------------------------------------------------------------------------------ */


profile
개인 이력, 포폴 관리 및 기술 블로그 사이트 👉 https://aimzero-web.vercel.app/

0개의 댓글