[js] 프로토타입 상속이 어떻게 작동하는가

 

var a = {
    attr1: 'a1'
}

var b = {
    attr2: 'a2'
}

b.__proto__ = a; // b의 프로토타입 속성이 객체 a를 가리키고 있다 (= 상속)

b.attr1 // 'a1' 



a.attr1 = 'a000'; // 상속받은 객체의 내용 변경

b.attr1 // 'a000'

a.attr3 = 'a3' // 상속받은 객체의 내용이 추가
b.attr3 // 'a3'

delete a.attr1 // 상속받은 객체의 내용이 삭제
b.attr1 // undefined

 

상속 시키고자하는 객체(b)에 상속 받고자하는 객체(a)를 프로토 속성(__proto__)을 이용해 상속시킨다.

이렇게 객체과 객체의 연결을 통한 단방향 공유 관계를 프로토타입 체인이라고 한다.

 

 

object.create();

---

자식프로토타입과 부모 프로토타입의 연결은 결국 객체와 객체를 연결하는 걸 말한다.

object.create() 는 객체를 인자로 받아 프로토타입 체인으로 연결되어 있는 새로운 객체를 리턴해준다.

 

var a = {
    attr1: 'a'
};

var b = Object.create(a);

b.attr2 = 'b';

console.log(b.attr1) // 'a'

 

 

생성자를 이용한 프로토타입 객체

---

        function Parent(name) {
            this.name = name;
        }

        Parent.prototype.getName = function() {
            return this.name;
        };

        var c = new Parent("aaa")
        
        console.log(c) // Parent {name: "aaa"}
        console.log(c.getName()) // aaa

 

 

프로토타입끼리 연결

---

        function Parent(name) {
            this.name = name;
        }

        Parent.prototype.getName = function() {
            return this.name;
        };

        function Child(name) {
            Parent.call(this, name);

            this.age = 0;
        }

        // (1) Child.prototype 는 __proto__ 속성이 Parent.prototype 을 가르킨다
        Child.prototype = Object.create(Parent.prototype); 
        Child.prototype.constructor = Child;

        Child.prototype.getAge = function() {
            return this.age;
        };
		
        // (2)
        var c = new Child("aaa"); 

        console.log(c) // Child {name: "aaa", age: 0}
        console.log(c.getName()) // aaa
        console.log(c.getAge()) // 0

 

(1)

만들어진 새 객체 즉 Child.prototype 는 __proto__ 속성이 Parent.prototype 을 가르키게 된다.

(2) 

Child의 인스턴스 c의 __proto__ 가 Child.prototype 을 참조하게 된다.

이렇게 해서 c -> Child.prototype -> Parent.prototype 으로 연결되는 프로토타입이 만들어진다.

 

 

class Parent {
    constructor(name) {
        this.name = name;
    }

    getName() {
        return this.name;
    }
}

class Child extends Parent {
    constructor(name) {
        super(name); // 생성자 빌려쓰기 대신....super 함수를 이용 한다.
        this.age = 0;
    }

    getAge() {
        return this.age;
    }

}

const c = new Child("aaa");
console.log(c.getName()) // aaa

 

참고한 url

https://meetup.toast.com/posts/104

쉽게 이해하는 자바스크립트 프로토타입 체인 : TOAST Meetup

질문지 모음

https://github.com/yangshun/front-end-interview-handbook/blob/master/Translations/Korean/questions/javascript-questions.md#%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-%EC%83%81%EC%86%8D%EC%9D%B4-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EC%A7%80-%EC%84%A4%EB%AA%85%ED%95%98%EC%84%B8%EC%9A%94