javascript #8. 객체 지향 프로그래밍

자바스크립트식 객체 지향 프로그래밍에 대해 알아봅시다!

 

생성자 

생성자 함수란 , 객체를 생성하는 함수를 말합니다. 

객체인데 new를 붙여 함수처럼 호출을 합니다. 

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
  this.sayHello = function() {
    alert(this.name + ' said "hello"');
  }
  this.... // 사람의 속성과 메소드를 더 정의할 수 있습니다.
}

위 코드는 사람 생성자를 정의한 코드인데 

함수처럼 function을 사용하였지만, 함수와 달리 앞에를 대문자로 시작하게 만듭니다. 

이렇게 정의해둔 생성자를 new라는 키워드를 사용하여 실제 사람 객체로 만들 수 있습니다!!

new 생성자(인자);

 

var zero = new Person('Zero', 'm'); // Person {name: 'Zero', gender: 'm'}
var hero = new Person('Hero', 'f'); // Person {name: 'Hero', gender: 'f'}
zero.sayHello(); // 'Zero said "hello"'
hero.sayHello(); // 'Hero said "hello"'

위에 선언해둔 사람 생성자를 바탕으로 zero와 hero라는 사람 객체를 선언했습니다. 

Person생성자를 보면 name 과 gender 매개변수를 받아 this.name, this.gender에 저장합니다. 

이 this에 저장된 것들은 new를 통해 객체를 만들 때 그 객체에 적용됩니다. 

zero는 이름이 Zero이고 성별이 m인 변수를 받아와 person 생성자에서 처리해줍니다. 

hero도 마찬가지구요!

 

 

프로토타입

prototype 뜻은 원래의 형태로 

prototype 객체도 사전 그대로 원래의 모습을 뜻합니다. 

 

• 메소드를 prototype로 정의 

function Person(name, gender) {
  this.name = name;
  this.gender = gender;
}
Person.prototype.sayHello = function() {
  alert(this.name + ' said "hello"');
};

따라서 위 코드에 만들어 놓은 person 생성자에 prototype 객체에 sayHello라는 메소드를 넣으면

person 생성자로 만든 모든 객체는 이 메소드를 사용할 수 있습니다!

 

(프로토타입과 this로 선언하는 것의 차이점은 뭐지??)

 

 

 

• 속성까지 다 prototype로 

{
  constructor: function Person(name, gender),
  sayHello: function() {},
  __proto__: Object
}


new Person('Nero', 'm'); // Person {name: "Nero", gender: "m", __proto__: Object}

_proto_는 실제 객체를 만들 때 생성자의 prototype이 참조된 모습입니다.

생성자의 프로토타입을 참조하므로 __proto__와 prototype은 같습니다. 

 

constructor는 생성자 함수 그 자체를 가리킴
prototype은 생성자 함수에 정의한 모든 객체가 공유할 원형
__proto__는 생성자 함수를 new로 호출할 때, 정의해두었던 prototype을 참조한 객체
prototype은 생성자 함수에 사용자가 직접 넣는 거고, __proto__는 new를 호출할 때 prototype을 참조하여 자동으로 만들어짐
생성자에는 prototype, 생성자로부터 만들어진 객체에는 __proto__
따라서 사용자는 prototype만 신경쓰면 된다.
__proto__는 prototype이 제대로 구현되었는지 확인용으로 사용한다.