[자바스크립트 객체지향]생성자함수(constructor) 만들기

끄아ㅏㅏㅏ 근데 이걸 어떻게 활용해야 할지 모르겠다

뭔진 알겠는데 뭔지 모르겠어.

그게 모르는건가? 아무튼 어떻게 만드는지 알아보자.

 

var kimobject = {
        name:"kim",
        first:20,
        second:30,
    	sum:function score(){
	return kimobject.first+kimobject.second
        }
};
var leeobject = {
        name:"lee",
        first:10,
        second:30,
    	sum:function score(){
	return leeobject.first+leeobject.second
        }
};

console.log(kimobject.sum());
console.log(leeobject.sum());
//위와같이 작성하면 50과 40을 찍어준다.

일단 저번시간에 만든 비효율적인 객체이다.

이걸 생성자 함수로 만드는 방법은 아래와 같다.

 

function FuckingAwesomeOJ(name, first, second){
    this.name = name;
    this.first = first;
    this.second = second;
    this.sum = function(){
        return this.first+this.second
    }
}

 

위처럼 기존의 객체를 만드는방법과 다르게 '함수'를 만들어야 한다.

function 으로 FuckingAwesomeOJ 라는 함수를 만들어주고 인자를 받을수있게 적어준후

기존 프로퍼티 자리에 this와 인자가 들어갈 자리를 마련해 준다. 그리고 쉼표로

끝내는것이 아닌 세미콜론(;)으로 각 줄을 끝내준다.

이렇게 하고 단순히 FuckingAwesomeOJ() 를 호출하면 당연히 undefined를 출력한다.

그렇다면 FuckingAwesomeOJ('kim', 10, 20) 이런식으로 호출해도 undefined를 출력한다.

이놈을 써먹는 방법은

 

var kimscore = new FuckingAwesomeOJ("kim", 30, 20);

요로코롬 앞에 new 를 붙여주어야 단순한 함수가 아닌 생성자 함수가되어

객체를 배설해 준다는 것이다.

이렇게하고 kimscore 를 출력해보면

FuckingAwesomeOJ {name: "kim", first: 30, second: 20, sum: ƒ}

이런식으로 객체가 잘 만들어졌다는 것을 알 수 있다.

내부의 sum을 이용해 보려면 아래처럼 써보고,

console.log(kimscore.sum());//50

이렇게 호출해보면 잘 작동한다.

 

근데 아직은 이게 왜 그냥 객체를 만들어야 하는지 딱 감이 안오지만 이제 lee와 noh라는 놈의 객체를 만들어 보자.

var kimscore = new FuckingAwesomeOJ("kim", 30, 20);
var leescore = new FuckingAwesomeOJ("lee", 10, 10);
var nohscore = new FuckingAwesomeOJ("noh", 60, 60);
console.log(kimscore.sum());//50
console.log(leescore.sum());//20
console.log(nohscore.sum());/120

이렇게 단 3줄 만으로(밑에 콘솔로그는 제외하고 봅시다) 객체를 생성할 수 있다. 읭 이라는 생각이 든다면

기존 방법을 이용해서 객체를 만들어보면 되는데,

var kimobject = {
        name:"kim",
        first:20,
        second:30,
    	sum:function(){
	return this.first+this.second
        }
};
var leeobject = {
        name:"lee",
        first:10,
        second:10,
    	sum:function(){
	return this.first+this.second
        }
};        
var nohobject = {
        name:"lee",
        first:60,
        second:60,
    	sum:function(){
	return this.first+this.second
        }
};

이렇게 작성해야 될껄 3줄로 끝낸거다. 아주 나이스 한듯.

다음엔 prototype 에 대해 정리를 해봐야 겠따.

그럼 20000