JS공부를 할수록 기본이 제일 중요한 것 같다.
생성자 함수에 대해 어렴풋하게 알고 있었는데, 추후 프로토타입공부할때 헷갈리지않게 확실히 공부해보자.
//인천의 관광지들을 나타내는 객체들
const spot1 = {
name: '월미도',
no: 1,
introduce () {
return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
}
};
const spot2 = {
name: '차이나타운',
no: 2,
introduce () {
return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
}
};
const spot3 = {
name: '개항장',
no: 3,
introduce () {
return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
}
};위와 같이 같은 형식의 객체를 만들었다.
그러나 관광지들이 100개, 1000개라면?
// 생성자 함수
function IncheonTravelingSpot (name, no) {
this.name = name;
this.no = no;
this.introduce = function () {
return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
}
}와 같이 하나의 틀을 만들면 된다.
// 아래와 같이 생성자 함수로 만들어진 객체를 인스턴스라고 한다.
const spot1 = new IncheonTravelingSpot('월미도', 1);
const spot2 = new IncheonTravelingSpot('차이나타운', 2);
const spot3 = new IncheonTravelingSpot('개항장', 3);- 생성자 함수는 new 연산자와 함께 사용한다! => new를 붙히지않으면 undefined 반환.
- 생성자 함수에서는 메서드 정의가 불가하다 => 리터럴 객체 생성과 클래스에서는 가능.
프로토타입
자바스크립트 객체지향의 중심이라고 한다.
// 생성자 함수
function IncheonTravelingSpot (name, no) {
this.name = name;
this.no = no;
this.introduce = function () {
return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
}
}
const spot1 = new IncheonTravelingSpot('월미도', 1);IncheonTravelingSpot.prototype.introEng = function () {
return `Welcome to Incheon at ${this.name}!`;
};
spot1정의 후 introEng라는 프로토타입을 추가했음에도 유기적으로 연결되어 있다.
타 방식과의 차이점
//생성자 함수
function IncheonTravelingSpot (name, no) {
this.name = name;
this.no = no;
this.introduce = function () {
return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
}
}
//객체를 직접 반환
function createIncheonTravelingSpot (name, no) {
return {
name, no,
introduce () {
return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
}
}
}
/// 객체 리터럴
const spot1 = {
name: '월미도', no: 1,
introduce: function () {
return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
}
};
// 객체 반환 함수
const spot2 = createIncheonTravelingSpot('차이나타운', 2);
// 생성자 함수
const spot3 = new IncheonTravelingSpot('개항장', 3);
차이점은 일단 spot3만 로그앞에 생성자 함수명이 써져있기도하고.... instanceof의 return값도 다르다.
constructor체인을 열어보면 차이점을 명확하게 알 수 있다.
spot3은 생성자함수를 포함하고 있다.
생성자 함수 자체의 프로퍼티와 함수 추가
function IncheonTravelingSpot (name, no) {
this.name = name;
this.no = no;
this.introduce = function () {
return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
}
}
IncheonTravelingSpot.gu = '중구';
IncheonTravelingSpot.contact = function () {
return `안녕하세요! ${this.gu}청입니다. 무엇을 도와드릴까요?`
} ;
const spot3 = new IncheonTravelingSpot('개항장', 3);
위의 프로토타입 항목에서 처럼 IncheonTravelingSpot.prototype~ 방식이 아닌 직접 넣었다.
차이를 알 수 있을 것이다.
자세한 내용은 차후 정적 프로퍼티(static)에서 다루도록 하자.
// new를 넣지 않았을 때
function IncheonTravelingSpot (name, no) {
this.name = name;
this.no = no;
this.introduce = function () {
return `인천의 ${this.no}번째 관광지, ${this.name}입니다!`;
}
if (!new.target) {
return new IncheonTravelingSpot(name, no); //재귀함수 형식을 사용하여 방지해줄 수 있다.
}
}
const spot1 = new IncheonTravelingSpot('월미도', 1);
const spot2 = IncheonTravelingSpot('차이나타운', 2);
console.log(spot1, spot2);정상 출력되는 것을 볼 수 있다.
클래스에서는 new 없으면 오류발생하므로 그냥 이렇구나하고 넘어가자.
얄코님의 제대로 파는 자바스크립트를 보고 있는데 확실히 모던자바스크립트라는 서적으로만 보면 이해안되는 것을 쉽게 설명 잘해주신다.
항상 기본을 중시하고 항상 복습하도록 하자!
💻😀👍🎁👏😁