상속_javascript 기술을 구현하는 JavaScript 시뮬레이션 방법-JS 튜토리얼-php.cn

상속_javascript 기술을 구현하는 JavaScript 시뮬레이션 방법

WBOY

풀어 주다： 2016-05-16 16:06:56

원래의

1208명이 탐색했습니다.

이 기사의 예에서는 상속을 구현하기 위한 JavaScript 시뮬레이션 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

우리 모두는 JavaScript가 OO에서만 "클래스"를 시뮬레이션하고 구현할 수 있다는 것을 알고 있습니다. 이는 JavaScript에서 클래스 상속이 없음을 의미합니다. 원본 객체에 속성을 추가하거나 다시 작성해야만 구현을 시뮬레이션할 수 있습니다.

먼저 상위 클래스를 정의합니다.

//父类
function ParentClass() {
 this.className = "ParentClass";
 this.auth = "Auth";
 this.version = "V1.0";
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}

로그인 후 복사

1. 프로토타입 구현:

//子类
//1、prototype继承
function ChildClassByPrototype() {
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByPrototype.prototype = new ParentClass();
var cctest1 = new ChildClassByPrototype();
cctest1.parentClassInfo();
cctest1.classInfo();

로그인 후 복사

이 방법은 매우 간단합니다. 상위 클래스의 인스턴스를 하위 클래스의 프로토타입 속성에 할당하면 하위 클래스가 아버지의 메소드와 속성을 사용할 수 있습니다. 여기서는 실제로 이 예제의 cctest1.parentClassInfo() 메서드와 같이 프로토타입 체인에서 위쪽으로 검색하는 기능을 사용합니다. JavaScript는 먼저 ChildClassByPrototype 인스턴스에서 parentClassInfo() 메서드를 검색합니다. 이므로 ChildClassByPrototype 속성을 계속 검색하고 해당 프로토타입 속성의 값이 parentClassInfo() 메서드가 있는 ParentClass의 인스턴스이므로 검색이 종료되고 호출이 성공합니다.

2. 구현 적용:

//2、apply继承
function ChildClassByApply() {
 ParentClass.apply(this, new Array());
 //ParentClass.apply(this, []);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}

로그인 후 복사

JavaScript에서 Apply는 메소드 B를 메소드 A로 바꾸는 것으로 이해될 수 있습니다. 첫 번째 매개변수는 메소드 B 자체의 객체이고, 두 번째 매개변수는 배열에 필요한 매개변수입니다. 메소드 A. List로 전달되며, 매개변수가 비어 있는 경우, 즉 매개변수가 전달되지 않은 경우 new Array(), []를 통해 전달할 수 있습니다.

3. 호출 프로토타입 구현:

//3、call+prototype继承
function ChildClassByCall() {
 ParentClass.call(this, arguments);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();

로그인 후 복사

호출과 적용은 비슷한 기능을 가지고 있습니다. 즉, 둘 다 메소드 B를 메소드 A로 대체하지만 전달된 매개변수는 다릅니다. 호출 메소드의 첫 번째 매개변수는 메소드 B 자체의 객체이며 후속 매개변수는 필요하지 않습니다. Array로 감싸서 순차적으로 직접 전달해야 합니다. 기능은 거의 같은데 왜 프로토타입 할당이라는 문장을 추가하는 걸까요? 이는 호출 메소드가 메소드 대체만 구현하고 객체 속성을 복사하지 않기 때문입니다.

각 메소드에는 적용 가능한 환경이 있습니다. 예를 들어 상위 클래스에 매개변수화된 생성자가 있는 경우:

function ParentClass(className, auth, version) {
 this.className = className;
 this.auth = auth;
 this.version = version;
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}

로그인 후 복사

이 경우 프로토타입은 적용되지 않으며, 신청 또는 전화를 이용하시면 됩니다.

function ChildClassByApply(className, auth, version) {
 ParentClass.apply(this, [className, auth, version]);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
function ChildClassByCall(className, auth, version) {
 ParentClass.call(this, arguments[0], arguments[1], arguments[2]);
 //ParentClass.call(this, className, auth, version);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();

로그인 후 복사

인스턴스화:

var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0");
var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");

로그인 후 복사

신청과 전화 중 선택하는 방법은 무엇인가요? OO 상속에서는 하위 클래스가 상위 클래스로부터 상속을 받으므로 상위 클래스의 유형이기도 합니다. 즉, ChildClassByCall과 ChildClassByApply도 ParentClass 유형이어야 하지만, 이를 감지하기 위해 "instanceof"를 사용하면 Apply를 통해 상속된 하위 클래스가 ParentClass 유형이 아님을 알 수 있습니다. 따라서 호출 프로토타입을 사용하여 상속을 시뮬레이션하는 것이 좋습니다. Google Map API의 상속에서도 이 방법을 사용한다고 합니다.

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