자바스크립트 코드 재사용 mode_javascript 기술에 대해 간단히 이야기해보세요.

WBOY
풀어 주다: 2016-05-16 16:17:29
원래의
1338명이 탐색했습니다.

GoF가 제안한 유명한 코드 재사용 원칙이 있습니다. 클래스 상속보다 객체 구성에 우선순위를 두는 것입니다. JavaScript에는 클래스 개념이 없으므로 코드 재사용은 클래스 상속에만 국한되지 않습니다. JavaScript에는 객체를 생성하는 방법이 많이 있으며, new를 사용하여 객체를 생성할 수 있고 객체를 동적으로 수정할 수 있습니다. JavaScript의 비클래스 상속(현대 상속 모델이라고도 함)에는 다른 객체를 사용하여 필수 객체로 결합, 객체 혼합 기술, 필수 메소드 차용 및 재사용 등 많은 재사용 방법이 있습니다.

클래스 상속 모드-기본 모드

부모와 자식 두 생성자의 예:

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

함수 상위(이름){
this.name = 이름||"아담";
}
Parent.prototype.say = {
return this.name;
};
함수 하위(이름){
}
상속(자식,부모);

다음은 재사용 가능한 상속 함수인 Inherit()의 구현 방법입니다.

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

함수 상속(C,P){
C.prototype = new P();
}

여기서 프로토타입 특성은 함수가 아닌 객체를 가리켜야 하므로 생성자 자체가 아닌 상위 생성자가 만든 인스턴스를 가리켜야 합니다.

이후 Child 객체가 생성되면 프로토타입을 통해 Parent 인스턴스에서 해당 기능을 가져옵니다.

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

var kid =new Child();
kid.say();//"아담"

상속 호출 후 프로토타입 체인:

어린이의 추가 속성 추가:

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

var kid = new Child();
kid.name = "패트릭";
kid.say();//"패트릭"

프로토타입 체인 변경 사항:

자신이 소유한 개체의 속성에서 이름을 찾을 수 있으므로 프로토타입 체인을 찾을 필요가 없습니다.

위 패턴을 사용할 때의 단점 중 하나는 두 객체의 속성, 즉 여기에 추가된 속성과 프로토타입 속성이 동시에 상속된다는 것입니다. 대부분의 경우 이러한 자체 속성은 필요하지 않습니다.

또 다른 단점은 상속() 상속을 사용할 때 하위 생성자에 매개변수 전달을 지원하지 않는다는 것입니다. 예를 들면 다음과 같습니다.

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

var s = new Child("세스");
s.say();//"아담"

이러한 결과는 예상되지 않습니다. 하위 생성자가 상위 생성자에 매개변수를 전달할 수 있지만 이 상속 메커니즘은 하위 개체가 필요할 때마다 다시 실행되어야 하며 결국 상위 개체가 재창조되었습니다.

이 글은 앞으로 JavaScript 코드 재사용 모드의 다른 모드를 계속 업데이트할 예정입니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿