JavaScript 연구 노트(10) js 객체 상속_기본 지식

1. 프로토타입 체인
//단독으로 거의 사용되지 않음

코드 복사 코드는 다음과 같습니다.

코드 보기
//속성 속성과 getSuperValue 메소드가 있는 SuperClass 클래스 정의
function SuperClass() {
this.property = true;
SuperClass. 프로토타입.getSuperValue = function() {
return this.property;
}

//나중에 추가된 속성 하위 속성과 getSubValue 메소드가 있는 SubClass 클래스 정의
function SubClass( ) {
this.subproperty = false;
}

//SubClass 클래스는 SuperClass 클래스를 상속합니다.
SubClass.prototype = new SuperClass();//SubClass 클래스 getSubValue 메소드 추가
SubClass.prototype.getSubValue = function() {
return this.subproperty;
}

//SubClass 클래스의 인스턴스 생성
var 인스턴스 = new SubClass();
alert(instance.getSuperValue());


2. 프로토타입과 인스턴스 간의 관계를 확인합니다
첫 번째 방법은 다음을 수행하는 것입니다. 인스턴스 및 프로토타입 체인을 테스트합니다

코드 복사 코드는 다음과 같습니다. alert (instanceofObject); //true, 인스턴스는 Object의 인스턴스인가요?

alert(instanceinstanceofSuperClass); //true, 인스턴스는 SuperClass의 인스턴스인가요?

alert(instanceinstanceofSubClass); 사실, 인스턴스가 SubClass의 인스턴스입니까?


두 번째 방법은 isPrototypeOf() 메서드를 사용하여 프로토타입 체인

코드 복사

코드는 다음과 같습니다. alert(Object.prototype.isPrototypeOf(instance)) //true alert( SuperClass.prototype.isPrototypeOf(instance)); //true

Alert(SubClass.prototype.isPrototypeOf(instance)); //true

3. 체인 상속
메서드 정의 순서:

코드 복사

코드는 다음과 같습니다. 코드 보기 function SuperClass() {

this.property = true;

}
SuperClass.prototype.getSuperValue = function() {
return this.property; >}

function SubClass() {
this.subproperty = false ;
}

//SubClass는 SuperClass를 상속합니다.
SubClass.prototype = new SuperClass(); /이것을 먼저 작성하고 새로 추가된 메서드와 슈퍼클래스를 재정의하는 메서드는 나중에 작성해야 합니다. 그렇지 않으면 재정의된 슈퍼클래스 메서드는 결코

//새 메서드 추가
SubClass를 호출할 수 없습니다. 프로토타입.getSubValue = function() {
return this.subproperty;
}
//슈퍼 클래스 메소드 재정의
SubClass.prototype.getSuperValue = function() {
return false; 🎜>}
var instance = new SubClass();
alert(instance.getSuperValue()); //fales, 여기서 SubClass의 인스턴스는 SubClass의 getSuperValue() 메서드를 호출하지만 getSuperValue()를 차단합니다.
//SuperClass 메서드를 사용하면 SuperClass


프로토타입 체인 상속의 단점: 1) 슈퍼 클래스에서 속성을 공유할 수 없습니다. 하위 클래스를 생성할 때 슈퍼 클래스의 생성자에 매개변수를 전달합니다. 모든 프로토타입 체인은 단독으로 사용되는 경우가 거의 없습니다

4. 생성자 차용
// 단독으로 사용되는 경우가 거의 없습니다

장점: 매개변수를 슈퍼 클래스에 전달할 수 있습니다. 단점: 함수를 재사용할 수 없으며 모든 클래스는 생성자 패턴을 사용해야 합니다.




코드 복사

코드는 다음과 같습니다. 코드 보기 function SuperClass(name) { this.name = name; }

function SubClass(){

SuperClass.call(this,"RuiLiang") ; / /상속된 SuperClass 및 매개변수를 SuperClass에 전달
this.age = 29; //인스턴스 속성
}

var 인스턴스 = new SubClass()
alert(instance.name) ; //RuiLiang
alert(instance.age); //29


6. 조합 상속
//가장 일반적으로 사용되는 상속 패턴

코드 복사

코드는 다음과 같습니다.

코드 보기
//SuperClass 만들기
function SuperClass(name) {
this.name = name;
this.colors = ["red","blue"," green"];
}
SuperClass.prototype.sayName = function() {
alert(this.name);
}

////하위 클래스 생성
function SubClass(name,age) {
SuperClass.call(this,name); //상속된 속성
this.age = age; //자신의 속성
}

SubClass. = new SuperClass(); //상속된 메소드
SubClass.prototype.sayAge = function() { //SubClass가 새로운 메소드를 추가합니다
alert(this.age)
}; //
var instance1 = new SubClass("RuiLiang",30);
instance1.colors.push("black")
alert(instance1.colors); green,black"
instance1.sayName(); //"RuiLiang"
instance1.sayAge(); //30

var 인스턴스2 = new SubClass("XuZuNan",26);
alert(instance2.colors); //"빨간색,파란색,녹색"
instance2.sayName(); //"RuiLiang"
instance2.sayAge();
7. 기타 상속 패턴
프로토타입 상속, 기생 상속, 기생 결합 상속