js의 상속 지식에 대한 자세한 설명-JS 튜토리얼-php.cn

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

小云云

풀어 주다： 2018-03-28 16:23:11

원래의

1338명이 탐색했습니다.

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

생성자, 인스턴스 및 프로토타입 간의 관계를 이해합니다. 생성자의 프로토타입과 인스턴스는 프로토타입을 가리키고, 프로토타입의 생성자는 생성자를 가리킵니다.
하위 클래스는 메서드와 속성을 재사용해야 합니다. of the parent class

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

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

로그인 후 복사

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

정의할 때 주의해야 합니다

//继承
Sub.prototype = new Super();

로그인 후 복사

새 메서드를 추가하고 메서드 코드를 재정의하기 전에

이 문장을 배치해야 합니다

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;

로그인 후 복사

주로 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;
}

로그인 후 복사

결합 상속의