JIWON'S DEV

JavaScript/기본

객체 (생성자)

dev_jiwon 2022. 6. 24. 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var person ={}
        person.name = 'egoing';
        person.introduce = function(){
            return 'My name is '+this.name;
        }
        document.write(person.introduce());
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var person ={
            'name':'egoing',
            'introduce':function(){
                return 'My name is '+this.name;
            }
        }
        document.write(person.introduce());
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Person(){} //생성자 함수
        var p = new Person(); // 객체 생성
        p.name = 'egoing';
        p.introduce = function(){
            return 'My name is ' + this.name;
        }
        document.write(p.introduce());
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Person(){} //생성자 함수
        var p1 = new Person(); // 객체 생성
        p1.name = 'egoing';
        p1.introduce = function(){
            return 'My name is ' + this.name;
        }
        document.write(p1.introduce()+"<br/>");

        var p2 = new Person(); // 객체 생성
        p2.name = 'jiwon';
        p2.introduce = function(){
            return 'My name is ' + this.name;
        }
        document.write(p2.introduce()+"<br/>");
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function Person(name){
            this.name = name;
            this.introduce = function(){
                return 'My name is ' + this.name;
            }
        }

        var p1 = new Person('egoing');
        document.write(p1.introduce()+"<br/>");

        var p2 = new Person('jiwon');
        document.write(p2.introduce());
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 자바스크립트에서는 객체의 메소드보다는 함수형 객체(프로토타입)을 사용함
        // 함수형 객체 프로토타입(원형/붕어빵틀)을 만들어서 인스턴스(밀가루 부어서) 사용함

        function Person(name){
            this.name = name;
            this.introduce = function(){
                return 'My nmae is ' + this.name;
            }
        }

        var p1 = new Person('이순신');
        document.write(p1.introduce()+"<br/>");

        var p2 = new Person('세종대왕');
        document.write(p2.introduce());
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // object[object Object]
        var An ={
            name:'ji won',
            age: 26,
            gender: 'female'
        };
        document.write(typeof An);
        document.write(An);
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // key:name value:Ji Won
        // key:age value: 26
        // key:gender value: female

        var An = {
            name: 'Ji Won',
            age: 26,
            gender: 'female'
        };

        An.name;
        An.age;
        An['name'];
        An['age'];
        for (key in An) {
            document.write("key:" + key + " value:" + An[key] + "<br>");
        }
    </script>
</body>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 생성자함수
        function Person(name, gender){
            this.name=name;
            this.gender=gender;
            this.sayHello = function(){
                document.write('Hi! My name is '+this.name);
            };
        }

        // 인스턴스 생성
        var Person1 = new Person('Lee','female');
        var Person2 = new Person('Choi','female');
        document.write(Person1.name +'<br>'); //메소드가 아니라 속성이니까 () 쓰면 안됨
        document.write(Person2.name +'<br>');
        document.write(Person1.sayHello() + '<br>'); // 메소드이니까 ()써줘야 함

        //객체 삭제
        var Person_d = {
            firstName: 'ji won',
            lastName: 'Choi'
        };
        document.write(Person_d.firstName + '<br>');

        delete Person_d.lastName;
        document.write(Person_d + '<br>');

        // delete 연산자 사용하면 객체의 프로퍼티 삭제 가능

        delete Person_d;
        document.write(Person_d); // 객체는 삭제 불가


    </script>
</body>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var Person={
            firstName : 'Ji won',
            lastName: 'Choi'
        };
        
        for(var i in Person){
            document.write(i+': '+Person[i] + '<br>');
        }

        for(var prop in Person){
            document.write(prop+': '+Person[prop] + '<br>');
        }


    </script>
</body>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function Common_mouse(color, button, name, weight){
            this.color = color;
            this.button = button;
            this.name = name;
            this.weight = weight;
        }

        var myMouse = new Common_mouse("black",2,"QNIX",'150g');
        document.write(myMouse.weight);


    </script>
</body>

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function Test(beef, chicken, Pork){
            this.beef=beef;
            this.chicken = chicken;
            this.Pork = Pork;
        }

        var mydinner = new Test("소", "닭", "돼지");
        document.write(mydinner.Pork);
    </script>
</body>

</html>

 

위에서  document.write를 써주었기 때문에 밑에서는 document.write를 써주게 되면 마지막에 undefined가 뜸.

undefined 뜨지 않게 하기 위해서는 document.write를 쓰지 말아야함./

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function Common_MeatShop(category, volume, kgPerPrice){
            this.category = category;
            this.volume = Number(volume);
            this.kgPerPrice = Number(kgPerPrice);
            this.fullPrice = function(){
                document.write(this.category + '고기' + this.volume + 'kg은 ' + this.volume * this.kgPerPrice + '원 입니다.');
            }
        }

        var customerSelect = new Common_MeatShop('소', 5, 10000);
        customerSelect.fullPrice(); //document.write 쓰지 않아도 됨
    </script>
</body>

</html>
저작자표시 비영리

'JavaScript > 기본' 카테고리의 다른 글

문서 객체 모델 (DOM)  (0) 2022.06.29
객체 (최소, 최대 평균)  (0) 2022.06.29
객체  (0) 2022.06.24
자바스크립트 참고 사이트  (0) 2022.06.23
이벤트  (0) 2022.06.23

댓글

티스토리툴바