코드 재사용 및 원리
이름에서 알 수 있듯이代码复用새 프로그램을 구축하기 위해 작성된 부분 또는 모든 코드를 재사용하는 것입니다. 코드 재사용에 대해 이야기 할 때, 우리가 가장 먼저 생각할 수있는 것은继承性입니다. 코드 재사용의 원리는 다음과 같습니다.
优先使用对象组合，而不是类继承JS에서는 클래스 개념이 없기 때문에 인스턴스의 개념은 그다지 의미가 없습니다. JS의 객체는 동적으로 생성하고 수정할 수있는 간단한 키 값 쌍입니다.
그러나 js 에서는 생성자 및 new 연산자를 사용하여 객체를 인스턴스화 할 수 있으며, 이는 클래스를 사용하는 다른 프로그래밍 언어와 구문이 유사합니다.
예를 들어:
var trigkit4 = new Person(); js 생성자 Person 호출 할 때 수업 인 것처럼 보이지만 실제로는 여전히 기능이므로 클래스를 기반으로하는 몇 가지 개발 아이디어와 상속 패턴을 제공하며, "고전적인 상속 패턴"이라고 부를 수 있습니다.
기존 상속 모델에는 class 키워드가 필요합니다. 위의 클래스 상속 모델은现代继承模式이며 클래스 방식으로 고려할 필요가없는 모델이라고 가정합니다.
고전 상속 모드
생성자 Parent() 와 Child() 의 다음 두 가지 예를 참조하십시오.
<script type="text/javascript">기능 부모 (이름) {
this.name = name || 'Allen';
}
parent.prototype.say = function () {
이 this.name;
}
기능 자식 (이름) {}
// 상속을 달성하기 위해 부모 생성자로 객체를 만들고 하위 프로토 타입에 객체를 할당합니다.
함수 상속 (c, p) {
c.prototype = new p (); // 프로토 타입 속성은 함수가 아닌 객체를 가리 려야합니다.
}
// 선언 된 상속 된 함수를 호출합니다
상속 (자녀, 부모);
</스크립트>
new Child() 문을 사용하여 객체를 생성하면 다음과 같은 프로토 타입을 통해 Parent() 인스턴스에서 기능을 얻습니다.
var kid = new Child();kid.say();//Allen프로토 타입 체인
클래스 상속 모드에서 프로토 타입 체인이 어떻게 작동하는지 논의 해 봅시다. 우리는 객체를 메모리 어딘가에 데이터와 다른 블록에 대한 참조를 포함하는 블록으로 생각합니다. new Parent() 문을 사용하여 객체가 만들어지면 아래 그림 왼쪽에있는 이와 같은 블록이 생성됩니다. 이 블록은 name 속성을 저장합니다. say() 메소드에 액세스하려면 생성자 Parent() 의 prototype 속성을 가리키면 오른쪽의 Parent.prototype __proto__ 액세스 할 수 있습니다.
그렇다면 var kid = new Child() 로 새 개체를 만들 때 어떻게됩니까? 아래 그림과 같이 :
new Child() 문을 사용하여 생성 된 객체는 암시 적 링크 __proto__ 제외하고는 거의 비어 있습니다. 이 경우 __proto__ inherit() 함수에서 new Parent() 문을 사용하여 생성 된 개체를 가리 킵니다.
kid.say() 실행할 때 왼쪽 하단 코너의 블록 객체에는 say() 메소드가 없으므로 프로토 타입 체인을 통해 중간 블록 객체를 쿼리합니다. 그러나 중간 블록 객체에는 또한 say() 메소드가 없으므로 프로토 타입 체인을 따라 가장 오른쪽 블록 객체를 쿼리하고 객체에는 say() 메소드가 있습니다. 완성 되었습니까?
실행은 여기서 완료되지 않았습니다. this.name say() 메소드에서 참조되어 있으며, 이는 생성자가 만든 객체를 가리 킵니다. 여기에서는 new Child() 블록을 가리 킵니다. 그러나 new Child() 에는 name 속성이 없습니다. 이러한 이유로 중간 블록이 쿼리되고 중간 블록에는 name 속성이 있습니다. 이 시점에서 프로토 타입 체인의 쿼리가 완료되었습니다.
자세한 내용은 내 기사를 확인하십시오 : JavaScript Learning Notes (v) 프로토 타입 및 프로토 타입 체인에 대한 자세한 설명
공유 프로토 타입
이 패턴의 규칙은 재사용 가능한 멤버가 이것에 배치하기보다는 프로토 타입으로 전송되어야한다는 것입니다. 따라서 상속의 목적을 위해 상속 가치가있는 것은 프로토 타입에서 구현되어야합니다. 따라서 하위 개체의 프로토 타입과 부모 객체의 프로토 타입을 아래 예와 동일하게 설정할 수 있습니다.
function inherit(C,P){C. prototype = p.prototype;
}
Child Object와 Parent Object는 동일한 프로토 타입을 공유하며 say() 메소드에 동일하게 액세스 할 수 있습니다. 그러나 Child Object는 name 속성을 상속하지 않습니다.
프로토 타입 상속
프로토 타입 상속은 "현대적인"클래스가없는 상속 모델입니다. 다음 예를 참조하십시오.
<script type="text/javascript">// 상속 될 객체
var 부모 = {
이름 : "Jack"// 여기에 세미콜론이 없습니다
};
//新对象var child = 객체 (부모);
alert(child.name);//Jack</스크립트>
프로토 타입 모드에서는 객체 리터럴을 사용하여 부모 객체를 만들 필요가 없습니다. 다음 코드에 표시된대로 생성자를 사용하여 부모 객체를 만들 수 있습니다. 그렇게함으로써 자체 특성과 생성자 프로토 타입의 특성이 상속됩니다.
<script type="text/javascript">// 상위 생성자
기능인 () {
this.name = "trigkit4";
}
// 프로토 타입 속성에 추가합니다
person.prototype.getName = function () {
이 this.name;
};
// 새 사람 클래스 객체를 만듭니다
var obj = 새로운 사람 ();
// 상속
var kid = 객체 (obj);
alert (kid.getName ()); // trigkit4
</스크립트>
이 모드에서는 기존 생성자에 존재하는 프로토 타입 객체 만 상속받을 수 있습니다. 다음 예에서 볼 수 있듯이 부모 객체가 어떻게 생성되는지에 관계없이 물체가 물체에서 상속됩니다.
<script type="text/javascript">// 상위 생성자
기능인 () {
this.name = "trigkit4";
}
// 프로토 타입 속성에 추가합니다
person.prototype.getName = function () {
이 this.name;
};
// 새 사람 클래스 객체를 만듭니다
var obj = 새로운 사람 ();
// 상속
var kid = 객체 (person.prototype);
Console.log (typeof kid.getName); // 함수는 프로토 타입에 있기 때문입니다
console.log (chid.name 타입); // 정의되지 않은이 프로토 타입 만 상속되기 때문에 정의되지 않았습니다
</스크립트>