OOP_javascript 기술 구현을 위한 javascript 프로토타입 모드 재연구

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

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

function A()
{
this.v1 = 10; 🎜>}
A.prototype.print = function()
{
alert(this.v1)
}
function B()
{
}
B.prototype = new A();
new B().print();

이 코드를 실행하면 출력이 10이 됩니다. 클래스 B는 print 메소드를 상속받은 것 같습니다. 클래스 A가 올바른 출력을 생성하는 경우 실제 실행 프로세스는 클래스 B에서 생성된 개체에 있습니다. print 메서드를 직접 얻을 수 없으므로 해당 메서드를 프로토타입 속성에서 찾을 수 있는 경우 이 솔루션의 시작점은 매우 좋습니다. 클래스가 클래스 B에 있으면 클래스 B가 호출됩니다. 그렇지 않으면 해당 프로토타입 속성(클래스 A)에서 동일한 이름의 메서드를 호출합니다. 그러나 때로는 동일한 이름을 가진 상위 클래스의 메소드를 호출하기 위해 하위 클래스의 메소드가 필요할 수도 있습니다. 예를 들어 클래스 B가

으로 변경됩니다. 🎜> 코드는 다음과 같습니다.

function B()

{
this.v2 = 15
}
B.prototype; = new A();
B.prototype.print = function()
{
this.prototype.print.call(this)
alert(this.v2);
new B().print();


그 중 this.prototype.print는 클래스 A에 해당하는 인쇄 메소드입니다. 출력은 10과 15로 문제를 해결한 것으로 보입니다. 실제로는 그렇지 않습니다.

코드 복사 코드는 다음과 같습니다. 함수 C()

{

this.v3 = 20;
}
C.prototype = new B()
C.prototype.print = function( )
{
this.prototype.print.call(this);
alert(this.v3)
}
new C().print(); >
우리가 예상하는 출력은 10, 15, 20이지만 안타깝게도 이렇게 작성한 결과는 시스템이 무한 루프에 빠지게 됩니다
왜냐하면 이 메서드를 실행할 때

코드 복사

코드는 다음과 같습니다.C.prototype.print = function() { this.prototype.print.call(this);

alert(this.v3);

}


스택이 오버플로될 때까지 다음 메서드가 호출됩니다.

코드 복사

코드는 다음과 같습니다.B.prototype.print = function() { this.prototype.print.call(this);

alert(this.v2)

}


이제 올바른 작성 방법은
이 됩니다.

코드 복사

코드는 다음과 같습니다.B.prototype .print = function() { A.prototype.print.call(this);

alert(this.v3)

}
C.prototype.print = function()
{
B. 프로토타입.print.call(this);
alert(this.v3);
}


그러나 상속 관계가 변경되면 상위 클래스에 대한 꽤 많은 참조를 변경해야 합니다. 이는 최선의 접근 방식이 아닙니다. 실제 응용 프로그램에서는 _super를 사용하여 상위 클래스의 이름을 바꾸고, _this를 사용하여 자체 이름을 바꾼 다음 표준 메서드를 사용하여 [super].prototype 또는 [this로 대체합니다. ].prototype, 지정된 메소드가 모호함 없이 호출되도록 합니다. 이것이 JavaScript의 OOP에 대한 실제 솔루션입니다. 관련 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다./* OOP 상속 시스템을 사용할 경우 먼저 클래스를 정의하고 마지막으로 extendsOf를 실행합니다. 클래스를 초기화하고 _super를 사용하여 참조합니다. 예를 들어 상위 클래스는 _this를 사용하여 자체 메서드인 을 참조합니다. 예:

function Extend2()

{
_super()
Extend2.prototype. setValue = function(value)
{
_super.setValue(value);
alert("Extend2:" value)
}
Extend2.extendsOf(Extend1); 🎜>
클래스 상속 트리의 루트는 Object입니다. 참고: escape를 사용하는 모든 멤버 함수는 extendsOf 메서드가 호출되기 전에 정의되어야 합니다.
객체는 밑줄로 시작하는 자동 실행 초기화 코드를 설정할 수 있습니다. 이름은
Object._Object = function() {...}과 같이 개체의 이름이 동일합니다.
개체의 초기화 코드가 존재하지 않는 경우 상위 개체의 초기화 코드는 다음과 같습니다. 모든 검색이 완료될 때까지 자동 검색

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

기능. FRBlock = / *("([^"^\]|\" )*"|'([^'^\]|\')*'|/([^/^\]|\.)*/) */;
Function.FRSpace = /s /g;
Function.FRSign = / ?(^|;|:|<|>|?|,|.|/|{|}| |]|-| |=|(|)|*|^| %||) ?/g;
Function.FRRefer = /_(super|this)(.[^(] )?(([^ )]*))/;
Function.prototype.FCompile = function(name)
{
//name 매개변수가 클래스의 생성자인지 아니면 클래스의 속성인지 확인합니다. 비어 있으면 생성자임을 의미합니다.
if (name)
{
//클래스의 경우 속성이 하위 클래스에 직접 값을 할당하고 종료합니다.
if (typeof this.prototype[name] != "함수")
{
window[this.FClassName].prototype[name] = this .prototype[name]
return; var s = this.prototype[name].toString();
}
else
{
var s = this.toString()
}
var b = "" ;
var r;//공백 문자 필터링
while (r = Function.FRBlock.exec(s))
{
s = RegExp.rightContext
b = RegExp .leftContext.replace(Function.FRSpace, " ").replace(Function.FRSign, "$1") r[1];
}
b = s.replace(Function.FRSpace, " ").replace (Function.FRSign, "$1");
var i = b.indexOf("(");
var j = b .indexOf(")",
if (!name)
{
this.FClassName = b.substring(9, i);
}
var cn = this.FClassName
var arg = b.substring(i 1, j);
s = b.substring(j 2, b.length - 1);
b = ""
// 호출 탈출을 수행하고 _super,_this를 지정된 메소드로 대체합니다.
n = 0; r = Function.FRRefer.exec(s); n )
{
if (r[2 ])
{
if (!name && !n)
{
b = this.FSuperClass.FClassName ".apply(this,arguments);";
}
r [2] = ".prototype" r[2]
}
else if (r[1] == "this")
{
//JS 함수는 매개변수의 차이를 구분하지 않습니다. 생성자는 자신을 재귀적으로 호출할 수 없습니다.
throw "생성자 호출은 "_this();" 생성자";
}
else if (name || RegExp.leftContext)
{
throw "생성자 호출은 생성자의 첫 번째 문이어야 합니다.";
}
else
{
r[2] = "";
}
s = RegExp .rightContext
b = RegExp.leftContext (r[1] == "this" ? cn : this.FSuperClass.FClassName) r[2] (r[3] ? ".call(this," r[3 ] ")" : ".apply(this,arguments)"); >}
if (n)
{
b = s
}
else if (이름)
{
//_this, _super에 대한 호출이 없습니다. 컴파일할 필요 없음
window[cn].prototype[name] = this.prototype[name];
return
}
else
{
//없을 때 상위 클래스 생성자를 호출하면 자동으로
b = this.FSuperClass.FClassName ".apply(this,arguments);"
}
//컴파일 결과 할당
if (name)
{
eval(cn ".prototype." name "=function(" arg "){" b "}")
}
else
{
eval(cn "=function(" arg "){" b ";if(this.constructor==" cn ")" cn "._" cn ".apply( this,arguments);}")
window[cn ].FClassName = cn;
}
}
Function.prototype.extendsOf = function(superClass)
{
this .FSuperClass = superClass;// class
this.FCompile();
for(this.prototype의 var 이름)
{
this.FCompile(name)
}
var clazz = window[this. FClassName];
clazz.FSuperClass = superClass; //하위 클래스에 의해 구현되지 않은 상위 ​​클래스의 함수 및 속성 복사
var 프로토타입 = clazz .prototype; superClass.prototype)
{
if (!prototype[name])
{
prototype[name] = superClass.prototype[name];
}
//Object._Object 형식의 초기화 메서드 복사
for (var c = this; ; c = c.FSuperClass)
{
if (c[" _" c.FClassName])
{
clazz["_" clazz.FClassName] = c["_" c.FClassName]
return;
}
}
}
/*
OOP용 내장 Object 클래스에서 제공되는 지원
*/
Object.FClassName = "Object"
Object._Object = Function.Instance
Object.prototype .instanceOf = function (clazz)
{
for (var c = this.constructor; c; c = c.FSuperClass)
{
if (c === clazz)
{
return true;
}
}
false 반환
}