javascript_javascript 스킬의 상속 사용 요약

이 기사의 예에는 JavaScript의 상속 사용법이 요약되어 있습니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

예:

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

/**
* 상위 클래스를 상속하도록 하위 클래스를 구현하지만 중복된 속성과 메소드를 생성하지 않습니다.
* @returns {함수}
*/
정의(함수(){
반환 함수(subType, superType){
var proto = new Object(superType.prototype);
proto.constructor = 하위 유형;
subType.prototype = proto;
};
});
//————————————————————————
정의(함수(){
함수 ostring
{
this.str = s;
this.length = this.str.length;
}
ostring.prototype.show = function(){
경고(this.str);
};
ostring을 반환합니다.
});
//————————————————————————
정의(['상속', 'ostring'], function(상속, ostring){
함수 wstring(들){
//call을 사용하여 상위 클래스 생성자를 호출합니다
ostring.call(this, s);
this.chlength = 2 * s.length;
}
//다른 속성 상속
상속(wstring, ostring);
wstring.prototype.add = 함수(w)
{
경고(this.str w);
};
wstring을 반환합니다.
});

예제를 다시 살펴보세요
1. 함수를 사용하여 구현:

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

function Person(name) {
This.name = 이름;
}
Person.prototype.getName = function() {
이 이름을 반환하세요.
}
함수 저자(이름, 책) {
This.inherit=사람;
This.inherit(이름);
This.books = 책;
 
}
var au=new Author("dororo","많은 것을 배우세요");
au.이름

또는 이에 상응하는 내용:

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

function 사람(이름) {
This.name = 이름;
}
Person.prototype.getName = function() {
이 이름을 반환하세요.
}
함수 저자(이름, 책) {
Person.call(이, 이름);
This.books = 책;
 
}
var au=new Author("dororo","많은 것을 배우세요");
au.getName

이는 단지 이것을 매개변수로 사용하고 상위 클래스 Person의 생성자를 호출하고 상위 클래스에 할당된 모든 필드를 Author 하위 클래스에 할당하기 때문에 상위 클래스 Person 생성자 이외의 정의된 필드(프로토타입)는 하위 클래스에서 사용됩니다. 따라서 위의 예에서는 getName이 Person 프로토타입 객체에 정의되어 있으므로 au.getName은 정의되지 않습니다.

또한 하위 클래스의 생성자는 자신의 도메인을 정의하기 전에 상위 클래스의 생성자를 호출해야 상위 클래스가 하위 클래스의 정의를 덮어쓰는 것을 방지할 수 있습니다. 즉, 작성자가 정의한 속성 책은 Person.call 뒤에 있어야 합니다. 그렇지 않으면 Person의 속성으로 덮어쓰게 됩니다. 동시에 서브클래스에서 서브클래스의 함수 도메인을 정의하기 위해 프로토타입을 사용하지 않는 것이 가장 좋습니다. 왜냐하면 서브클래스가 새로 생성되고 인스턴스화되면 프로토타입이 실행되어야 하고 그런 다음 상위 클래스의 생성자가 호출되기 때문입니다. 이는 또한 쉽습니다. 상위 클래스의 속성을 덮어씁니다.

2. 프로토타입을 사용하여 구현:

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

function Person(name) {
This.name = 이름;
}
Person.prototype.getName = function() {
이 이름을 반환하세요.
}
함수 저자(이름, 책) {
This.books = 책
}
Author.prototype=새 사람(이름);
Author.prototype.constructor=저자;
Author.prototype.getBooks = function() {
이 책을 반납하세요;
}
var au1=new Author("dororo1","많은 것을 배우세요");
var au2=new Author("dororo2","덜 알아보기");
경고(au1.getName());
경고(au2.getName());

이 방법은 함수 구현 시 프로토타입을 상속할 수 없는 문제를 방지합니다. Author.prototype=new Person(name); new Person() 인스턴스는 Person 생성자와 프로토타입의 모든 속성을 호출하기 때문입니다. 그러나 단점은 Author.prototype이 이미 인스턴스화되었다는 것입니다. 따라서 하위 클래스가 인스턴스화되면 기본이 아닌 모든 데이터 유형은 참조 복사본이 됩니다. 따라서 위의 예에서 au1과 au2 인스턴스 모두에서 반환된 값은 dororo1입니다.

3. '믹싱'을 사용하여
달성

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

function Person(name) {
This.name = 이름;
}
Person.prototype.getName = function() {
이 이름을 반환하세요.
}
함수 저자(이름, 책) {
This.base = 새 사람(이름);
for(this.base의 var 키){
          if(!this[키]){
이것[키]=this.base[키];
           }
           }
This.book=books;
}
var au1=new Author("dororo1","work");
var au2=new Author("dororo2","play");
경고(au1.getName());
경고(au2.getName());
au1.book;
au2.book;

이는 확장이며 상위 클래스의 모든 필드를 하위 클래스에 복사합니다. 위의 두 가지 측면에는 전혀 문제가 없습니다.
기생 조합 모드)

JS 상속에는 속성 상속과 메서드 상속이 포함되며, 이는 서로 다른 메서드를 통해 구현됩니다.
1. 속성 상속

속성 상속은 함수의 실행 환경을 변경하여 이루어집니다. 함수의 실행 환경을 변경하려면 call() 및 apply() 메서드를 사용하면 됩니다.

먼저 Animal "클래스"를 만듭니다(JS에는 클래스 개념이 없기 때문에 여기서는 시뮬레이션일 뿐이며 실제로는 Function 객체일 뿐입니다).

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

function Animal(typeName) {
//현재 메소드의 실행 환경(this)에 typeName
속성을 ​​추가합니다. //그러나 실행 환경(this)은 이 함수가 실행될 때만 결정될 수 있습니다
this.typeName = 유형이름;
this.colors = ["red","while"];
}
//함수 프로토타입에 두 개의 (객체 공유) 메서드를 추가하고 싶습니다
Animal.prototype.Shout = function () { Alert("나는: --" this.typeName);};
Animal.prototype.Eat = function () { Alert("나는: --" this.typeName) };
//--사자 정의--"클래스"(실제로는 함수)
기능 라이온(tn) {
//--Animal 메소드를 실행하고 Apply의 첫 번째 파라미터를 통해 Animal의 실행 환경을 Lion's this
로 수정합니다. //마찬가지로 Lion의 경우 실행 중에만 확인할 수 있습니다
Animal.apply(this,["Lion"]);//-상위 클래스의 변수 속성을 상속받았습니다. 이것은 Lion이기 때문에 새로운 것입니다. 이것은 Lion입니다
}
Lion.prototype = Animal.prototype; //상위 클래스의 메소드를 상속받아 완료합니다. 하지만 하위 클래스가 메소드를 추가하면 상위 클래스도 이 메소드를 갖게 됩니다.
Lion.prototype.Hunt = 함수 () {
Alert("나는 : 사자야, 사냥하고 싶어~~·~");
}
var aminm = new Animal();
aminm.Hunt(); //---하위 클래스의 메서드에 액세스할 수 있지만 이는 좋지 않습니다.
//----그렇다면 이 문제를 어떻게 해결할까요? ? ? ? ? ?
//---해결책: 메소드를 상속할 때 다음과 같이 작성할 수 있습니다.
Lion.prototype = new Animal();//상위 클래스의 메소드를 상속하고 프로토타입 프로토타입에 Animal 객체를 할당합니다.
속성도 있습니다. var lion = new Lion(); //new 키워드는 생성 외에도 Lion 객체의 실행 환경을 Lion 객체 자체로 수정합니다
// --- 즉, new가 완료된 후 Lion 함수에서 이것이 Lion 함수 그 자체이고, 이어서 Lion 함수

가 호출됩니다.

새 키워드 분석:

새 키워드는 매우 훌륭합니다. 위 코드에서 새 키워드는 다음 작업을 완료했습니다.
1) Lion 객체를 저장할 준비를 위해 힙 공간을 엽니다
2) Lion 객체 자체의 실행 환경을 수정하여 Lion 함수가 Lion 함수 객체 자체를 가리키도록 합니다.
3) Lion "클래스"의 "생성자"를 호출하여 Lion 객체를 생성합니다
4) 변수 l에 Lion 함수 객체의 힙 주소를 할당합니다. 이때 l은 Lion 함수 객체
를 가리킵니다. lion.Shout();
lion.Eat();
그러나 이러한 종류의 상속에는 단점이 있습니다. 부모 클래스의 생성자가 두 번 호출되고 한 번 호출된 다음 다시 new가 호출됩니다.

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