JS 상속 관계를 반영하는 방법

JS는 객체 지향의 약한 유형의 언어이며 상속도 매우 강력한 기능 중 하나입니다. 그렇다면 JS에서 상속을 구현하는 방법은 무엇입니까? 기다려 보자.

JS에서는 다음 두 가지 상속 방법이 일반적으로 사용됩니다. # 프로토타입 체인 상속(객체 간 상속)

클래스 상속(생성자 간 상속)

js는 Java 언어처럼 진정한 객체 지향이 아니기 때문에 js는 객체를 기반으로 하므로 클래스 개념이 없습니다. 따라서 상속을 구현하려면 js의 프로토타입 메커니즘이나 적용 및 호출 메서드를 사용하여

객체 지향 언어에서는 클래스를 사용하여 사용자 정의 객체를 생성할 수 있습니다. 하지만 js의 모든 것은 객체이므로 사용자 정의 객체를 만드는 방법은 무엇입니까? 이를 위해서는 js 프로토타입을 사용해야 합니다.

프로토타입을 템플릿으로 간단히 생각할 수 있으며 새로 생성된 사용자 정의 개체는 모두 이 템플릿(프로토타입)의 복사본입니다(실제로는 복사본이 아닙니다. 링크입니다). , 그러나 이 링크는 보이지 않습니다. 새로 인스턴스화된 객체 내부에는 프로토타입 객체를 가리키는 보이지 않는 __Proto__ 포인터가 있습니다.

js는 생성자와 프로토타입을 통해 클래스의 기능을 시뮬레이션할 수 있습니다. 게다가, js 클래스 상속의 구현도 프로토타입 체인에 의존합니다.

프로토타입 상속 및 클래스 상속

클래식 상속은 하위 유형 생성자 내부에서 상위 유형 생성자를 호출하는 것입니다.

엄격한 클래스 상속은 일반적으로 조합하여 사용되지 않습니다.

function Super(){
    this.colors=["red","blue"];
}
 
function Sub(){
    Super.call(this);
}

프로토타입 상속은 기존 객체의 도움을 받아 새로운 객체를 생성하고 이를 하위 클래스화하는 것입니다. 프로토타입은 상위 클래스를 가리키며 이는 상위 클래스의 프로토타입 체인을 연결하는 것과 같습니다. 클래스 특성(메서드 포함)의 경우 먼저 생성자를 정의해야 합니다. 그런 다음 상위 클래스의 새 인스턴스를 생성자의 프로토타입에 할당합니다. 코드는 다음과 같습니다.

<script>
    function Parent(){
        this.name = 'mike';
    }
 
    function Child(){
        this.age = 12;
    }
    Child.prototype = new Parent();//Child继承Parent，通过原型，形成链条
 
    var test = new Child();
    alert(test.age);
    alert(test.name);//得到被继承的属性
    //继续原型链继承
    function Brother(){   //brother构造
        this.weight = 60;
    }
    Brother.prototype = new Child();//继续原型链继承
    var brother = new Brother();
    alert(brother.name);//继承了Parent和Child,弹出mike
    alert(brother.age);//弹出12
</script>

위의 프로토타입 체인 상속에는 여전히 누락된 링크가 하나 있습니다. 이는 모든 생성자가 Object에서 상속됩니다. 개체 상속은 자동으로 수행되며 수동으로 상속할 필요가 없습니다. 그렇다면 해당 개체의 소속은 무엇입니까?

프로토타입과 인스턴스 간의 관계 확인

프로토타입과 인스턴스 간의 관계는 두 가지 방법으로 확인할 수 있습니다. 연산자 인스턴스of 및 isPrototypeof() 메서드:

alert(brother instanceof Object)//true
alert(test instanceof Brother);//false,test 是brother的超类
alert(brother instanceof Child);//true
alert(brother instanceof Parent);//true

프로토타입 체인에 나타난 프로토타입인 만큼 프로토타입 체인에서 파생된 인스턴스의 프로토타입이라고 할 수 있습니다. , isPrototypeof() 메서드도 true를 반환합니다.

관련 학습 권장사항: js 비디오 튜토리얼

위 내용은 JS 상속 관계를 반영하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!