js의 상속 지식에 대한 자세한 설명

小云云
풀어 주다: 2018-03-28 16:23:11
원래의
1354명이 탐색했습니다.

이 기사에서는 모든 사람에게 도움이 되기를 바라며 주로 텍스트와 코드 형식으로 js의 상속 지식에 대한 자세한 설명을 공유합니다.

  1. 생성자, 인스턴스 및 프로토타입 간의 관계를 이해합니다. 생성자의 프로토타입과 인스턴스는 프로토타입을 가리키고, 프로토타입의 생성자는 생성자를 가리킵니다.

  2. 하위 클래스는 메서드와 속성을 재사용해야 합니다. of the parent class

  3. 생성된 프로토타입은 상위 클래스의 인스턴스를 가리키며 하위 클래스는 이 인스턴스를 통해 상위 클래스의 속성과 메서드에 액세스할 수 있습니다. 이 관계는 점진적으로 계층별로 형성되어 프로토타입 체인을 형성합니다.

    function Super(name) {
        this.name = "name";
        this.superproperty = true;
    }
    Super.prototype.getSuperName = function () {
        return this.name;
    }
    Super.prototype.getSuperproperty = function () {
        return this.superproperty;
    }
    
    function Sub(name) {
        this.name = name;
        this.subproperty = false;
    }
    //继承
    Sub.prototype = new Super();
    Sub.prototype.getSubName = function () {
        return this.name;
    }
    Sub.prototype.getSubproperty = function () {
        return this.subproperty;
    }
    
    var instance = new Sub("ctc");
    console.log(instance.getSuperproperty());//true
    console.log(instance.getSubproperty());//false
    console.log(instance.getSuperName());//ctc
    console.log(instance.getSubName());//ctc
    로그인 후 복사
  4. 마지막 두 출력은 ctc의 프로세스입니다. 인스턴스가 "." 연산자를 만나면 실행됩니다. 1) 인스턴스 검색, 2) sub.prototype 검색, 3) super.prototype 검색.
  5. 주의사항
  • 기본 프로토타입 객체

    모든 인스턴스에는 기본 프로토타입 객체가 있으므로 super.prototype.prototype은 Object의 프로토타입을 가리켰을 뿐입니다
정의할 때 주의해야 합니다

//继承
Sub.prototype = new Super();
로그인 후 복사

    상속 중 재정의? 현재 sub.prototype의 생성자는 누구를 가리키는가?
  • 새 메서드를 추가하고 메서드 코드를 재정의하기 전에
이 문장을 배치해야 합니다

Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}
로그인 후 복사

단점

상위 클래스의 인스턴스 속성은 하위 클래스의 프로토타입 속성이 되어 공유됩니다.

만들기 하위 클래스 인스턴스를 만들 때 모든 인스턴스에 영향을 주지 않으면서 매개 변수를 상위 클래스에 전달할 수 없습니다.

생성자 차용

function Super(name) {
    this.name = name;
  
}
Super.prototype.getSuperName = function () {
    return this.name;
}


function Sub(name) {
로그인 후 복사
  Super.call(this,name);
로그인 후 복사
this.name = name;
로그인 후 복사
    }//Inherit Sub.prototype = new Super();Sub.prototype.getSubName = function () { return this.name;}
  • 주로 Super 생성자의 코드를 차용하여, sub의 자체 속성 정의를 구현합니다.
그러나 이렇게 작성하면 각 인스턴스가 자체 속성과 메서드를 가질 수 있으며 동시에 메서드 함수의 재사용성을 잃게 됩니다.

결합 상속

을 사용하여 해결합니다. 메소드 재사용 문제는

부모 클래스의 생성자에서 동적 프로토타입 구성 또는 결합 구성을 사용하여 생성자가 속성의 할당 정의만 갖고 메소드 정의가 프로토타입에 있도록 하는 것입니다.


그런 다음 하위 클래스에서 하위 클래스 Points의 프로토타입을 상위 클래스의 인스턴스에 추가합니다. 하위 클래스의 생성자는 상위 클래스의 구조를 차용하므로 하위 클래스의 각 인스턴스는 고유한 특성을 가지지만 메서드는 공유됩니다.

function Super(name) {
    this.name = name;
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}

function Sub(name) {
    Super.call(this,arguments);
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();
로그인 후 복사
// Sub.prototype.constructor = Sub;//如果此处未绑定,上一句重写了原型,Super的实例的constructor指向的自然是Super
로그인 후 복사

Sub.prototype.getSubName = function () { return this.name;}var 인스턴스 = new Sub("ctc");

프로토타입 상속

상속의 또 다른 구현이지만 프로토타입의 도움으로 이를 수행할 수 있습니다. 기존 객체를 기반으로 새로운 객체를 생성하는 객체가 있습니다

function object(o) {
    function F() {
    }
    F.prototype = o;
    return F;
}
로그인 후 복사

이해: F는 함수이자 객체입니다. 해당 프로토타입은 object()에서 허용하는 o를 가리키고 반환된 F는 프로토타입이 o를 가리키는 객체입니다.

Order: Object.creat()는 위 함수를 표준화합니다. 즉, Object.creat(o)도 위 코드를 구현합니다

기생 상속

프로토타입 상속을 기반으로 이 객체가 강화됩니다

function creatAnother(o) {
    var clone = Object.create(o);
    clone.name = "ctc";
    clone.sayname = function () {
        console.log(this.name);
    }
    return clone;
}
로그인 후 복사

속성이 추가되었습니다.

기생 결합 상속

목적은 결합 상속 문제를 해결하는 것입니다. 결합 상속에서는 Super()가 적어도 두 번 호출됩니다. 1. Super.call(this,arguments) 2. Sub. 프로토타입 = new Super()

사실 우리는 하위 클래스의 프로토타입이 상위 클래스의 메소드를 상속받기를 원합니다(모든 인스턴스가 자체 메소드 공간을 갖고 있는 것은 아니기 때문에 일반적으로 상위 클래스의 프로토타입에 있음)

그래서 프로토타입 상속을 사용하면 상위 클래스의 프로토타입에서 하위 클래스의 프로토타입만 상속받을 수 있습니다.

function inherit(SubType,SuperType) {
    var prototype = Object.create(SuperType);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}
로그인 후 복사

결합 상속의

Sub.prototype = new Super();
로그인 후 복사

inherit(Sub,Super);
로그인 후 복사

로 바꾸세요. 관련 권장 사항:

JS의 상속 메서드에 대한 자세한 예

JS 상속 방법이란 무엇입니까?

js의 상속 메커니즘에 대한 자세한 해석

위 내용은 js의 상속 지식에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿