Front-End/JavaScript

[자바스크립트] 프로토타입(prototype)

챌링킴 2021. 6. 20. 14:23
반응형

1) 프로토타입(prototype) 의미

자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며,
상속되는 정보를 제공하는 객체를 프로토타입이라고 한다.

**자바스크립트에서의 상속**

기존에 사용중인 변수와 메소드들을 다시 사용하고 싶을 때(다른 객체에서도 사용하고 싶을 때)

~~~

 

2) 프로토타입(prototype) 특징

- 자바스크립트의 모든 객체는 프로토타입이라는 객체를 포함한다.

- 모든 객체는 프로토타입으로부터 프로퍼티와 메소드를 상속받게 된다.

- 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는

   Object.prototype과 자신의 생성자 객체를 프로토타입으로 가진다.

 

3) 프로토타입 코드로 설명

    <script>
        'use strict';
        function Dog(name,age,color){
            this.name = name;
            this.age = age;
            this.color = color;
        }

        const cobi = new Dog("코비",7,"black");
        console.log(`이름 : ${cobi.name}`);
        console.log(`나이 : ${cobi.age}`);
        console.log(`색상 : ${cobi.color}`);
        console.log(cobi);

        const cosoon = new Dog("코순",5,"white");
        console.log(`이름 : ${cosoon.name}`);
        console.log(`나이 : ${cosoon.age}`);
        console.log(`색상 : ${cosoon.color}`);
        console.log(cosoon);

        cobi.family = '치와와';
        cobi.run = function(){
            return `${this.name}는 달립니다.`;
        }
        console.log(`코비의 종 : ${cobi.family}`);
        console.log(cobi.run());

        // console.log(`코순의 종 : ${cosoon.family}`); //undefined
        // console.log(cosoon.run()); //오류


        Dog.prototype.weight = 3.5; //weight라는 필드가 Dog.prototype 객체에 추가된다. 
        Dog.prototype.eat = function(){ //따라서 Dog생성자로 만든 객체들은 방금 추가된 프로퍼티와 값을 받을 수 있다.
            return `${this.name}이(가) 먹습니다.`;
        }

		//cobi와 cosoon 객체는 Dog의 prototype 객체를 상속받기 때문에 값이 받아진다.
        console.log(`코비의 몸무게 : ${cobi.weight}`);
        console.log(cobi.eat()); 

        console.log(`코순의 몸무게 : ${cosoon.weight}`);
        console.log(cosoon.eat());
    </script>

반응형