JavaScript 프로토타입 상속 생성자 상속_javascript 기술

지난번에 "자바스크립트 프로토타입 상속의 기본 메커니즘"에 대해 이야기했는데, 이번 글에서는 생성자 상속에 대해 자세히 다루겠습니다.

간단한 예제로 시작하여 인간을 설명하는 People 생성자를 만듭니다.

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

function People(){
this.race = 'Stupid Human'
}

그런 다음 다음을 설명하는 노란색 생성자를 만듭니다. the yellow race :

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

function Yellow(이름, skin){
this.name = name;
this.skin = skin;
}

Yellow가 인간 People 개체를 상속하도록 하려면 JavaScript로 시뮬레이션할 수 있습니다. 여러 가지 방법으로.

1. 객체 마스커레이딩

간단히 말하면 객체 마스커레이딩은 의사 상속을 달성하기 위해 추상 클래스를 일반 함수로 정의하는 생성자를 사용하는 것입니다.

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

function Yellow(이름, 스킨) {
this._extend = People;
this._extend();
delete this._extend; //사람에 대한 참조 삭제
this.name = name;
this.skin = skin; yellow1 인스턴스화
var yellow1 = new Yellow('Xiao Ming', 'Yellow Skin');
console.log(yellow1.name) //Xiao Ming
console.log(yellow1.race); //멍청한 인간


이 코드에는 Yellow에 대한 전용 메서드 _extend를 추가합니다. 함수 자체는 참조 형식으로만 존재하므로 실행 중에 People 메서드가 자동으로 호출되고 Yellow는 전달됩니다. 생성자의 이름 매개변수입니다. Yellow 객체 자체의 속성과 메소드는 위의 과정이 완료되고 외부 메소드에 대한 참조가 지워진 후에 정의되어야 합니다.

참고: 다중 상속은 객체 가장을 통해 달성할 수 있습니다

2. 호출/적용 방법

호출/적용 방법을 통해 상속을 구현하는 것이 더 간단할 수 있습니다. 지루한 단계 작업:

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

function Yellow(name, skin) {

People.apply(this, 인수);
this.name = name;
this.skin = skin
}
//Yellow2 인스턴스화
var yellow2 = new Yellow(' David', 'dark skin')
console.log(yellow2.name); //David
console.log(yellow2.race) //멍청한 인간
입력은 다음과 같습니다. 인수 적용 배열 중 새 배열 또는 리터럴 배열을 사용할 수도 있습니다.


3. 프로토타입 연결

첫 번째 프로토타입 상속 방법은 객체의 프로토타입이 상위 클래스의 인스턴스를 가리키는 것입니다.

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

Yellow.prototype = new People()

Yellow.prototype.constructor = Yellow ; //초기 프로토타입이 완전히 지워졌으므로 생성자를 재설정하는 것이 가장 좋습니다.
var yellow3 = new Yellow('小王', '黄 Skin')
console.log(yellow3.race); // 멍청한 인간들


위 코드는 역으로 이해하면 yellow3 인스턴스 자체는 race 속성을 찾을 수 없고 프로토타입의 race 속성은 우연히 인스턴스 인스턴스의 race 속성이 된다. 사람들은 반대합니다.

People 개체의 경우 해당 속성이 프로토타입에 작성되었으므로 인스턴스화할 필요가 없습니다. Yellow의 프로토타입 속성을 People의 프로토타입 속성으로 지정하면 됩니다.

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

function People(){}

People.prototype.race = 'Stupid Humans';
Yellow.prototype = People.prototype;
Yellow.prototype.constructor = Yellow;


이것은 인스턴스화 작업을 수행하지 않고 포인터만 변경합니다. 환경 친화적. 그러나 참조 유형 관계로 인해 Yellow와 People은 동일한 프로토타입 객체를 가리키며, 이는 Yellow.prototype.constructor를 수정하면 실제로 People의 프로토타입 객체가 파괴된다는 의미입니다.

이 경우 빈 릴레이 객체를 사용하여 상위 클래스의 프로토타입을 우회할 수 있습니다.

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

var F = function(){};
F.prototype = People.prototype;
Yellow.prototype = new F();
Yellow.prototype.constructor = 노란색;