4.4 메서드와 'this'

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

자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해준다. 

 

메서드(method) 만들기

📢 객체 프로퍼티에 할당된 함수

◾️ 함수 표현식으로 함수를 만들고, 객체 프로퍼티 user.sayHi에 함수를 할당해 준다. 

◾️ 이미 정의된 함수를 이용해서 만들 수도 있다. 

let user = {
   name: 'suzu',
   age: 30
};

user.sayHi = function () {
   alert('Hi!');
}

user.sayHi(); // Hi!

 

객체 지향 프로그래밍(object-oriented programming, OOP)

객체를 사용하여 개체를 표현하는 방식.
에릭 감마의 'GoF의 디자인 패턴', 그래디 부치의 'UML을 활용한 객체지향 분석 설계'

 

메서드 단축 구문

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

◾️ 일반적인 방법과 단축 구문을 사용한 방법이 완전히 동일하진 않는다. (객체 상속과 관련된 미묘한 차이가 존재)

user = {
   sayHi: function () {
      alert('Hi!');
   }
}

//단축문법
user = {
   sayHi() {
      alert('Hi!');
   }
}

 

 

메서드와 'this'

◾️ 메서드는 객체 프로퍼티의 값을 활용할 수 있다.  

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

◾️ this는 메서드를 호출할 때 사용된 객체를 나타낸다. → 객체 user

let user = {
   name: 'suzu',
   age: 30,
   
   sayHi () {
   	alert(this.name);
   }
};

user.sayHi(); // suzu

◾️ 외부 변수를 참조해 객체에 접근할 수도 있다. 

◾️ user에 다른 값을 덮어쓰면 sayHi()는 원치 않는 값(null)을 참조하게 되면서 에러가 발생한다. 

let user = {
   name: 'suzu',
   age: 30,
   
   sayHi () {
     alert(user.name);
   }
};

let admin = user;
user = null;

admin.sayHi(); // Error: Cannot read property 'name' of null

 

자유로운 'this'

◾️ 자바스크립트에서는 모든 함수에 this를 사용할 수 있다. 

◾️ this 값은 runtime에 결정된다. 문맥(Context)에 따라 달라진다. 

◾️ 동일한 함수라도 다른 객체에서 호출했다면 'this'가 참조하는 값이 달라진다. 점(.)앞의 객체를 참조한다. 

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

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

user.f = sayHi;
admin.f = sayHi;

user.f(); // suzu  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin

function sayHi() {
  alert(this);
}

sayHi(); // undefined

 

'this'가 없는 화살표 함수

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

◾️ 화살표 함수에서 this를 참조하면 화살표 함수가 아닌 일반 외부 함수에서 this값을 가져온다. 

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

let user = {
  name: "suzu",
  sayHi() {
    let arrow = () => alert(this.name);
    arrow();
  }
};

user.sayHi(); // suzu

 

 

📝 요약

◽️ 메서드 : 객체 프로퍼티에 저장된 함수
◽️ object.doSomthing() : 객체를 '행동'할 수 있게 해준다. 
◽️ 메서드는 this로 객체를 참조한다. 
◽️ this 값은 런타임에 결정된다. 
◽️ 함수를 선언할 때 this를 사용할 수 있다. 다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않는다. 
◽️ 함수를 복사해 객체 간 전달 할 수 있다. 
◽️ 함수를 객체 프로퍼티에 저장해 object.method()같이 '메서드'형태로 호출하면 this는 object를 참조한다. 
◽️ 화살표 함수는 자신만의 this를 가지지 않는다. 화살표 함수 안에서 this를 사용하면, 외부에서 this값을 가져온다. 

https://riptutorial.com/

➕ MDN_화살표 함수

바인딩 되지 않은 this

◾️ 화살표 함수전까지는, 모든 새로운 함수는 자신의 this 값을 정의했다. 

    ◾️ 생성자 함수인 경우 : this → 새로운객체

    ◾️ 엄격 모드 함수 호출 : this → undefined

    ◾️ 객체 메서드로서 호출  : this → 문맥 객체

 

◾️ 화살표 함수는 전역 컨텍스트에서 실행될 때 this를 새로 정의하지 않는다. 

◾️ 코드에서 바로 바깥의 함수(혹은 class)의 this값이 사용된다. → this를 클로저 값으로 처리

---

📝 오늘 새롭게 배운 내용 📝

 

✅ this는 함수가 실행될 때 정해진다.  

✅ 일반 함수의 this와 화살표 함수의 this : 100% 이해는 못함 

✅ this...........

 

 

📌 [JAVASCRIPT_INFO 메서드와 this]

메서드와 'this'

📌 [MDN 자바스크립트의 화살표 함수]

화살표 함수

📌 [MDN 자바스크립트의 this]

this