자바스크립트에서 상속을 어떻게 구현하나요? js에서 상속을 구현하는 여러 가지 방법을 요약합니다.

이전에 배운 지식을 되돌아보면 크게 두 가지로 나눌 수 있다:

　1. 생성자 작업을 기반으로 한 패턴.

　2. 객체 기반 작업 모드입니다.

　3. 프로토타입 사용 여부

　4. 속성 복사 여부.

5. 둘 다(프로토타입 속성 복사 실행)

기존 지식을 모두 복습하자:

1. 프로토타입 체인 방식(전통 모방) :

child.prototype = new Parent();

패턴: Constructor를 기반으로 프로토타입 체인 패턴을 사용합니다.

기술 참고 사항: 기본 상속 메커니즘을 사용하면 메서드와 속성의 재사용 가능한 부분을 프로토타입 체인으로 마이그레이션하고 재사용이 불가능한 속성과 메서드를 자체 속성으로 설정할 수 있습니다.

2. 프로토타입에서만 상속:

Child.prototype = Parent.prototype

모드: 생성자 기반 작업 모드, 프로토타입 복사 모드(프로토타입 체인이 없으며 모든 객체가 하나의 프로토타입을 공유함) .

기술 참고 사항: 이 모드에서는 상속 관계를 구축하기 위해 새로운 개체 인스턴스가 필요하지 않으므로 효율성 측면에서 더 나은 성능을 갖습니다.

프로토타입 체인의 쿼리 역시 체인이 전혀 없기 때문에 더 빠릅니다.

단점은 자식 개체를 수정하면 부모 개체에 영향을 미친다는 것입니다. 왜냐하면 자식 개체는 부모 개체의 참조 일 뿐이기 때문입니다.

3. 임시 생성자 방법:

function extend(Child, parent){    var F = fucntion(){};
    F.prototype = Parent.prtotype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;  
}

모드: 프로토타입 체인 모드를 사용하는 생성자 기반 작업 모드입니다.

기술 참고 사항: 이 모드는 모드 1과 다릅니다. 상위 개체의 프로토타입 속성만 상속하고 상위 개체의 자체 속성(즉, 상위 생성자에 추가된 이 속성은 상속하지 않습니다. ) 상속됩니다.

또한 이 모드는 상위 개체에 액세스하는 방법도 제공합니다. (즉, usber 속성을 통해)

4. 프로토타입 속성 복사 방법:

function extend2(Child, Parent){    var p = Parent.prototype;    var c = Child.prototype;    for(var i  in p){
        c[i] = p[i];
    }
    c.uber = p;
}

모드: 생성자 작업 모드 기반, 속성 복사 모드, 프로토타입 모드를 사용합니다.

기술 참고 사항: 상위 개체의 프로토타입에 있는 모든 콘텐츠를 하위 개체의 프로토타입 속성으로 변환합니다.

　 상속을 위해 별도의 객체 인스턴스를 생성 할 필요가 없습니다.

프로토타입 체인 자체도 더 짧습니다.

5. 전체 속성 복사 방법:

function extendCopy(p){    var c = {};    for(var i in p){
        c[i] = p[i];
    }
    c.uber  = p;    return c;
}

모드: 객체 기반 작업 모드, 속성 복사 모드.

기술 참고 사항: 매우 간단하며 프로토타입 속성이 사용되지 않습니다.

6. 딥 카피 방식:

function deepCopy(Parent, Child){
    Child = Child || {};    for(var i in Parent){        if(Parent.hasOwnProprty(i)){             if(typeof Parent[i] === 'Object'){
                 Child[i] = Array.isArray(p[i]) ? [] : {};
                 deepcopy(Parent[i], Child[i]);  
             }else{
                 Child[i] = Parent[i]
             }
        }
    }    return Child;
}

모드: 객체 기반 작업 모드, 속성 복사 모드.

기술 참고 사항: 5와 동일하지만 모든 객체는 값으로 전달됩니다.

7. 프로토타입 상속 방법:

function object(o){    function F(){};
    F.prototype = o;    return new F();
}

모드: 객체 작업 모드 기반, 프로토타입 체인 모드 기반.

기술 노트: 클래스 모방 메커니즘을 버리고 객체 간 상속 관계를 직접 구축합니다.

프로토타입 고유의 장점을 활용하세요.

8. 확장 및 향상 모드:

function objectPlus(o, stuff){    var n;    function(){};
    F.prototype = o;
    n = new F();
    n.uber = o;    for(var i in stuff){
        n[i] = stuff[i]
    }    return n;
}

모드: 객체 기반 작업 모드, 프로토타입 체인 모드, 속성 복사 모드 사용.

기술 참고 사항: 이 방법은 실제로 프로토타입 상속과 프로토타입 복사를 혼합하여 적용한 것으로, 함수를 통해 객체의 상속과 확장을 동시에 완료합니다.

9. 다중 상속 방법:

function multi(){    var n = {}, stuff, j = 0;
    len = arguments.length;    for(j=0;j<len;j++){
        stuff = argument[j];        for(var i in stuff){
            n[i] = stuff[i];
        }
    }    return n;
}

공식 모드: 객체 기반 작업 모드, 속성 복사 모드.

기술 참고 사항: 하이브리드 플러그인 상속 구현.

　 상속 순서에 따라 상위 개체의 모든 속성을 순서대로 복사합니다.

10. 기생 상속 방식:

function parasite(victim){    var that = object(victim);
    that.more = 1;    return that;
}

모드: 객체 작업 모드 기반, 프로토타입 체인 모드 사용.

기술 참고 사항: 이 방법은 생성자와 유사한 함수를 통해 객체를 생성합니다.

이 함수는 해당 개체의 복사본을 수행하고 확장한 다음 복사본을 반환합니다.

11. 생성자 차용 방법:

function Child{
    Parent.apply(this, arguments);
}

소속 모드: 생성자 기반 작업 모드.

기술 참고 사항: 이 메서드는 상위 개체의 자체 속성(즉, 생성자의 this.properties 및 메서드)만 상속할 수 있습니다.

방법 1과 결합할 수 있습니다.

  　　　　 她便于我们的子对象继承某个对象的具体属性时，该方式是最简单的方式。

12.构造器借用与属性拷贝法：

function Child(){
    Parent.apply(this, argument);
}
extend2(Child, Parent);

所属模式：基于构造器的工作模式,使用原型链模式,属性拷贝模式。

技术注解：她允许我们在不重复使用调用对象构造器的情况下同时继承自身属性和原型属性。

额，持续更新了这么多天，大概也就这么多了，能力有限，多多包涵！

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱（3）－JavaScript视频教程

위 내용은 자바스크립트에서 상속을 어떻게 구현하나요? js에서 상속을 구현하는 여러 가지 방법을 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!