Study JavaScript 0506 - 1hr this와 메소드

변승훈·2022년 5월 6일
0

Study JavaScript

목록 보기
12/43

메소드

메소드는 객체 프로퍼티에 할당된 함수를 의미한다.

    let user = {
      name: "Hun",
      age: 27
    };

    // 1. 단축 구문을 사용하지 않는 경우
    user.sayHi = function() {
      console.log("안녕하세요!");
    };

    user.sayHi(); // 안녕하세요!

    // 2. 단축 구문을 사용한 경우(참고만 할 것)
    user = {
      sayHi() {
        console.log("안녕하세요!")
      }
    }

this

메소드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.
this는 객체를 나타내며 정확하게는 메소드를 호출할 때 사용된 객체를 나타낸다.

    let user = {
      name: "Hun",
      age: 27,

      sayHi() {
        console.log(this.name); // this는 현재 객체를 나타낸다.
      }

    };

    user.sayHi(); // Hun

this의 값은 동일한 함수라도 다른 객체에서 호출했다면 this가 참조하는 값이 달라진다.

    let user = { name: "Hun" };
    let admin = { name: "Whan" };

    function sayHi() {
      console.log( this.name );
    }

    // 별개의 객체에서 동일한 함수를 사용함
    user.f = sayHi;
    admin.f = sayHi;

    // 'this'는 '점(.) 앞의' 객체를 참조하기 때문에 this 값이 달라짐
    user.f(); // Hun  (this == user)
    admin.f(); // Whan  (this == admin)

    admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

화살표 함수는 고유한 this값을 가지지 않으며 this를 사용하면 외부함수에서 this값을 가져온다.

    let user = {
      firstName: "SeungHun",
      sayHi() {
        let arrow = () => console.log(this.firstName);
        arrow();
      }
    };

    user.sayHi(); // SeungHun
profile
잘 할 수 있는 개발자가 되기 위하여

0개의 댓글