개발 이야기/JavaScript

자바스크립트의 상속

석구석구 2017. 3. 23. 17:56

- 자바스크립트는 프로토타입 기반의 언어다.

- 프로토타입은 다른 오브젝트를 가르키는 내부 링크다.

- 모든 오브젝트는 프로토타입을 가지고 있고 이러한 프로토타입 역시 프로토타입을 가지고 있다. 결국 이것은 반복된다. null 오브젝트를 프로토 타입으로 가지는 오브젝트에서 끝이난다.

- 이를 프로토타입 체인이라 부른다.


프로토타입은 고전적인 상속 모델보다 더 강력한 방법이다. 프로토타입으로 고전적인 방식은 쉽게 구현할 수 있지만, 그 반대는 어렵다.



    // apply, call, bind
    // 팝업의 전처리의 경우 apply를 쓰는 경우
    // 데이터를 apply로 넘겨 주는 경우
    
    // 함수 상속에서의 this
    var x = {
            a : 10,
            b : function(){
                console.log(this.a)
            }
    }
    
    var x_child = Object.create(x)
    x_child.a = 30;
    
    // 리터럴로 만들었을 때
    var y = {a : 10}
    y.hasOwnProperty('a') // 이걸 쓸 수 있는 이유는? Object.prototype을 가졌기 때문
    var z = [10, 30]    
    z.forEach(function(i,d){ // 이걸 쓸 수 있는 이유는? Array.prototype ---> Object.prototype을 가졌기 때문
        console.log(i)
        console.log(d)
    })
    
    // 생성자를 사용해서 상속을 구현해보자
    
    // 1. 클래스를 만들어 보자  //이러한 클래스는 첫글자를 대문자
    function Person(age, sex){
        this.age = age
        this.sex = sex
    }
    var p1 = new Person()
    //p1.getAge()
    // 2. 모든 클래스에 사용하고 싶은 함수를 만들어 보자 // 뭔가 순서가 고전적인 방법과 다르다. 그러나 인터페이스가 없으므로 강요하지 못한다. 상단 클래스의 메서드 생성이 자유롭다. // 자식이 부모를 변경시킨다면? 데코레이션 패션
    Person.prototype.getAge = function(){
        console.log(this.age)
    }
    Person.prototype.setAge = function(age){
        this.age = age
    }
    //p1.getAge() // 부모에 동적으로 함수를 만들어 주니, 자식에도 순식간에 함수가 생긴다.
    
    // 이를 이용하면 간단한 팩토리 패턴도 어렵지 않게 구현이 가능하다.
    
    
    // 2. Object.create를 사용해서 상속을 구현해보자
    var k = {
        company : '마이다스아이티'
    }
    var member1 = Object.create(k)


'개발 이야기 > JavaScript' 카테고리의 다른 글

this  (0) 2019.05.21
자바스크립트와 메모리 구조  (0) 2019.05.21
클래스와 객체 그리고 상속.  (0) 2019.05.21
메서드 체이닝  (0) 2019.05.21
호이스팅  (0) 2019.05.19