javascript가 상속되는 방법 소개_javascript 기술

첫 번째 단계:

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

함수 A(){
this.funB = function(){
alert('A:funB');
}
}
A.prototype = {
funA:function(){
Alert('A:funA');
}
};
function B(){
}
function extend(sub,parent){
sub.prototype = 새로운 부모();
sub.prototype.constructor = sub;
}
extend(B,A)
var b = new B(); // out 'A:funA'
b.funB(); // out 'A:funB'
alert(b instanceof A); // out "true"

다들 한 눈에 무슨 뜻인지 아실 거라 생각합니다. 먼저 A, B라는 두 클래스를 정의한 뒤, B가 클래스 A를 상속받도록 하기 위해 확장 메소드를 사용합니다. 확장의 원칙은 상위 클래스를 하위 클래스의 프로토타입에 새로 추가하는 것입니다.
instanceof를 사용하여 감지하는 것도 사실입니다. 인스턴스가 true가 되려면 두 클래스의 프로토타입 객체가 간접적이든 직접적이든 동일한 객체여야 합니다.
이 접근 방식에 문제가 있나요? 일반적인 객체 지향 언어에서는 하위 클래스가 상위 클래스를 상속할 때 상위 클래스 생성자의 실행이 트리거되지 않지만 여기서는 상속 시 상위 클래스가 실행됩니다.
두 번째 단계

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

함수 A( ){
this.Astr = 'hello A';
}
A.prototype = {
funA:function(){
alert(this.Astr)
}
};
함수 B(){
arguments.callee.superclass &&args.callee.superclass.apply(this,arguments)
this.Bstr = 'hello B';
B.prototype = {
funB:function(){
alert(this.Bstr)
}
}
function C(){
arguments.callee .superclass && 인수.callee.superclass.apply(this,arguments);
alert(this.Astr)
alert(this.Bstr)
}
function extend(sub,parent) {
var subproto = sub.prototype;
sub.prototype = parent.prototype;
typeof subproto != 'object' && (subproto = {}); object' && (sub.prototype = {});
for(var i in subproto){
sub.prototype[i] = subproto[i]
sub.superclass = parent ;
}
//B는 A를 상속합니다
extend(B,A);
//C는 B를 상속합니다
extend(C,B)
var c = new C( ); // '안녕 A','안녕 B'
c.funA(); // '안녕 A'
c.funB() // '안녕 B'
경고 (c 인스턴스of A) // out true
alert(c instanceof B) // out true;


여기서 각 하위 클래스의 확장 메서드에 일부 변경이 적용되었습니다. 상위 클래스의 속성은 상속받은 상위 클래스를 참조하는 데 사용됩니다. 빈 함수 proto는 상위 클래스의 프로토타입을 가져오고 하위 클래스의 프로토타입으로 인스턴스화되므로 상위 클래스 생성자가 실행되지 않습니다.
대신 하위 클래스 생성자의 코드를 사용하여 상위 클래스의 합의된 생성자를 실행하세요.

코드 복사

코드는 다음과 같습니다. arguments.callee.superclass &&args.callee .superclass.apply(this,argumengs);

클래스 상속이 완료됩니다.
위 코드에 대한 상속을 작성하는 더 편리한 방법이 있나요? 함수의 프로토타입을 수정하고 다음을 확인하세요.

코드 복사

코드는 다음과 같습니다. Function.prototype.extend = function(parent){ var subproto = this.prototype;

this.prototype = parent.prototype; 🎜>typeof subproto ! = 'object' && (subproto = {})

typeof this.prototype != 'object' && (this.prototype = {})
for(var i in subproto)
this.prototo[i];
this.superclass = parent
return this
}
function A(){
.Astr = '안녕 A';
A.prototype = {
funA:function(){
alert(this.Astr)
}
}; >var B = function (){
arguments.callee.superclass &&args.callee.superclass.apply(this,arguments)
this.Bstr = 'hello B'
}
B; .prototype = {
funB:function(){
alert(this.Astr)
}
}
B.extend(A)
var C = function( ){
인수.callee.superclass && 인수.callee.superclass.apply(this,arguments)
alert(this.Astr)
alert(this.Bstr)
}.extend (B);
var c = new C(); // '안녕 A','안녕 B'
c.funA() //'안녕 A'
c.funB( ); // '안녕하세요 B'
alert(c 인스턴스 오브 A) // 아웃 true
alert(c 인스턴스of B) // 아웃


여기에서 확장하는 작업은 다음과 같습니다. subproto는 하위 클래스의 원래 프로토타입을 참조하고 하위 클래스의 프로토타입을 상위 클래스의 프로토타입 객체에 지정하여 상위 클래스를 상속합니다(이의 목적은 인스턴스를 만드는 것입니다). 하위 클래스의 상위 클래스는 true). 그런 다음 하위 프로토타입을 탐색하고 원래 프로토타입의 멤버를 현재 프로토타입에 추가하여 동일한 이름을 가진 하위 클래스의 멤버가 상위 클래스의 멤버를 덮어쓰도록 합니다. 마지막으로 하위 클래스의 속성 슈퍼클래스를 상위 클래스로 지정합니다.
js 상속의 핵심은 프로토타입 체인의 고유성을 유지하는 것입니다. 인스턴스의 __proto__가 상위 클래스의 프로토타입과 동일한지 여부를 결정합니다.

저자 cnblogs OD.