자바스크립트-메서드와 this

메서드와 this

-메서드 만들기

let user = {
  name: "John",
  age: 30
};

user.sayHi = function() {
  alert("안녕하세요!");
};

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

함수 표현식으로 함수를 만들어 객체에 할당할 수 있다.

 

let user = {
  // ...
};

// 함수 선언
function sayHi() {
  alert("안녕하세요!");
};

// 선언된 함수를 메서드로 등록
user.sayHi = sayHi;

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

이미 선언된 함수로도 객체에 할당 가능

 

-메서드 단축

// 아래 두 객체는 동일하게 동작합니다.

user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 단축 구문을 사용하니 더 깔끔해 보이네요.
user = {
  sayHi() { // "sayHi: function()"과 동일합니다.
    alert("Hello");
  }
};

이렇게 줄일 수 있다.

 

-메서드와 this

this는 현재 객체를 나타낸다. 자바스크립트의 this는 런타임에 결정된다.

this가 런타임에 결정되면 여러 객체에서 재사용 가능하다는 장점이 있다. 하지만 이런 것이 실수로 이어질 수 있다.

 

let user = {
  name: "John",
  age: 30,

  sayHi() {
    // 'this'는 '현재 객체'를 나타냅니다.
    alert(this.name);
  }

};

user.sayHi(); // John

 

-자유로운 this

자바스크립트에선 모든 함수에 this를 사용할 수 있다.

 

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

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

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

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

함수를 this로 만들면 각 객체마다 호출되는 값이 달라진다.

그리고 점과 대괄호는 동일하게 동작한다.

 

function sayHi() {
  alert(this);
}

sayHi(); // undefined

객체 없이 함수를 호출하면 undefined가 호출된다.

 

-this가 없는 화살표 함수

let user = {
  firstName: "보라",
  sayHi() {
    let arrow = () => alert(this.firstName);
    arrow();
  }
};

user.sayHi(); // 보라

화살표 함수는 일반 함수와 달리 고유한 this를 가지지 않는다. 따라서 화살표 함수에서 this를 참조하면 화살표 함수가 아닌 평범한 외부 함수에서 this 값을 가져온다.

 

-예제

1번 계산기

calculator라는 객체를 만들고 세 메서드를 구현해 봅시다.

• read()에선 프롬프트 창을 띄우고 더할 값 두 개를 입력받습니다. 입력받은 값은 객체의 프로퍼티에 저장합니다.
• sum()은 저장된 두 값의 합을 반환합니다.
• mul()은 저장된 두 값의 곱을 반환합니다.

let calculator = {
    read() {
        this.a = +prompt("입력")
        this.b = +prompt("입력")
    },

    sum() {
        return this.a + this.b
    },

    mul() {
        return this.a * this.b
    },
};

calculator.read();
alert( calculator.sum() );
alert( calculator.mul() );

read에서 입력 받을 때 +를 쓰면 정수형으로 변경이 가능하다. 처음에 풀때는 parseInt를 사용해서 풀었었다.

 

2번

let ladder = {
  step: 0,
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  },
  showStep() {
    alert( this.step );
    return this;
  }
}

ladder.up().up().down().up().down().showStep(); // 1

이렇게 this를 리턴해주면 체이닝이 가능해진다.