JS 상속 방법--사례 설명

1. 프로토타입 체인: 하나의 참조 유형이 다른 참조 유형의 속성과 메소드를 상속하도록 프로토타입을 사용합니다. 각 생성자는 프로토타입 객체를 포함하며, 예제에는 하나의 내부 포인터가 포함됩니다. 프로토타입 객체에.

기본 체인 구현의 기본 패턴:

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors);  //red, blue, green, black
var instance2 = new SubType();
alert(instance2.colors);   //red, blue, green, black

최종 결과: 인스턴스는 SubType의 프로토타입을 가리키고, SubType의 프로토타입은 SuperType의 프로토타입을 가리킵니다.

모든 함수의 기본 프로토타입은 다음과 같습니다. an 인스턴스 of Object

용 질문: 참조 유형 값의 문제가 발생합니다. 예를 들어 하위 클래스의 인스턴스가 생성되면 해당 하위 클래스 인스턴스의 속성이 수정되면 다른 하위 클래스를 생성할 때 영향을 받게 됩니다. 코드는 다음과 같습니다.

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors);  //red, blue, green, black
var instance2 = new SubType();
alert(instance2.colors);   //red, blue, green, black

위 결과를 보면 다른 인스턴스의 속성 값에 영향을 미치는 것으로 나타났습니다

2. 생성자 차용: 하위 유형 생성자 내부에서 상위 유형 생성자를 호출합니다

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType{}(
   SuperType.call(this);     //继承了SuperType。通过调用SuperType的构造函数，借用其构造结构
}
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(intance1.colors);     //red,blue,green,black
var instance2 = new SubType();
alert(instance2.colors);   //red,blue,green

이를 사용합니다. 메소드를 사용하면 이 메소드를 사용하여 하위 클래스 생성자에서 슈퍼 유형을 지정할 수 있습니다. 유형 생성자는 다음과 같이 매개변수를 전달합니다.

function SuperType(name){
    this.name = name;
}
function SubType(){
SuperType.call(this,“Nicholas”);        //传入参数，利用这个参数初始化父类构造函数中的name
this.age = 29;
}
var instance = new SubType();
alert(instance.name);   //Nicholas
alert(instance.age);   //29

문제: 재사용이 불편함

3. 결합 상속: 프로토타입 체인을 사용하여 프로토타입 속성의 상속을 달성하고 인스턴스 속성을 달성하기 위한 메서드 및 차용 생성자 Inheritance

샘플 코드:

function SuperType(name){
this.name = name;
this.colors = [“red”, “blue”,“green”];
}
SuperType.prototype.sayName = function(){   //定义了一个方法，该方法在继承的子类中也可以用
    alert(this.name);
}
function SubType(name, age){
SuperType.call(this, name);    //继承SuperType的一部分，this指SubType，
this.age = age;    //自己新定义的属性age也可以进行赋值
}
SubType.prototype = new SuperType();     //利用原型继承，可以使用父类的方法（见原型链继承）
SubType.prototype.sayAge = function(){   //定义SubType特有的新方法
    alert(this.age);
}
var instance1 = new SubType(“Martin”, 10);
instance1.colors.push(“black”);
alert(instance1.colors);  //red,blue,green,black
instance1.sayName();   //Martin
instance1.sayAge();  //10
var instance2 = new SubType(“Greg”, 27);
alert(instance2.colors);   //red,blue,green
instance2.sayName();  //Greg
instance2.sayAge();  //27

관련 권장 사항:

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

JS에서 상속을 구현하는 여러 가지 방법

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