JavaScript this와 체이닝

this는 함수가 호출될 때 사용된 객체를 나타낸다.

객체 내의 함수인 메서드를 사용할 때 this를 사용하여 메서드가 자신을 포함하는 객체에 접근할 수 있다.

자바스크립트의 this는 다른 프로그래밍 언어의 this와 다르게 모든 함수에 this를 사용할 수 있다. 그래서 엄격 모드가 아닐 때는 this가 전역 객체를 참조하기도 한다. 브라우저 환경에선 window라는 전역 객체를 참조하게 된다.

function makeUser() {
  return {
    name: "Jack",
    ref: this
  };
};

let user = makeUser();  // 이 때 makeUser()함수가 호출되면서 this가 값을 참조함.

alert( user.ref.name ); // Error: Cannot read property 'name' of undefined

따라서 위에 에러가 발생하지 않게 하려면 

function makeUser() {
  return {
    name: "Jack",
    ref() {
      return this;
    }
  };
};

let user = makeUser();

alert( user.ref().name ); // 이제 이때 ref()함수가 호출될 때 this가 값을 참조하여 user객체 전체를 참조함.

위와 같이 객체 전체를 참조하여 반환하게 함으로 써 메서드를 연이어 호출할 수 있는데

이를 체이닝이라고 한다.

let ladder = {
  step: 0,
  up() {
    this.step++;
    return this;
  },
  down() {
    this.step--;
    return this;
  },
  showStep() {
    alert( this.step );
    return this;
  }
}

ladder
  .up()
  .up()
  .down()
  .up()
  .down()
  .showStep(); // 1 이어서 써도 되지만 가독성을 위해 별도의 줄에 작성하면 좋다.

// ex) ladder.up().up().down().up().down().showStep(); 이렇게 해도 무방함.