[자바스크립트] 메서드와 this

 

메서드와 this

• 객체는 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다.
• 객체 프로퍼티에 저장된 함수를 '메서드’라고 부른다.
• this의 값은 함수를 호출하는 방법에 의해 결정된다.
• 실행하는 동안의 할당에 의해 설정될 수 없고, 함수가 호출될 때마다 다를 수 있다.
• 호출한 놈(체) === this

 

 

메서드 만들기

• 객체 user에게 인사할 수 있는 능력을 부여해보자

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

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

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

• 함수 표현식으로 함수를 만들고, 객체 프로퍼티 user.sayHi에 함수를 할당해 주었다.
• 이렇게 객체 프로퍼티에 할당된 함수를 메서드(method)라고 부른다.
• user에 할당된 sayHi가 메서드이다.

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

let user = {
  // ...
};

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

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

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

 

메서드 단축 구문

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

// 방법1
user = {
  sayHi: function() {
    alert("Hello");
  }
};

// 방법2, 단축 구문
user = {
  sayHi() { // "sayHi: function()"과 동일
    alert("Hello");
  }
};

user.sayHi();

 

 

메서드와 this

• 메서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다.
• 즉, 메서드는 this로 객체를 참조한다.
• 이때 '점 앞’의 this는 객체를 나타낸다.

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

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

};

user.sayHi(); // John

• user.sayHi()가 실행되는 동안에 this는 user를 나타낸다.

this를 사용하지 않고 외부 변수를 참조해 객체에 접근하는 것도 가능하다.

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

    sayHi() {
        alert(user.name); //  'this' 대신 'user'를 이용
    }
};

• 그런데 외부 변수를 통해 객체를 참조하면 에러가 발생할 수 있다.
• user를 복사해 다른 변수에 할당하고 user에 다른 값을 덮어 씌우면 에러가 발생된다.

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()가 엉뚱한 객체를 참고하면서 에러가 발생

 

 

단순 호출 this

• 엄격 모드가 아닌 상태에서 this의 값이 설정되어 있지 않으면 기본값으로 브라우저는 window인 전역 객체를 참조한다.

function f1() {
  return this;
}

// 브라우저
f1() === window; // true

// Node.js
f1() === global; // true

 

 

자유로운 this

• 자바스크립트에선 모든 함수에 this를 사용할 수 있다.
• 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가 없는 화살표 함수

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

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

user.sayHi(); // 보라

• arrow()의 this는 외부 함수 user.sayHi()의 this가 된다.

 

 

📌 참고

• 모던 JavaScript 튜토리얼
• https://www.youtube.com/watch?v=PAr92molMHU&t=11s&ab_channel=%EC%BD%94%EB%93%9C%EC%A2%85