객체: 기본 3.4 메서드와 this

Eddy·2023년 6월 1일
0

코어 자바스크립트

목록 보기
25/30

♠ 객체: 기본

♣ 3.4 메서드와 this

  • 객체 프로퍼티에 저장된 함수를 '메서드’라고 부릅니다.
  • object.doSomthing()은 객체를 '행동’할 수 있게 해줍니다.
  • 메서드는 this로 객체를 참조합니다.

this 값은 런타임에 결정됩니다.

  • 함수를 선언할 때 this를 사용할 수 있습니다. 다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않습니다.
  • 함수를 복사해 객체 간 전달할 수 있습니다.
  • 함수를 객체 프로퍼티에 저장해 object.method()같이 ‘메서드’ 형태로 호출하면 this는 object를 참조합니다.

화살표 함수는 자신만의 this를 가지지 않는다는 점에서 독특합니다. 화살표 함수 안에서 this를 사용하면, 외부에서 this 값을 가져옵니다.

eddy’s point

`this`를 사용하지 않고 외부 변수를 참조해 객체에 접근하는 것도 가능합니다.
    let user = {
      name: "John",
      age: 30,
    
      sayHi() {
        *alert(user.name); // 'this' 대신 'user'를 이용함*}
    
    };

그런데 이렇게 외부 변수를 사용해 객체를 참조하면 예상치 못한 에러가 발생할 수 있습니다. 
user를 복사해 다른 변수에 할당(admin = user)하고, user는 전혀 다른 값으로 덮어썼다고 가정해 봅시다. 
sayHi()는 원치 않는 값(null)을 참조할 겁니다.

예시:
    let user = {
      name: "John",
      age: 30,
    
      sayHi() {
        *alert( user.name ); // Error: Cannot read property 'name' of null*}
    
    };
    
    let admin = user;
    user = null; // user를 null로 덮어씁니다.
    
    admin.sayHi(); // sayHi()가 엉뚱한 객체를 참고하면서 에러가 발생했습니다.
`alert` 함수가 `user.name` 대신 `this.name`을 인수로 받았다면 에러가 발생하지 않았을 겁니다.

화살표함수의 this

https://www.youtube.com/watch?v=2lIde1abdBY

0개의 댓글