자바스크립트 메서드와 this

kiki97 ㅣ 2022. 9. 1. 20:45

개체

객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다.

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

사용자는 현실에서 장바구니에서 물건 선택하기, 로그인하기 등의 행동을 하는데 이와 마찬가지로

사용자를 나타내는 객체user도 특정한 행동을 할 수 있다.

메서드

객체 프로퍼티에 저장된 함수를 '메소드'라고 부른다.

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

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

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

함수 표현식으로 함수를 만들고, 객체 프로퍼티 user.sayhi에 함수를 할당
객체에 할당된 함수를 호출하면 user가 인사해준다.

let user = {
  // ...
};

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

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

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

메서드는 이미 정의된 함수를 이용해서 만들 수도 있다.

객체 지향 프로그래밍

객체를 사용하여 개체를 표현하는 방식을 객체 지향 프로그래밍(object-oriented programming, OOP) 라고 부른다.

메서드 단축 구문

객체 리터럴 안에 메서드를 선언할 때 사용할 수 있는 단축 문법

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

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

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

메서드는 this로 객체를 참조한다

메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.

이 때 '점 앞'의 this는 객체를 나타낸다. 정확히는 메서드를 호출할 때 사용된 객체를 나타낸다.

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

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

};

user.sayHi(); // John

user.sayHi() 가 실행되는 동안에 this는 user를 나타낸다.
함수를 객체 프로퍼티에 저장해 obj.method() 같이 '메서드'형태로 호출하면 this는 obj를 참조한다.

this값은 런타임에 결정된다

자바스크립트의 this는 다른 프로그래밍 언어의 this와 동작 방식이 다르다.

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

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

함수가 호출되기 전까지 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'가 참조하는 값이 달라진다.

객체 없이 호출하기this == undefined

객체가 없어도 함수를 호출할 수 있다.

function sayHi() {
  alert(this);
}

sayHi(); // undefined

위와 같은 코드를 엄격 모드(use strict)에서 실행하면, this엔 undefined가 할당된다.
엄격 모드가 아닐 때는 this가 전역 객체를 참조한다.(브라우저 환경에선 window 라는 전역 개체를 참조함)
이런 동작의 차이는 "use strict" 엄격모드가 도입된 배경이기도 하다.
이런 식의 코드는 대개 실수로 작성된 경우가 많고, 함수 본문에 this가 사용되었다면, 객체 컨텍스트 내에서
함수를 호출할 것이라고 예상하면 된다.

화살표 함수는 자신만의 this를 갖지 않는다

화살표 함수는 일반 함수와는 달리 '고유한' this를 가지지 않는다.

화살표 함수에서 this를 참조하면, 화살표 함수가 아닌, '평범한' 외부 함수에서 this 값을 가지고온다.

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

user.sayHi(); // 보라

arrow()의 this 는 외부 함수 user.sayHi()의 this가 된다.
별개의 this가 만들어지는 건 원치 않고, 외부 컨텍스트에 있는 this를 이용하고 싶은 경우 화살표 함수가 유용하다.

저작자표시

kiki-dev