28Dec2019 TIL

Today I learned :

• inheritance Pattern (Pseudo-classical / ES6 class)
• .bind

 

---

//functional 
var makeDancer = (timeBetweenSteps) => {
  const dancer = {};
  dancer.step = () => {
    setTimeout(dancer.step, timeBetweenSteps);
  };
}

//pseudo-classical
var Dancer = function (timeBetweenSteps) {
  this.timeBetweenSteps = timeBetweenSteps;
};
Dancer.prototype.step = function () {
  setTimeout(this.step.bind(step, this.timeBetweensteps);
};


//ES6 class
var DancerClass {
  constructor(timeBetweenSteps) {
    this.timeBetweenSteps = timeBetweenSteps;
  }
  
  step() {
    setTimeout(this.step.bind(step, this.timeBetweensteps);
  }
};

functional style 일때는 bind처리를 안해도 해당 기능이 내가 원하는데로 작동이 되는 반면에, Pseudo style 과 Class 일때는 step의 기능이 작동하지 않아 그 원인을 살펴보니 다음과 같았다. functional 의 경우 arrow function 을 사용했기 때문에 (=this를 사용하지 않아) 실행할 때마다 문맥에 맞게 step이 알맞게 변경된다. 반면에, 하단의 경우 this를 사용하였기 때문에 각각 실행할때 this를 실행하는 문맥에 맞게 변경해주는 일이 필요했다. 즉 BlinkyDancer가 step을 실행할 경우, this는 BlinkyDancer이므로, step에 bind해주는 일이 필요하다.