Object-oriented Programming in JavaScript: Made Super Simple | Mosh의 강의를 정리한 내용입니다.

자바스크립트에서 하나 이상의 메소드가 있는 객체는 크게 Factory function과 Constructor function을 이용하여 만들 수 있다.
또한 자바스크립트의 모든 객체는 constructor라는 property를 가지고 있으며 constructor는 해당 객체를 만든 함수 를 가리키고 있다.

// Factory function 
function createCircle(radius){
  return {
      radius, // es6에서 KEY와 value가 같으면 하나로 적어줘도 된다. 
      draw : function(){
          console.log('draw')
      }
  };
}
const circle = createCircle(1);

// Constructor function 
function Circle(radius){
 this.radius = radius;
  this.draw = function(){
      console.log('draw');
  }
}
const another = new Circle(1);

Factory 함수로 생성한 circle와 Constructor로 생성한 another 객체를 놓고 보자.
각각의 객체의 생성자를 확인하기 위해서 console창에 dot notation을 이용하여 생성자를 확인해 보았다.

1. another.constructor

  • another을 만들 때 사용했던 Circle 함수가 리턴된다.

스크린샷 2019-02-25 오전 2.22.09.png

2. circle.constructor

  • factory 함수로 만든 객체의 constructor 함수를 확인해보면 자바스크립트에 내장된? built-in constuctor가 리턴된다.
    스크린샷 2019-02-25 오전 2.25.35.png
  • 마찬가지로 Object literal 방법으로 만들었던 객체 또한 자바스크립트 엔진이 이 constructor 함수를 이용하여 만든 객체이다.
let x = {};
// let x = new Object();
  • 자바스크립트는 이 외에도 built-in 생성자를 여러개 가지고 있는데
    new String(); // 'Hello', "", ``
    new Boolean(); // true, false 
    new Number(); // 1,2,3,
    ""로 문자열을 만드는 것은 new String()로 만드는 것과 같다. new Boolean(), new Number() 도 마찬가지이다.

🔥 정리해보면, 모든 자바스크립트 객체는 자신을 만든 함수를 속성, constructor로 가지고 있다.

⁉️ 그렇다면 Circle Function을 만든 함수는 무엇일까

자바스크립트에서 함수 또한 Object이다. 따라서 객체의 특징에 따라 함수도 property, method 들을 가지고 있다. Circle 함수를 살펴보자.

function Circle(radius){
 this.radius = radius;
  this.draw = function(){
      console.log('draw');
  }
}
const another = new Circle(1);
-------------------------------------------------------------------------------
Circle.name // property
> "Circle"
Circle.length // the number of arguments
> 1
Circle.constructor 
> f Function() { [native code]}

함수 Circle도 객체이기 때문에 Circle을 만들 때 사용한 함수를 property로 가지고 있다.
Circle의 constructor는 자바스크립트의 다른 built-in 생성자인 Function() 이다.

Call, Apply

생성자 Function 의 여러 method를 이용할 수 있다.

  1. Circle.call({}, 1)
    const another = new Circle(1);
  • call 은 해당 함수를 호출할 때 사용되며 Circle 안의 this operator가 첫번째 인자인 빈 객체를 {}를 가리킨다.
  • new는 call({}, 1) 이 하는 것 처럼 빈 객체를 생성하고 this를 가리키는 행동과 동일
  1. Circle.apply({}, [1])
  • apply는 call 메소드와 하는 일이 거의 같지만 인자를 array 형태로 전달한다는 것이 차이점이다.

TodoMVC 에서 사용된 call 함수

Store.prototype.find = function(query, callback){
    var data = JSON.parse(localStorage[this._dbName];
    ...
  callback.call(this, todos.filter(...));
}