[JavaScript] 상속, Prototype, 함수 및 생성자 (2)

목차

1. 개요

2. prototype

3. 테스트

---

1. 개요

 앞선 글에 이어서 prototype과 __proto__의 정체에 대해 파악해보도록 하겠다.

---

2. prototype

 함수가 생성되면 prototype 프로퍼티와 __proto__라는 메소드가 생성된다.

 prototype 프로퍼티는 생성된 함수의 원형 정보를 가지고 있는 prototype 객체에 접근할 수 있고,

prototype 객체는 생성된 함수 객체를 가리킨다.

잊어버리지 않게 이들의 관계를 다시한번 그림으로 나타내면 아래와 같다.

prototype과 constructor의 관계

---

3. 테스트

 prototype이 정확히 무슨 역할을 하는지 알기 위해 몇 가지 테스트를 진행하였다.

 

1) 함수를 정의하고 prototype 출력

<script>
        function a(){
            val_a = 1
        }
        //a.prototype.val_a = 2
        console.log(a)
        console.log(a.prototype)
    </script>

console 화면

a를 출력했더니 a 함수를 정의가 나오고

a.prototype을 출력했더니 객체가 나오고 그 객체에는 constructor(생성자)와 __proto__가 정의되어 있다.

 

 

console 화면

prototype 객체가 원래의 함수객체에 어떤 영향을 미치는지 확인하기 위해 5번 라인의 주석을 해제하고 컴파일하였더니

a에는 정의했던 함수의 원형이, a.prototype에는 val_a = 2라는 프로퍼티가 추가되어 출력되었다.

 

여기에서 얻은 결론은 prototype이 함수의 원형에는 영향을 미치지 못한다는 것이었다.

원형의 의미를 가진 prototype이 원형에 영향을 못미치는게 아이러니하다. 더 파고들어 이 의미를 이해해야겠다.

 

2) 생성자 호출

    <script>
        function a(){
            val_a = 1
        }
        a.prototype.val_a = 2
        console.log(a)
        console.log(a.prototype)
 
        b = new a()
        console.log(b)
    </script>

 b라는 변수에 a 생성자를 생성하여 대입하고 b를 출력하였다.

 

console.log(b)

 b를 출력했더니 생성자인 a가 출력되었고, 그 안에는 __proto__가, 그 안에는

val_a : 2, constructor : f a(), __proto__: Object 가 있었다.

그리고 이 내용은 위에서 출력한 a.prototype의 내용과 동일했다.

 

이로써 prototype에 대한 정보를 얻었다.

1. 함수에 대한 prototype은 생성자를 통해 정의된 객체가 상속받는 정보이다.

2. __proto__는 해당 객체가 상속받은 prototype의 정보를 갖고 있다.

 

정확한 확인을 위해 b.__proto__ === a.prototype 라는 코드를 넣어보았더니

true가 출력되는 것을 확인할 수 있었다.

    <script>
        function a(){
            val_a = 1
        }
        a.prototype.val_a = 2
        console.log(a)
        console.log(a.prototype)
 
        b = new a()
        console.log(b)
        console.log(b.val_a)
 
        console.log(b.__proto__ === a.prototype)
    </script>

b.__proto__ === a.prototype

 

공부한 내용을 정리하면

1) 함수가 정의되면 prototype을 참조 가능한 prototype 프로퍼티, __proto__ 메소드가 생성된다.

2) prototype은 constructor(생성자)를 참조 가능하다. 이를 통해 해당 함수의 생성자로 생성되는 객체들이 prototype 객체를 상속받게 되며, prototype의 내용을 변경하면 객체들은 변경된 내용을 상속받게 된다.

3) 이 prototype 객체를 참조하는 것은 생성한 객체의 __proto__ 메소드이다.

 

function - __proto__ - prototype 간의 관계

 

공부하다보니 이해가 안가는 부분이 계속 나타나고 있다. 다음 게시글로 이어가도록 하겠다.