자바스크립트 상속 메커니즘에 대한 자세한 설명

이 기사의 예에서는 JavaScript 상속 메커니즘을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

Javascript 언어의 상속 메커니즘은 일반적으로 초보자가 이해하기 어렵습니다. "하위 클래스"와 "상위 클래스"라는 개념이 없으며 "클래스"와 "인스턴스"의 구분도 없습니다. 하나는 상속을 구현하는 매우 독특한 "프로토타입 체인" 모델입니다.

이 부분을 공부하는데 시간을 많이 투자하고 메모도 많이 했어요. 그러나 그것들은 모두 강요된 기억이고 근본적으로 이해될 수 없다.

1. 클래스 생성 방법

다음과 같이 Person이라는 클래스가 있다고 가정해 보겠습니다.

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

var Person = 함수(이름, 나이) {
This.name = 이름;
이.나이=나이;
}
Person.prototype.getName = function() {
이 이름을 반환하세요.
}

위와 같이: 사람은 지구상의 모든 사람을 나타내며 모든 사람은 이름과 나이라는 두 가지 기본 속성을 갖습니다. 이제 학생 클래스를 구현해야 하며 학생도 사람이라는 것을 알 수 있습니다. 이름과 나이로요. 이제 문제는 이 관계를 어떻게 구축할 것인가입니다.
먼저 순수한 객체 지향 언어(예: Actionscrpt3)가 어떻게 작동하는지 살펴보겠습니다.

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

class Students 확장 Person {} //매우 간단합니다. 코드, 더 정확함 단어라고 말해보세요--확장

2. js로 전환하는 방법

js의 상속 메커니즘 구현을 설명하기 전에 먼저 js의 프로토타입 체인을 이해해 보겠습니다.

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

var person = new Person('Poised-flw', 21);
person.getName(); // "태세-flw"

위의 getName() 메소드는 어떻게 실행되나요? 먼저, Person 함수에서 getName() 메소드를 찾아서 없는 것을 찾은 다음 Person.prototype으로 이동하여 존재하는 것을 찾습니다. 그럼 전화해, 그렇지 않으면 어떡하지? 방법을 찾거나 프로토타입 체인의 상단에 도달할 때까지 동일한 방식으로 프로토타입을 계속 검색하세요!

예를 들어, 이제 개 개체의 프로토타입을 나타내는 DOG라는 생성자가 있습니다.

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

기능 DOG(이름){
　　this.name = 이름;
}

이 생성자에 new를 사용하면 개 개체의 인스턴스가 생성됩니다.

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

　var dogA = new DOG('Big Hair');
경보(dogA.name); // 다마오

새로 생성된 인스턴스 개체를 나타내는 생성자에서 this 키워드에 주의하세요.

3. 신규 운영자의 단점

생성자를 사용하여 인스턴스 객체를 생성하는 것은 단점이 있습니다. 즉, 속성과 메서드를 공유할 수 없습니다.
예를 들어 DOG 객체의 생성자에서 인스턴스 객체의 공통 속성 종류를 설정합니다.

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

기능 DOG(이름){
　　this.name = 이름;
　　this.species = '개과';
}

그런 다음 두 개의 인스턴스 객체를 생성합니다.

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

　var dogA = new DOG('Big Hair');
var dogB = 새로운 DOG('two毛');

이 두 객체의 종 속성은 독립적이며, 하나를 수정해도 다른 객체에는 영향을 미치지 않습니다.

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

dogA.species = 'Feline';
Alert(dogB.species); // dogA의 영향을 받지 않는 "canine"을 표시합니다.

각 인스턴스 객체에는 고유한 속성 및 메서드 복사본이 있습니다. 이는 데이터 공유에 실패할 뿐만 아니라 막대한 자원 낭비이기도 합니다.

그래서: 상속의 개념: js의 고유한 프로토타입 체인을 통해 상속 메커니즘을 구현합니다!

4. 프로토타입 체인 기반 상속

1. 직접 상속 구현

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

var Students = 함수(이름, 나이, 학번) {
Person.call(이것, 이름, 나이);
This.sid = sid;
}
Students.prototype = new Person(); //상속 메커니즘을 구현하기 위해 Students의 프로토타입 체인에 Person을 배치합니다
Students.prototype.constructor = 학생;
Students.prototype.getResults = function() {
// 학생 점수 얻기
}

Students.prototype.constructor = Students라는 줄을 놓치지 마세요! , 생성자를 정의할 때 기본 프로토타입은 Object 인스턴스이고 프로토타입의 생성자 속성은 자동으로 함수 자체로 설정됩니다! ! ! 프로토타입이 수동으로 다른 객체로 설정되면 새 객체는 당연히 원래 객체의 생성자 값을 가지지 않으므로 해당 생성자 속성을 재설정해야 합니다. 예:

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

var Test = function() {
This.time = "지금";
}
console.log(Test.prototype); // Object {} 빈 객체
console.log(Test.prototype.constructor); // function() {this.time = "now";} 및 함수 자체
// Test
의 프로토타입 속성을 수동으로 변경하는 경우 Test.prototype = {
SomeFunc: 함수() {
console.log('hello world!');
}
};
console.log(Test.prototype.constructor); // function Object() { [네이티브 코드] }
// 그러면 완전히 잘못 지적했다는 것을 알게 될 것이므로 프로토타입 속성을 수동으로 변경할 때 해당 생성자 포인터를 변경해야 합니다.

위의 테스트를 마치면 생성자 값을 수정해야 하는 이유를 알게 됩니다.

2. 상속된 함수를 캡슐화합니다

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

function extend(subClass, superClass) {
var F = function() {};
F.prototype = superClass.prototype;
subClass.prototype = new F();
​ subClass.prototype.constructor = subClass;
}

실제로 이 함수의 기능은 위의 상속 프로세스를 캡슐화한 것일 뿐입니다. 차이점은 다음과 같습니다.
이는 superClass의 프로토타입 속성만 상속하고 superClass 생성자의 속성은 상속하지 않습니다.
이것의 장점은 새로운 생성자를 생성하는 비용을 줄여준다는 것입니다!
물론 후속 문제는 subClass가 이 함수만으로는 superClass의 모든 속성을 상속받을 수 없다는 것입니다
개선 사항:

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

// Students 생성자에 코드 줄을 계속 추가합니다.
Person.call(이것, 이름, 나이);

5. 요약

js의 프로토타입 체인 원리를 사용하면 js의 상속 메커니즘을 쉽게 구현할 수 있습니다. 비록 매우 엄격하지는 않지만 내 목표는 달성되었습니다. 반복되는 코드는 최대한 한 번만 나타나야 합니다!

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.