21.07.21 생성자 함수

생성자 함수는 받은 인자를 해당 속성으로 추가하여 객체로 만드는 함수를 말한다. 

생성자 함수의 정의는 다음과 같다.

//함수랑 비슷하게 생겼긴 한데 
//this로 참조하는 객체의 속성 property를 할당한다는 차이점이 있다!
function 생성자명(){
	this.property
}

다음과 같이 생성자 함수를 호출하고 생성된 객체를 생성자 변수에 저장할 수 있다.

생성자 함수를 통해 만들어진 객체를 인스턴스라고 한다. 

let 생성자 = new 생성자명();

 

아래는 생성자 함수를 이용하여 인스턴스를 생성한 예시이다. 

let coin = new Coin("이더리움", "200만원", "6%");

{
    this.name : "이더리움";
    this.value : "200만원";
    this.increment : "6%";
}

생성자 함수의 prototype을 이용하여 객체의 속성을 상속할 수 있다. 

//생성자 함수 정의 
//증조할아버지
function great_grandfather(){
	this.eyes = "brown";
}
//할아버지
function grandfather(){
	this.height = "180";
}
//great_grandfather은 grandfather의 부모 객체이다.
grandfather.prototype = new great_grandfather();

//아버지
function father(){
	this.face = "handsome"
}
//grandfather은 father의 부모 객체이다. 
father.prototype = new grandfather();

function me(){
	this.age = "18";
}

//father은 me의 부모 객체이다. 
me.prototype = new father();

//생성자 함수 호출 및 인스턴스 생성
let iAm = new me();
console.log(iAm);
/*
{
	iAm.eyes : "brown", 
    iAm.height : "180", 
    iAm.face : "handsome",
    iAm.age : "18"
}
*/

 

 

생성자 함수는 prototype을 통해 생성한 인스턴스의 같은 속성을 모두 공유할 수 있다. 

//원에 대한 정보를 나타내는 객체를 생성하는 생성자 함수 정의
function Circle(){
	this.r = r;
}

Circle.prototype.getArea = function(){
	return Math.PI * this.r ** 2
}

const circle1 = new Circle(1); //r = 1
const circle2 = new Circle(2); //r = 2

console.log(circle1.getArea == circle2.getArea); //true

각각의 인스턴스에 대한 getArea를 참조할 때는 

function Circle(r){
	this.r = r;
    this.getArea = function(){
    	return Math.PI * this.r ** 2;
    }
}
const circle1 = new Circle(1);
const circle2 = new Circle(2);

console.log(circle1.getArea == circle2.getArea); //false

 

궁금한 것 : console.log(circle1.getArea)는 값이 2π로 나올 줄 알았는데 왜 [Function(anonymous)] 이렇게 나오는 것인지 의문이다.