학습 내용

1. 객체 프로퍼티에 할당된 함수를 메서드(method)라고 부른다.

• 정의된 함수를 객체의 프로퍼티로 넣는 것도 가능하다.

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

3. this의 특징 : 일반적인 객체지향언어의 this와는 다르다.

• 런타임에 의해 결정된다. 즉 실행하고 있는 컨텍스트에 따라 달라진다.
• 엄격모드(use strict)에서는 this에 값이 없으면 undefined가 할당된다. (아니면 브라우저)

4. 화살표함수(arrow function)에서는 외부 컨테스트에 있는 this를 참조한다.

5. 체이닝 : 객체에 연달아서 메서드를 호출할 수 있게 하는 방법

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

• 각 메서드가 기능을 실행한 뒤, this 를 반환하도록 한다.

실습

/*****  메서드 만들기 *****/
let pcy = {
    age : 30,
    city : "Gunpo"
};

console.log(pcy);       // { age: 30, city: 'Gunpo' }
console.log(pcy.age);   // 30
console.log(pcy.city);  // Gunpo

/*****  arrowFuction 사용해 메서드 만들기 *****/
pcy.sayHi = () => console.log("Hello World!");
pcy.sayHi();            // Hello World!

/*****  메서드와 this *****/
let person = {
    name : "hkd",
    age  : 30,
    sayHi(){
        console.log(this.name);
    }
};

person.sayHi();         // hkd

/*****  자유로운 this *****/
let pA = {name : 'You Jae Seok'};
let pB = {name : 'Kang Ho Dong'};

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

pA.fVoice = voice;
pB.fVoice = voice;

pA.fVoice();            // You Jae Seok
pB.fVoice();            // Kang Ho Dong

과제

/***** 객체 리터럴에서 'this' 사용하기 *****/
function makeUser() {
    return {
      name: "John",
      ref(){
        return this;
      }
    };
  };
  
let user = makeUser();

console.log( user.ref().name ); // 결과가 어떻게 될까요?

/***** 계산기 *****/
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() );

/***** 체이닝 *****/
let ladder = {
    step: 0,
    up() {
        this.step++;
    },
    down() {
        this.step--;
    },
    showStep: function() { // 사다리에서 몇 번째 단에 올라와 있는지 보여줌
        alert( this.step );
    }
};
ladder.up();
ladder.up();
ladder.down();
ladder.showStep(); // 1
ladder.up().up().down().showStep(); // 1

느낀점

다른 프로그래밍 언어에서 this 까지 사용해본적은 잘 없다. 회사에 취직하고 나서 현재 JavaScript를 활용해 프론트 작업을 진행하고 있는데, 여기서 this를 많이 사용하고 있다.

느낌상 this가 현재 객체를 의미할 가능성이 높다고 생각하고 여태껏 사용했는데 얼추 내 생각과 배운 내용이 동일해서 다행이라는 생각이 들었다.