본문 바로가기
내마음대로만들어보자/JS

객체 생성자 함수

by 소농민! 2021. 8. 15.
728x90

1. 객체 생성자 함수란?

자바스크립트 엔진에 내장되어 있는 객체 생성자 함수(Object Consructor Function)을 사용하여 객체를 생성한다.

 

* 객체 생성자 함수를 선언하고 객체를 생성하는 기본형태.

   new 키워드를 사용해 객체를 생성하고 객체 생성자 함수에서 this 키워드를 사용해 생성한 객체에 속성과 함수를  등록한다.

function 함수명(매개변수1, 매개변수2, ... , 매개변수n){    //객체 생성 함수
     this.속성명 = 새값;
     this.함수명 = function(){
          자바스크립트 코드;
     }
}

var 참조 변수(인스턴스 네임) = new 함수명();    //객체 생성
                          ↓
var 참조 변수 = { 속성 : 새 값, 함수명 : function() {...} }                                 

 

* CheckWeight라는 이름으로 객체 생성자 함수를 선언하고 2개의 객체를 생성하는 예제를 해보자.

   (생성된 각각의 객체에는 속성(이름, 키, 몸무게)과 함수(getInfo(), getResult())를 등록한다.)

 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title> 함수 </title>
    <script>
        function CheckWeight(name, height, weight){
            this.userName = name;
            this.userHeight = height;
            this.userWeight = weight;
            this.minWeight;
            this.maxWeight;
            
            this.getInfo = function() {
                var str = ""
                str += "이름:" + this.userName + ",";
                str += "키:" + this.userHeight + ",";
                str += "몸무게:" + this.userWeight + "<br>";
                return str;
            }
//생성한 객체에 각 속성값을 출력하는 함수를 등록한다.

            this.getResult = function(){
                this.minWeight = (this.userHeight - 100)* 0.9 - 5;
                this.maxWeight = (this.userHeight - 100)* 0.9 + 5;
                
                if(this.userWeight >= this.minWeight
                    && this.userWeight <= this.maxWeight) {
                    return "정상 몸무게입니다.";
                }else if(this.userWeight < this.minWeight){
                    return "정상 몸무게보다 미달입니다.";
                }else{
                    return "정상 몸무게보다 초과입니다.";
                }
// 정상 몸무게, 표준오차 뭄무게를 구하여 몸무게가 정상인지 출력하는 함수를 등록한다. 
            }
        }
        
        var hong = new CheckWeight("홍길동", 173, 55);
        var lee = new CheckWeight("아무개", 153, 50);
        console.log(hong);
        console.log(lee);
        
        document.write(hong.getInfo());
        document.write(hong.getResult());
    </script>
</head>

<body>
</body>

</html>

아래와같이 콘솔에 생성된 객체를 출력해 객체에 등록된 속성과 함수도 확인할 수 있다.

 

2. 프로토타입 사용하기(메모리 절약을 하기 위함)

프로토타입의 사전적 의미는 원형이다. 프로토타입을 사용하여 등록한 함수는 원형(객체 생성자 함수)에서 생성된 객체를  공유할 수 있다. 즉 여러개의 함수를 등록할 필요가없다.

 

* 기본형

function 함수명(매개변수1, 매개변수2, ... , 매개변수 n) {
      this.속성명 = 새 값;
}

함수명.prototype.함수명 = function(){
      자바스크립트 코드;
}

var 참조변수(인스턴스 네임) = new 함수명();

* 프로토타입으로 함수를 등록하는 예제

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
function CheckWeight(name, height, weight) {
this.userName = name;
this.userHeight = height;
this.userWeight = weight;
this.minWeight;
this.maxWeight;
}
CheckWeight.prototype.getInfo = function() {
var str = ""
str += "이름: " + this.userName + ", ";
str += "키: " + this.userHeight + ", ";
str += "몸무게: " + this.userWeight + "<br>";
return  str;
}
CheckWeight.prototype.getResult = function( ) {
this.minWeight = (this.userHeight - 100) * 0.9 - 5;
this.maxWeight = (this.userHeight - 100) * 0.9 + 5;

if(this.userWeight >= this.minWeight && 
this.userWeight <= this.maxWeight) {
return "정상 몸무게입니다";
} else if(this.userWeight < this.minWeight) {
return "정상 몸무게보다 미달입니다";
} else {
return "정상 몸무게보다 초과입니다";
}
}    
var jang = new CheckWeight("장보리", 168, 62);
var park = new CheckWeight("박달재", 180, 88);
console.log(jang);
console.log(park);

document.write(jang.getInfo());
document.write(jang.getResult(), "<br>");

document.write(jang.getResult === park.getResult);
</script>
</head>
<body>
</body>
</html>

 

저작자표시

'내마음대로만들어보자 > JS' 카테고리의 다른 글

first/last 선택자  (0) 2021.08.18
제이쿼리 선택자  (0) 2021.08.16
함수 스코프(Scope)  (0) 2021.08.15
함수에서 return문의 역할  (0) 2021.08.14
자바스크립트 함수란?  (0) 2021.08.14

관련글

티스토리툴바