js 클래스 상속의 구체적인 구현 방법_기본 지식

코드 수정을 시작하기 전에 상속 사용의 목적과 이점을 이해해야 합니다. 일반적으로 클래스를 설계할 때 반복되는 코드를 줄이고 클래스 간의 결합을 약화시키려고 노력합니다. 둘 다의 균형을 맞추는 것은 어렵습니다. 구체적인 조건과 상황에 따라 어떤 방법을 취해야 할지 결정해야 합니다. 객체 지향 언어의 상속에 대한 우리의 이해에 따르면 상속은 클래스의 직접적인 강력한 결합을 가져오지만 고유한 유연성으로 인해 js는 강한 결합과 약한 결합, 고효율 및 저효율로 코드를 설계할 수 있습니다. 무엇을 사용할지는 상황에 따라 다릅니다.

js에서 상속을 구현하는 방법에는 클래스 상속, 프로토타입 상속, 메타클래스 세 가지가 있습니다. 클래스 상속에 대해서는 먼저 여기서 간략하게 설명하고, 마지막 두 가지에 대해서는 나중에 간략하게 설명하도록 하겠습니다. 많은 관심과 지도 부탁드립니다.

고전적인 상속.

js 클래스 상속의 구현은 프로토타입 체인에 의존합니다. 프로토타입 체인이란 무엇입니까? js의 객체에는 프로토타입이라는 속성이 있습니다. 이 속성은 객체 유형에 대한 참조를 반환하고 객체 클래스의 기본 기능 세트를 제공하는 데 사용됩니다.

그런데 우리는 이런 코드를 자주 사용하는 것 같아요.

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

var Person = function(){
this.name = "liyatang";
};
Person.prototype = {
//Person의 기본 기능은 여기서 제공할 수 있습니다
getName: function(){
return this .name;
}
}

Prototype 속성에 클래스의 기본 기능을 넣어 Person 객체에 대한 참조에 XXX 기능이 있음을 나타냅니다.

프로토타입을 이해한 후에는 프로토타입 체인이 무엇인지 이해해야 합니다. 객체의 멤버(속성 또는 메서드)에 액세스할 때 이 멤버가 현재 객체에 없으면 js는 프로토타입 속성이 가리키는 객체에서 해당 멤버를 검색합니다. 다음 단계의 프로토타입이 발견될 때까지 뾰족한 물체를 검색합니다. 찾을 수 없으면 정의되지 않은 값이 반환됩니다.

그렇다면 프로토타입 체인은 우리에게 어떤 힌트를 주는 걸까요? 프로토타입 체인은 한 클래스가 다른 클래스를 상속하려면 하위 클래스의 프로토타입이 상위 클래스의 인스턴스를 가리키도록 설정하기만 하면 된다는 것을 의미한다고 생각하기 쉽습니다. 이는 상위 클래스의 멤버를 하위 클래스에 바인딩합니다. 하위 클래스에서 멤버를 찾을 수 없으면 상위 클래스에서 검색되기 때문입니다. (위 두 문단의 표현은 엄격하지 않고, 이해하기 쉽게 설명했습니다.)

다음으로 Person 클래스의 name 및 getName 멤버를 상속해야 하는 중국어 클래스가 필요합니다.

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

var 중국어 = 함수(이름, 국가) {
//상속, 호출로 호출할 수 있는 상위 클래스의 생성자를 호출해야 합니다. 이는 중국어를 가리킵니다
//Person이 이 범위에 있을 때만 Person Person.call(this,name );
this.nation = nation;
};
Chinese.prototype = Person.prototype;
//이것은 이전과 같을 수 없습니다. 프로토타입 속성을 덮어썼습니다
//중국어 .prototype = {
// getNation : function(){
// return this.nation;
// }
//};
//다음과 같이 모든 후속 메서드를 추가해야 합니다.
Chinese.prototype.getNation = function(){
                                          return this.nation;
};

상속관계가 성립되는 것을 이렇게 부릅니다

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

var c = new Chinese("liyatang" ,"중국");
alert(c.getName());// liyatang

이렇게 클래스 상속이 완료되었습니다. 정말 완료되었나요? Firebug를 사용하여 경고에 중단점을 설정하면 원래 Person.prototype이 수정되고 getNation 메서드가 추가된 것을 확인할 수 있습니다.

위 코드에서 Chinese.prototype = Person.prototype; 중국어를 수정하면 Person도 수정되기 때문입니다. 이는 그 자체로 용납할 수 없으며 클래스 간에 강력한 결합을 생성합니다. 이는 우리가 원하는 효과가 아닙니다.

새로운 객체를 생성하거나 인스턴스를 인스턴스화하여 결합을 약화시킬 수 있습니다.

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

//첫 번째 유형
// 중국어. 프로토타입 = new Person();
//두 번째 유형
//var F = function(){};
//F.prototype = Person.prototype;
//중국어. 프로토타입 = F.prototype;

두 가지 방법의 차이점은 무엇인가요? 두 번째 유형에서는 빈 함수 F가 추가됩니다. 이렇게 하면 부모 클래스의 인스턴스가 생성되는 것을 피할 수 있습니다. 왜냐하면 부모 클래스가 상대적으로 클 수 있고 부모 클래스의 생성자가 일부 부작용을 가지거나 많은 양의 작업을 수행하기 때문입니다. 계산. 따라서 두 번째 방법을 적극 권장합니다.

이제 끝났다, 아직은 아니다! 객체의 프로토타입 속성 아래에는 특정 객체 인스턴스를 생성하는 함수에 대한 참조를 보유하는 속성 생성자가 있습니다. 이 설명에 따르면 Chiese.prototype.constructor는 중국어와 동일해야 하지만 그렇지 않습니다.

Chesese의 프로토타입 체인을 설정할 때 Chiese.prototype을 Person.prototype으로 덮어썼다는 점을 기억하세요. 따라서 이때 Chiese.prototype.constructor는 Person입니다. 다음 코드도 추가해야 합니다

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

//공부할 필요 없습니다. 여기 if 조건에 대해 자세히 알고 계시죠? 그냥 Chinese.prototype.constructor = Chinese
if(China.prototype.constructor == Object.prototype.constructor){
Chinese.prototype.constructor = Chinese;
}

모든 코드를 다음과 같이 정리하세요

코드를 복사하세요 코드는 다음과 같습니다

var Person = function( name){
this.name = name;
};
Person.prototype = {
getName : function(){
return this.name;
}
} ;

var Chinese = function(이름, 국가){
Person.call(this, 이름);
this.nation = 국가;
};
var F = 함수(){};
F.prototype = Person.prototype;
English.prototype = F.prototype;
if(중국어.prototype.constructor == Object.prototype.constructor ){
중국어 .prototype.constructor = 중국어;
}
Chinese.prototype.getNation = function(){
           return this.nation;
};

var c = new Chinese(" liyatang","중국");
alert(c.getName());

상속된 코드를 함수에 넣어 코드 재사용을 용이하게 할 수 있다면 최종 코드는 다음과 같이 구성됩니다

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

functionextend(subClass,superClass){
var F = function(){};
F.prototype = superClass.prototype;
subClass.prototype = new F();
subClass.prototype.constructor = subClass;
subClass. superclass = superClass .prototype; //부모 클래스를 호출하기 위해 부모 클래스 자체를 가리키는 추가 속성을 추가합니다.
if(superClass.prototype.constructor == Object.prototype.constructor){
superClass .prototype.constructor = superClass;
}
}

var Person = function(name){
this.name = name;
};
Person.prototype = {
getName : function( ){
return this.name;
}
};

var Chinese = function(이름, 국가){
Person.call( this,name);
this.nation = nation;
};
extend(중국어, 사람);
Chinese.prototype.getNation = function(){
               return this.nation;
};

var c = new Chinese("liyatang","China");
alert(c.getName());

게시 후 수정:

1층 댓글 밑에 확장 기능에 대한 새로운 시각이 생겼네요. 이전에 프로토타입 체인 설정 방법을 논의할 때 두 가지 방법이 제안되었습니다

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

//첫 번째 유형
// 중국어. 프로토타입 = new Person();
//두 번째 유형
//var F = function(){};
//F.prototype = Person.prototype;
//중국어. 프로토타입 = F.prototype;

두 번째 방법을 사용하면 상위 클래스의 생성자를 호출할 필요성이 줄어들지만 중국어 클래스를 디자인할 때 Person.call(this,name)을 사용했습니다. 이 역시 상위 클래스의 생성자를 호출하는 것과 동일합니다.

그러나 첫 번째 방법을 사용하면 중국어로 Person.call(this,name);을 작성해야 하는 필요성이 줄어들 수 있습니다. 이 기능 코드를 확장에 넣을 수도 있습니다. 그냥

쓰세요

Chinese.prototype = new Person(); 또한 동일한 목적을 달성합니다. 결합이 강하지 않습니다.

그러나 잊어버린 점은 Chinese.prototype = new Person(); 이 올바르게 작성되었다는 것입니다. 대답은 '아니오'입니다! 분명히 new Person()은 name 매개변수를 전달해야 합니다. 확장 함수에서는 이 작업을 수행할 수 없으므로 중국어 클래스에서 상위 클래스의 생성자를 호출해야 합니다. 이는 객체지향적 사고와도 일맥상통합니다.

그래서 여전히 두 번째 방법을 사용하는 것이 좋습니다.

이렇게 기술적인 글을 쓰는 것은 처음입니다. 기본적으로 제 생각에 따라 개발하는 편인데, 고려되지 않은 부분과 불명확한 설명이 있을 수 있으니 양해 바랍니다. 피드백 메시지입니다. 감사합니다.