[Javascript/자바스크립트] Day3 - 메서드와 this

1. 메서드

 : 자바스크립트 내에 선언한 객체 내에서 프로퍼티로 값이 아닌 함수로 정의된 것을 메서드라고 부른다

 

[1] 메서드 만들기

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

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

user.sayHi();	// 안녕!

[2] 객체에 함수를 메서드로 할당하는 방법

let user = {
   // ...
};

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

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

user.sayHi();	// 안녕!

[3] 메서드 단축 구문

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

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

// 단축구문의 객체
user = {
   sayHi() {
      alert("Hello");
   }
}

 

[4] 메서드와 this

    : 메서드는 객체에 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있다. 모든 메서드가 그런 것은 아니지만,

     대부분의 메서드가 객체 프로퍼티의 값을 활용한다

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

let user = {
   name:"Jenny",
   age: 30,
   
   sayHi() {
   //this는 현재 객체를 나타냄
   alert(this.name);
   }
};

user.sayHi();	// Jenny

[5] 자유로운 this

    : this ㄱ밧은 런타임에 결정됨. 컨테스트에 따라 달라진다.

      동일한 함수라도 다른 객체에서 호출됐다면 'this'가 참조하는 값이 달라짐

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

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

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

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

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

[6] this가 없는 화살표 함수

   : 화살표 함수는 일반 함수와 달리 고유한 'this'를 가지지 않음. 화살표 함수애서 this를 참조하면,

    화살표 함수가 아닌 '평범한' 외부 함수에서 this 값을 가져옴

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

user.sayhi();	// 보라

 

계산기 만들기

let calculator = {
   sum() {
      return this.a + this.b;
   },
   
   mul() {
      return this.a * this.b;
   },
   read() {
      this.a = +prompt('첫 번째 값:', 0);
      this.b = +prompt('두 번째 값:', 0);
   }
};

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

 

** 요약 

1. 객체 프로퍼티에 저장된 함수를 '메서드'라고 부름
2. object.doSomething()은 객체를 '행동할 수 있게 해줌
3. 메서드는 this로 객체를 참조
4. this값은 런타임에 결정된다
   - 함수를 선언할 때 this를 사용할 수 있다. 다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않음
   - 함수를 복사해 객체 간 전달할 수 있음
   - 함수를 객체 프로퍼티에 저장해 object.method()같이 '메서드'형태로 호출하면 this는 object를 참조함