ECMAScript 6의 클래스 상속 분석(예제 포함)

이 기사는 ECMAScript 6의 클래스 상속 분석에 대한 내용을 제공합니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

클래스 상속

클래스 상속을 살펴보기 전에 생성자가 객체 상속을 구현하는 방법을 검토해 보겠습니다.

        function F() {
            this.a = 1;
        }
        function Son() {
            F.call(this);
        } 
        function inherit(S, F) {
            S.prototype = Object.create(F.prototype);
            S.prototype.constructor = S;
        }
        inherit(Son, F);
        let son = new Son();

어떤 기능을 구현하는지:

F의 this 속성을 상속받는 것은 F 인스턴스 객체의 속성이기도 합니다

Son.prototype.__proto__ === F.prototype은 상위 세대와 하위 세대의 상속을 실현합니다.

son.constructor를 사용하면 아들이 조상을 인식하고 가족에게 돌아갈 수 있습니다.

클래스 상속도 마찬가지입니다.

extends와 함께 사용됩니다. 그리고 super 키워드를 살펴보세요. Inheritance

        class A {
            constructor() {
                this.a = 1;
            }
        }
        class B extends A {
            constructor() {
                super();
                this.b = 2;
            }
            m() {

            }
        }
        let b = new B();

또한 이 세 가지 기본 기능을 실현합니다

B {a: 1, b: 2}
b.__proto__  == B.prototype
b.__proto__.__proto__ === A.prototype
b.constructor === B

제 생각에는 Extensions 키워드는 프로토타입의 상속을 실현하고 생성자의 수정은 super 키워드가 부모의 상속을 실현합니다. this를 클래스하고 여기의 super는 A.prototype.constructor.call(this)

Note

생성자를 작성한 후 그 안에 super를 작성해야 합니다. 그렇지 않으면 새 하위 클래스 인스턴스 객체가 오류를 보고하거나 보고하지 않습니다. 둘째, 하위 클래스 생성자의 this 속성은 super

1 뒤에 작성되어야 합니다. ES5 상속은 기본적으로 하위 클래스의 인스턴스 객체를 먼저 생성한 다음 부모 클래스의 메서드를 this에 추가합니다. 적용(이)). ES6 이 객체의 상속 메커니즘은 먼저 부모 클래스의 생성자를 통해 형성되어 부모 클래스와 동일한 인스턴스 속성 및 메서드를 얻은 다음 처리되고 하위 클래스의 자체 인스턴스 속성 및 메서드가 추가됩니다. 슈퍼 메소드가 호출되지 않으면 서브클래스는 이 객체를 가져오지 않습니다.

        class B extends A {
            constructor() {    //要么都不写，new时默认会自动生成
                super();
                this.b = 2;    //写在super后面
            } 
            m() {

            }
        }

super

super를 함수로 가리키는 다양한 문제는 A.prototype.constructor.call(this)

A.prototype.constructor.call(this)

super作为对象，在子类普通方法中调用,super就是父类的原型也就是A.prototype；所以只能调用原型链上的方法，不能动用父类实例的方法和属性constructor{}super를 객체로 가리키는 하위 클래스의 생성자에만 배치될 수 있습니다. , in 서브클래스의 일반 메소드에서 호출될 때 super는 상위 클래스인 A.prototype의 프로토타입이므로 프로토타입 체인의 메소드만 호출할 수 있으며 메소드 및 속성도 있습니다. constructor{ }는

        class A {
            constructor() {

                this.a = 1;
            }
            n() {

                return this;
            }
        }
        class B extends A {
            constructor() {
                
                super();
                this.b = 2;
                
            }
            m() {
                return super.n();
            }
        }
        let b = new B();
        b === b.m();

를 호출할 수 없으며

가 하위 클래스의 일반적인 메서드에서 super를 통해 상위 클래스의 메서드를 호출할 때 this 내부에 메소드는 현재 서브클래스 인스턴스를 가리킵니다.

그래서 위의 return this은 하위 클래스 인스턴스 객체를 반환하는 것입니다.

super를 속성을 할당하는 객체로 사용하는 경우
super는 이와 동일하며 할당된 속성은 하위 클래스 인스턴스의 속성이 됩니다

class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
    console.log(super.valueOf() instanceof B);   //true
  }
}

let b = new B();

super 객체로 사용되며 정적 메서드에서 가리키는 유일한 것은 부모 클래스가 부모 클래스의 정적 메서드를 호출할 수 있다는 것입니다. 메서드 내부에 이것이 있으면 현재 하위 클래스만 호출할 수 있습니다. 클래스의 정적 메소드. 객체는 항상 다른 객체를 상속하므로 모든 객체에 있을 수 있으므로 super 키워드를 사용하십시오.

        class A {
            constructor() {

                this.a = 1;
            }
            static n() {

                return this;
            }
        }
        class B extends A {
            constructor() {
                
                super();
                this.b = 2;
                
            }
            static m() {
                return super.n();
            }
        }
        console.log(A.n() === A)   // true
        console.log(B === B.m());  //true

클래스의 프로토타입과 __proto__ (1) 하위 클래스의 __proto__ 속성은 생성자의 상속을 나타내며 항상 상위 클래스를 가리킵니다.

(2) 하위 클래스 프로토타입 속성의 __proto__ 속성은 메서드의 상속을 나타내며 항상 상위 클래스의 프로토타입 속성을 가리킵니다.

클래스 상속 모드

var obj = {
  toString() {
    return "MyObject: " + super.toString();
  }
};
Object.getPrototypeOf(obj).toString = function () {
    return "这里super等于obj.__proto__";
}
console.log(obj.toString());        //MyObject: 这里super等于obj.__proto__

이 구현 덕분에 클래스는 자신의 정적 메서드를 호출할 수 있습니다.

es6은 원래 생성자의 상속을 구현합니다.

이전 Array.apply(this)는 Array의 내부를 형성하지 않았습니다. 따라서 배열 메소드를 참조하기 위해 배열 유사 객체를 사용할 때 대신 null을 사용합니다.

그리고 es6은 상속을 구현하기 위해 클래스를 사용합니다.

코드는 es6 항목에서 발췌되었습니다

class A {
}

class B {
}

// B 的实例继承 A 的实例
Object.setPrototypeOf(B.prototype, A.prototype);

// B 继承 A 的静态属性
Object.setPrototypeOf(B, A);

const b = new B();

ES6가

ES6에서 Object 생성자의 동작에 따라 Object 메서드가 new Object()를 통해 호출되지 않는 것이 발견되면 ES6에서는 Object 생성자가 매개 변수를 무시하도록 규정합니다.

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var arr = new MyArray();
arr[0] = 12;
arr.length // 1

arr.length = 0;
arr[0] // undefined

전달된 매개변수가 유효하지 않습니다

위 내용은 ECMAScript 6의 클래스 상속 분석(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!