JS 디자인 모델 - 4. 계승 (개념)

8560 단어 디자인 모드
유형 상속
0. 구조 함수
간단 한 Person 클래스
function Person(name){

    this.name = name;

}

Person.prototype.getName = function(){

    return this.name;

}

1. 원형 체인 계승 실현
패키지 되 지 않 은 extend 함수 계승
계승 절 차 는 다음 과 같다.
step 1: 계승 클래스 의 구조 함수 만 들 기
step 2: 계승 류 의 원형 체인 을 부모 류 구조 함수 로 설정 합 니 다.
step 3: 계승 류 의 구조 함 수 를 조정 합 니 다.
step 4: 계승 클래스 만 들 기
function Author(name, books){

    Person.call(this, name); //step 1

    this.books = books;

}

Author.prototype = new Person(); //step 2

Author.prototype.constructor = Author; // step 3

Author.prototype.getBooks = function(){

    return this.books;

};

var author = new Author('ysy',['js desgin']); // step 4

단순 패키지 extend 함수 계승
function extend(subClass, superClass){

    var F = function(){};

    F.prototype = superClass.prototype;

    subClass.prototype = new F(); // step 2

    subClass.prototype.constructor = subClass; // step3

}

이러한 패 키 징 의 원 리 를 보 여 주 었 으 나 step 1 은 패 키 징 되 지 않 았 고 가장 중요 한 것 은 step 1 에서 Person 에 대한 결합 이 생 긴 다 는 것 이다.
고급 패키지 extend 함수 계승
function extend(subClass, superClass){

    var F = function(){};

    F.prototype = superClass.prototype;

    subClass.prototype = new F();

    subClass.prototype.constructor = subClass;

    subClass.superclass = superClass.prototype;

    if(superClass.prototype.constructor == Object.prototype.constructor){

        superClass.prototype.constructor = superClass;

    }

}

 
이렇게 하위 클래스 의 구조 함 수 를 구축 할 때 예 시 는 다음 과 같다.
function Author(name, books){

    Author.superclass.constructor.call(this, name);

    this.books = books;

}

extend(Author, Person);

원형 계승
 0. 원형 개체
대상 을 직접 정의 하면 됩 니 다.
var Person = {

    name: 'ysy',

    getName: function(){

        return this.name;

    }

}

 
1. 물 려 받 은 멤버 에 대한 읽 기와 쓰기 의 비등 성
이것 은 사실 이해 하기 쉽 습 니 다. 만약 에 속성 을 읽 기 전에 계 승 된 속성 에 대해 할당 작업 을 하지 않 았 다 면 읽 은 것 은 슈퍼 의 속성 입 니 다. 이때 쓰 면 sub 에 쓰 인 것 입 니 다.
물론 일단 쓴 후에 읽 기와 쓰 기 는 대등 하 다.
이 간단 한 문 제 는 더 이상 코드 를 제시 하지 않 는 다.만약 네가 모른다 면 원형 체인 을 철저히 이해 해라.
2. clone 함수
function clone(obj){

    function F(){}

    F.prototype = obj;

    return new F;

}

 
3. 상속 의 실현
var Author = clone(Person);

Author.books = [];

Author.getBooks = function(){

    return this.books;

}

 
이 상속 의 실현 은 훨씬 간단 해 야 할 것 같 습 니 다.
계승 과 포장
공용 과 특권 구성원 만 이 물 려 받 을 것 이다.
따라서 문호 개방 형 은 자 뢰 파생 에 가장 적합 하 다.이들 의 모든 멤버 는 공 개 돼 자 류 에 유 전 될 수 있다.한 멤버 가 조금 이라도 숨 겨 야 한다 면 밑줄 로 규범화 할 수 있다.
진정한 사유 구성원 을 파생 시 킬 때 특권 방법 은 공용 이 고 계승 할 수 있 기 때문에 부모 류 의 사유 구성원 을 방문 할 수 있 지만 하위 클래스 에 직접 방문 할 수 있 는 새로운 특권 방법 을 추가 할 수 는 없다.
혼합 원류
코드 를 다시 사용 하 는 방법 은 엄격 한 계승 을 필요 로 하지 않 는 다.
그의 방법 은 먼저 각종 통용 방법 을 포함 하 는 종 류 를 만 든 다음 에 그 로 다른 종 류 를 확장 하 는 것 이다.
이런 통용 방법 을 포함 하 는 종 류 는 바로 원 류 를 섞 는 것 이다.
다음은 간단 한 혼합 원 류 를 정의 합 니 다.
var Mix = function(){};

Mix.prototype = {

    serialize: function(){

        var output = [];

        for(key in this){

            output.push(key+':'+this[key]);

        }

        return output.join(',');

    }

}

augment(Author, Mix);

var author = new Author('Ross', ['js desgin']);

 
augment 는 사실 매우 간단 하 다.그 는 하나의 for in 으로 giving class 의 prototype 의 모든 구성원 을 receiving class 에 추가 했다.
function augment(rclass, gclass){

    if(arguments[2]){ //giving more than 3 paras

        for(var i=2, len=arguments.length; i<len; i++){

            rclass.prototype[arguments[i]] = gclass.prototype[arguments[i]];

        }

    }else{

        for(methodName in gclass.prototype){

            if(!rclass.prototype[methodName]){

                rclass.prototype[methodName] = gclass.prototype[methodName];

            }

        }    

    }

}

위의 방법 은 그 중 일부 만 계승 하 는 것 도 가리 킬 수 있다.
 원 류 를 섞 는 중대 한 점 은 다 중 계승 효 과 를 실현 할 수 있 고 다른 방법 은 방법 이 없다 는 것 이다. 왜냐하면 한 대상 에 하나의 원형 대상 만 있 을 수 있 기 때문이다.

좋은 웹페이지 즐겨찾기