[JavaScript] 상속과 프로토타입(Prototype)

728x90

SMALL

1. 상속

클래스 기반의 객체지향 언어와 다름
자바스크립트는 프로토타입 기반의 객체 지향 언어

2. 프로토타입(prototype)

모든 객체는 프로토타입이라는 객체를 가지고 있음
모든 객체는 프로토타입으로부터 프로퍼티와 프로퍼티 메소드를 상속받음
모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며 상속되는 정보를 제공하는 객체를 프로토타입이라고 함

 const dog = new Dog();  // Dog.prototype, Object.prototype 둘다 상속받음

<!DOCTYPE html>
<html lang="en">
<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>프로토타입</title>
</head>
<body>
    <h2>프로토타입</h2>
    <script>
        function Dog(color, name, age){
            this.color = color
            this.name =name
            this.age =age
        }

        const  Rucy = new Dog('white','Rucy',13)
        console.log(`이름: ${Rucy.name}`)
        console.log(`색상: ${Rucy.color}`)
        console.log(`나이: ${Rucy.age}`)
        Rucy.family = '포메'
        Rucy.getFamily = function(){
            return this.family;
        }

        console.log(`종: ${Rucy.family}`);
        console.log(`getFamily: ${Rucy.getFamily()}`);

        const Ppomi = new Dog('white','뽀미', 6)
        console.log(`이름: ${Ppomi.name}`)
        console.log(`색상: ${Ppomi.color}`)
        console.log(`나이: ${Ppomi.age}`)
        
        //  Rucy객체에 생성된 메소드기때문에 Ppomi객체엔 적용되지 않는 함수
        // console.log(`종: ${Ppomi.family}`);
        // console.log(`getFamily: ${Ppomi.getFamily()}`); 

        
    </script>
</body>
</html>

▲ getFamily함수는 루시 객체에만 적용되는 함수이므로 뽀미에 적용시 에러!

<!DOCTYPE html>
<html lang="en">
<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>프로토타입</title>
</head>
<body>
    <h2>프로토타입</h2>
    <script>
        function Dog(color, name, age){
            this.color = color
            this.name =name
            this.age =age
        }

        const  Rucy = new Dog('white','Rucy',13)
        console.log(`이름: ${Rucy.name}`)
        console.log(`색상: ${Rucy.color}`)
        console.log(`나이: ${Rucy.age}`)
        Rucy.family = '포메'
        Rucy.getFamily = function(){
            return this.family;
        }

        console.log(`종: ${Rucy.family}`);
        console.log(`getFamily: ${Rucy.getFamily()}`);

        const Ppomi = new Dog('white','뽀미', 6)
        console.log(`이름: ${Ppomi.name}`)
        console.log(`색상: ${Ppomi.color}`)
        console.log(`나이: ${Ppomi.age}`)
        // console.log(`종: ${Ppomi.family}`);
        // console.log(`getFamily: ${Ppomi.getFamily()}`);  Rucy객체에 생성된 메소드기때문에 Ppomi객체엔 적용되지 않는 함수

        console.log('---------------')

        // 객체 직접 접근
        Dog.prototype.birthday = '20091210';
        Dog.prototype.run = function(){
            return this.name + '는 달립니다'
        }

        console.log(`생년월일: ${Rucy.birthday}`);
        console.log(`run: ${Rucy.run()}`)

        console.log(`생년월일: ${Ppomi.birthday}`);
        console.log(`run: ${Ppomi.run()}`)
    </script>
</body>
</html>

▲ birthday와 run 메서드는 this로 전달받은 객체에 적용할 수 있음

728x90

LIST

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] 객체 - 2️⃣String 객체 & String객체 함수 (0)	2023.04.11
[JavaScript] 객체 - 1️⃣Math 객체 & Math 객체 함수 (0)	2023.04.11
[JavaScript] 객체(Object)란? & 객체 생성 표기법 (0)	2023.04.11
[JavaScript] 화살표 함수(arrow function expression) (0)	2023.04.11
[JavaScript] 호이스팅(Hoisting)이란? & 함수 선언문과 함수 표현식에서의 호이스팅 (0)	2023.04.11