이 기사에서는 JavaScript 상속 메커니즘에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
초보자는 일반적으로 JavaScript 언어의 상속 메커니즘을 이해하기가 어렵습니다. "서브 클래스"와 "부모 클래스"라는 개념이 없으며 "클래스"와 "인스턴스"를 구별하지도 않습니다. 상속을 달성하기 위해 매우 이상한 "프로토 타입 체인"모델에 전적으로 의존합니다.
나는이 부분을 공부하고 많은 메모를하는 데 많은 시간을 보냈습니다. 그러나 그것들은 모두 강제 기억이며 근본적으로 이해 될 수는 없습니다.
1. 수업을 만드는 방법
다음과 같이 사람이라는 클래스가 있다고 가정합니다.
다음과 같이 코드를 복사하십시오. var person = function (이름, 나이) {
this.name = 이름;
this.age = age;
}
person.prototype.getName = function () {
이 this.name;
}
위에서 언급 한 바와 같이 : 사람은 지구상의 모든 사람들을 대표하며 모든 사람은이 두 가지 기본 속성을 가지고 있습니다 : 이름과 나이; 이제 우리는 학생 수업을 구현하고 싶습니다. 학생들은 또한 사람이며, 학생들은 또한 이름과 나이와 같은 속성을 가지고 있습니다. 이제 문제는 어떻게이 관계를 구축 할 수 있습니까?
먼저 순수한 객체 지향 언어가 어떻게 수행하는지 살펴 보겠습니다 (예 : ActionScript3).
다음과 같이 코드를 복사하십시오. 클래스 학생 확장 사람 {}; // 코드 한 줄은 매우 간단합니다. 더 정확하고, 한 단어-extend
2. JS로 변경하면 어떻게해야합니까?
JS 상속 메커니즘의 구현을 설명하기 전에 먼저 JS의 프로토 타입 체인을 이해해 봅시다.
코드 사본은 다음과 같습니다. var person = new Person ( 'poide-flw', 21);
person.getName (); // "poide-flw"
위의 getName () 메소드는 어떻게 실행됩니까? 먼저, 사람 함수에 getName () 메소드가 있는지 여부를 찾을 수 있습니다. 그런 다음 person.prototype을 검색하고 찾으십시오! 그럼 전화하십시오. 그렇지 않으면 어떨까요? 동일한 방법을 계속 따르고 방법을 찾거나 프로토 타입 체인의 상단에 도달 할 때까지 프로토 타입을 따라 검색하십시오!
예를 들어, 이제 개 대상의 프로토 타입을 나타내는 Dog라는 생성자가 있습니다.
다음과 같이 코드를 복사하십시오 : function dog (name) {
this.name = 이름;
}
이 생성자에 새로 사용하면 개 객체의 인스턴스가 생성됩니다.
코드 사본은 다음과 같습니다. var doga = new Dog ( 'big hair');
경고 (doga.name); // 큰 머리카락
새로 생성 된 인스턴스 객체를 나타내는 생성자 의이 키워드에주의하십시오.
3. 새로운 운영자의 단점
생성자를 사용하여 인스턴스 객체를 생성하는 데있어 한 가지 단점이 있습니다. 즉, 속성 및 방법을 공유하는 기능.
예를 들어, 개 객체의 생성자에서 인스턴스 객체의 공통 속성 종을 설정하십시오.
다음과 같이 코드를 복사하십시오 : function dog (name) {
this.name = 이름;
this.species = 'canidae';
}
그런 다음 두 인스턴스 객체가 생성됩니다.
코드 사본은 다음과 같습니다. var doga = new Dog ( 'big hair');
var dogb = new Dog ( 'eimao');
이 두 물체의 종 속성은 독립적이며, 하나는 다른 물체에 영향을 미치지 않습니다.
코드 사본은 다음과 같습니다. doga.species = '여성';
경고 (dogb.species); // Doga의 영향을받지 않는 "Canine Family"를 보여줍니다
각 인스턴스 객체에는 자체 특성 및 메소드 사본이 있습니다. 이것은 데이터를 공유하지 않을뿐만 아니라 막대한 자원 낭비도 공유하지 않습니다.
SO : 상속 아이디어 : JS의 고유 한 프로토 타입 체인을 통해 상속 메커니즘을 구현하십시오!
4. 프로토 타입 체인을 기반으로 한 상속
1 직접 상속 및 구현
다음과 같이 코드를 복사하십시오.
person.call (이, 이름, 나이);
this.sid = sid;
}
학생 .prototype = 새로운 사람 (); // 상속 메커니즘을 구현하기 위해 학생들의 프로토 타입 체인에 사람을 넣어
학생 .prototype.constructor = 학생;
whity.prototype.getResults = function () {
// 학생의 성적을받습니다
}
학생을 놓치지 않아도됩니다. prototype.constructor = 학생 줄! 생성자를 정의 할 때 기본 프로토 타입은 객체 인스턴스이며 프로토 타입의 생성자 속성이 자동으로 기능 자체로 설정됩니다! ! ! 프로토 타입이 다른 객체로 수동으로 설정되면 새 개체는 자연스럽게 원래 객체의 생성자 값을 갖지 않으므로 생성자 속성을 재설정해야합니다. 좋다:
다음과 같이 코드를 복사하십시오. var test = function () {
this.time = "지금";
}
Console.log (Test.Prototype); // 객체 {} 빈 객체입니다
Console.log (test.prototype.constructor); // function () {this.time = "now";} 및 함수 자체
// 수동으로 테스트의 프로토 타입 속성을 변경하는 경우
test.prototype = {
somefunc : function () {
Console.log ( 'Hello World!');
}
};
Console.log (test.prototype.constructor); // function object () {[기본 코드]}
// 그러면 포인팅이 완전히 잘못되었음을 알 수 있으므로 프로토 타입 속성을 수동으로 변경할 때 생성자 포인팅을 변경해야합니다.
위의 테스트 후에는 생성자 값을 수정 해야하는 이유를 알 수 있습니다.
2. 캡슐화 상속 된 기능 확장
다음과 같이 코드를 복사하십시오. 함수 확장 (서브 클래스, 슈퍼 클래스) {
var f = function () {};
f. prototype = superclass.prototype;
subclass.prototype = new f ();
Subclass.prototype.constructor = 서브 클래스;
}
실제로,이 기능의 기능은 위의 상속 프로세스의 캡슐화 일 뿐이며 차이점은 다음과 같습니다.
슈퍼 클래스의 프로토 타입 속성 만 상속되며 슈퍼 클래스 생성자의 속성을 상속하지 않습니다.
이것의 장점은 새로운 생성자의 오버 헤드를 줄이는 것입니다!
물론 후속 문제는이 기능을 단순히 전달하여 서브 클래스가 슈퍼 클래스의 모든 속성을 상속받을 수 없다는 것입니다.
개선하다:
다음과 같이 코드를 복사하십시오. // 학생 생성자에게 코드 줄을 계속 추가하십시오.
person.call (이, 이름, 나이);
5. 요약
JS의 프로토 타입 체인 원리를 사용하여 JS 상속 메커니즘을 쉽게 구현할 수 있습니다. 그것은 엄격하지는 않지만 내 목표는 달성되었습니다. 한 번 반복 코드를 나타냅니다!
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.