객체 생성자 함수

내장 객체를 생성할 때는 이미 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수를 사용하여 객체를 생성 합니다.

객체 생성자 함수

function 함수명 (매개변수1, 매개변수2...(무제한)){ this.속성명 = 새 값; this.함수명 = function(){ //자바스크립트 실행코드 } } let 참조변수 (인스턴스 네임) = new 함수명 (); // 객체생성

let 참조변수 = {속성: 새 값; 함수명: function(){.....}}

샘플 1 [객체 생성자 표기법]

function obj5(a,b)/*인자*/{
    this.a = a;
    this.b = b;
    this.c = function(){
        return a * b;
    }
}
let result1 = new obj5(100,200); /*인자에 값이 들어감*/
let result2 = new obj5("자바스크립트","실행했습니다.");

document.write(result1.a);
document.write(result1.b);
document.write(result1.c());
document.write(result2.a);
document.write(result2.b);
//10020020000자바스크립트실행했습니다.

샘플 2 

function func6(num1, str1, str2){
    this.youNum = num1;
    this.youStr1 = str1;
    this.youStr2 = str2;
    this.result = function(){
        //출력문
        // let str = this.youNum + this.youStr1 + this.youStr2 ;
        let str = "";
        str += this.youNum+". ";
        str += this.youStr1 + "가 ";
        str += this.youStr2+"되었습니다.<br>";
        return str;
    }
}
let java = new func6(6, "함수", "실행");
document.write(java.result());

//6. 함수가 실행되었습니다.

샘플3

function CheckWeight(name, height, weight){ /*객체 생*/
    this.userName = name;
    this.userHeight = height;
    this.userWeight = weight
    this.minWeight;
    this.maxWeight;
    this.getInfo = function(){
        let str = "";
        str += "이름: " + this.userName + ", ";
        str += "키: " + this.userHeight + ", ";
        str += "몸무게: " + this.userWeight + ", ";
        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"살좀 빼세요.";
        }
    }   
}

let hwang = new CheckWeight("웹쓰", 180, 80);
let lee = new CheckWeight("웹와이", 190, 90);

document.write(hwang.getInfo());
document.write(hwang.getResult());

//이름: 웹쓰, 키: 180, 몸무게: 80, 살좀 빼세요.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write("내 이름은 장아름이며 웹 퍼블리셔입니다. <br>")
        document.write("내 이름은 장아름이며 수업중입니다. <br>")
        document.write("<br>");
        
        // 매개변수가 있는 함수로 출력
        function fun1(name, job){
            document.write("내 이름은 " + name + "이며 " + job + "입니다. <br>");
        }
        fun1("장아름","웹 퍼블리셔");
        fun1("장아름","수업중");
        document.write("<br>");
        
        // 변수를 선언하고 함수로 출력
        function fun2(name, job){
            document.write("내 이름은 " + name + "이며 " + job + "입니다. <br>");
        }
        let youName1 = "1. 장아름";
        let youJob1 = "웹 퍼블리셔";
        let youName2 = "2. 장아름";
        let youJob2 = "수업중";

        fun2(youName1, youJob1);
        fun2(youName2, youJob2);
        document.write("<br>");
        // 객체로 선언을 하고 함수로 출력
        function fun3(name, job){
            document.write("내 이름은 " + name + "이며 " + job + "입니다. <br>");
        }
        const you = [
            {
                name: "3. 장아름",
                job: "웹 퍼블리셔"
            },
            {
                name: "4. 장아름",
                job: "수업중"
            }
        ];
        fun3(you[0].name, you[0].job);
        fun3(you[1].name, you[1].job);
        document.write("<br>");

        // 객체 + 메서드
        const you2 = {
            name1: "5. 장아름",
            job1: "웹 퍼블리셔",
            name2: "6. 장아름",
            job2: "수업중",
            study1 : function(){
                document.write("내 이름은 " + this.name1 + "이며 " + this.job1 + "입니다. <br>");
            },
            study2 : function(){
                document.write("내 이름은 " + this.name2 + "이며 " + this.job2 + "입니다. <br>");
            }
        }
        you2.study1();
        you2.study2();
        document.write("<br>");

        // 객체 생성자 함수 (함수 + 인스턴스 객체(= 매개변수))
        function You3(name, job){
            this.name = name;
            this.job = job;
            this.study = function(){
                document.write("내 이름은 " + this.name + "이며 " + this.job + "입니다. <br>");
            }
        }
        let char1 = new You3("7. 장아름", "웹 퍼블리셔");
        let char2 = new You3("8. 장아름", "수업중");

        char1.study();
        char2.study();
        document.write("<br>");
        
        // 프로토타입 메서드
        function You4(name, job){
            this.name = name;
            this.job = job;
        }
        You4.prototype.study = function(){
            document.write("내 이름은 " + this.name + "이며 " + this.job + "입니다. <br>");
        }
        let char3 = new You4("9. 장아름", "웹 퍼블리셔");
        let char4 = new You4("10. 장아름", "수업중");

        char3.study();
        char4.study();
        document.write("<br>");
        
        // 객체 리터럴
        function You5(name, job){
            this.name = name;
            this.job = job;
        }
        You5.prototype = {
            study1 : function(){
                document.write("내 이름은 " + this.name + "이며 " + this.job + "입니다. <br>");
            },
            study2 : function(){
                document.write("내 이름은 " + this.name + "이며 " + this.job + "입니다. <br>");
            }
        }
        let char5 = new You5("11. 장아름", "웹 퍼블리셔");
        let char6 = new You5("12. 장아름", "수업중");

        char5.study1();
        char6.study2();
    </script>
</head>
<body>
</body>
</html>
Previous내부 함수(스코프)Next프로토타입 함수

Last updated

Was this helpful?