Javascript_javascript 기술로 상속을 구현하는 3가지 메서드 및 코드 예제

객체지향 프로그래밍을 구현할 때 상속은 매우 중요한 수단입니다. 과도한 상속을 하지 말고, 상속 대신 합성을 사용한다고 말하지만, 상속은 언제나 불가피하다. 여기서 논의하고 싶은 것은 Javascript의 상속 메커니즘입니다.

자바스크립트에는 실제로 상속 개념이 없지만 어떤 방법을 통해 모방할 수 있습니다. 이러한 종류의 상속은 실제로 한 개체를 다른 개체에 복사합니다. 주로 보안상의 이유로 모든 로컬 클래스와 호스트 클래스를 기본 클래스로 상속할 수 없다는 점에 유의해야 합니다.

Javascript에는 대략 세 가지 유형의 상속이 있습니다. 1. 객체 가장, 2. 프로토타입 상속, 3. 두 가지의 혼합.

1. 객체 사칭

사실 객체 가장은 this 키워드와 밀접한 관련이 있습니다(그래서 Javascript에서 this 키워드를 완전히 이해하는 것이 매우 중요합니다 :P). 생성자는 이를 이용해 속성과 메소드에 값을 할당하고, 생성자도 일반 함수로 간주할 수 있으므로 우리 베이스 클래스의 생성자를 서브 클래스의 생성자로 만든 후 서브 클래스 함수 내에서 이를 호출하면 됩니다. , 그러면 하위 클래스는 상위 클래스의 속성과 메서드를 가져옵니다.

원리는 매우 간단한데 어떻게 구현할까요? 아래는 실제 동작에 대한 코드 예시입니다.

객체 가장 구현 방법 1, 새 객체를 생성하는 데 가장 일반적으로 사용되는 방법:

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

var classA = 함수(이름){
this.name = 이름;
this.alertName = 함수(){
경고(this.name);
}
}

var classB = 함수(이름,나이){
this.myConstructor = classA;
this.myConstructor(이름);
this.myConstructor를 삭제하세요.

this.age = 나이;
this.alertAge = 함수(){
경고(이.나이);
}
}

위의 방법이 맞는지 확인하기 위해 아래 테스트 코드를 작성해 보겠습니다.

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

var objA = new classA('DK');
objA.alertName();//DK

var objB = new classB('DS',20);

objB.alertName();//DS
objB.alertAge();//20

이것이 소위 객체 가장입니다. 또한 객체 가장을 구현하는 방법에는 두 가지가 있지만 구현 방법은 다르지만 원칙은 동일합니다.

객체 가장 구현 방법 2, 호출 방법 사용:

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

var classA = 함수(이름){
this.name = 이름;
this.alertName = 함수(){
경고(this.name);
}
}

var classB = 함수(이름,나이){
classA.call(this,name);

this.age = 나이;
this.alertAge = 함수(){
경고(이.나이);
}
}

첫 번째 방법에서는 상위 클래스를 가리키는 새 함수 포인터를 생성하고 해당 함수를 호출한 다음 포인터를 삭제합니다. 여기서는 동일한 목적을 달성하기 위해 호출 메소드를 사용하여 이 객체 아래에서 상위 클래스의 생성자를 실행합니다. 또한 call 방식의 반대말은 apply 방식이다.

객체 가장 구현 방법 3 , 적용 방법 사용:

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

var classA = 함수(이름){
this.name = 이름;
this.alertName = 함수(){
경고(this.name);
}
}

var classB = 함수(이름,나이){
classA.apply(this,new 배열(이름));

this.age = 나이;
this.alertAge = 함수(){
경고(이.나이);
}
}

실제로 전달된 매개변수가 약간 다르다는 점을 제외하면 적용 방법은 호출 방법과 매우 유사하다는 것을 알 수 있습니다.

2. 프로토타입 상속

모든 사람은 프로토타입 객체에 대해 알아야 합니다. 프로토타입 객체의 모든 속성과 메서드는 클래스의 모든 인스턴스에 전달되므로 상위 클래스의 모든 속성과 메서드를 하위 클래스의 프로토타입 객체에 지불합니다. , 즉 그것은 우리의 상속을 실현하는 것과 같습니다.

하위 클래스가 상위 클래스의 모든 속성과 메서드를 얻으려면 상위 클래스의 인스턴스를 하위 클래스의 프로토타입 객체에 직접 지불합니다. 그러면 하위 클래스는 상위 클래스의 모든 객체와 메서드를 얻는 것과 같습니다. 부모 클래스?

코드 샘플 서비스:

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

var classA = 함수(){
this.name = 'DK';
this.alertName = 함수(){
경고(this.name);
}
}

var classB = 함수(이름,나이){
this.name = 이름;
this.age = 나이;
}

classB.prototype = new classA();

classB.prototype.alertAge = 함수(){
경고(이.나이);
}

여기서 상위 클래스의 생성자는 매개변수가 없는지 확인해야 합니다. 생성 매개변수가 있더라도 프로토타입 상속을 구현할 때는 =.=!

을 전달할 수 없기 때문입니다.

3. 혼합 상속

이름에서 알 수 있듯이 혼합 상속은 처음 두 가지 방법이 혼합된 것입니다.

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

var classA = 함수(이름){
this.name = 이름;
}

classA.prototype.alertName = 함수(){
경고(this.name);
}

var classB = 함수(이름,나이){
classA.call(this,name);
this.age = 나이;
}

classB.prototype = new classA();

classB.prototype.alertAge = 함수(){
경고(이.나이);
}

객체 가장을 사용하여 매개변수를 상위 클래스에 전달하고 프로토타입 상속을 사용하여 공개 메서드를 상속합니다.

이제 세 가지 상속 방법에 대해 이야기했으니 이제 문제에 대해 이야기할 차례입니다.

객체 가장과 프로토타입 상속이 왜 있는지 궁금할 수도 있지만 여전히 하이브리드 상속도 있습니다. 가장 중요한 것은 바로 이 문제입니다.

1. 실제로 테스트해 보면 객체 가장을 통한 상속을 통해 하위 클래스가 상위 클래스의 프로토타입 체인에 있는 메서드에 액세스할 수 없음을 알 수 있습니다.

2. 프로토타입 상속을 사용하면 모든 속성이 공유 속성으로 전환됩니다. 동일한 하위 클래스의 두 인스턴스를 구현하면 모든 인스턴스가 모든 속성을 공유합니다.

3. 하지만 이는 확실히 부적절합니다. 따라서 하위 클래스가 상위 클래스 프로토타입 체인의 메서드에 액세스할 수 있도록 허용하면서 속성을 비공개로 유지하는 하이브리드 상속이 있습니다.

직접 시도해 볼 수 있습니다. 객체가 상속된 척하면 하위 클래스는 상위 클래스의 프로토타입 체인 메서드에 액세스할 수 없습니다. 프로토타입 체인 상속 하위 클래스의 모든 인스턴스는 모든 상위 클래스 속성을 공유합니다. 여기서는 예시를 쓰지 않겠습니다.