JS 상속의 개념
JS에서 일반적으로 사용되는 다음 두 가지 상속 방법 :
프로토 타입 체인 상속 (객체 간 상속)
고전 상속 (생성자 간의 상속)
JS는 Java와 같은 진정한 객체 지향 언어가 아니기 때문에 JS는 객체 기반이며 클래스 개념이 없습니다. 따라서 상속을 구현하려면 JS의 프로토 타입 프로토 타입 메커니즘을 사용하거나 적용 및 호출 방법을 사용하여 구현할 수 있습니다.
객체 지향 언어로 클래스를 사용하여 사용자 정의 객체를 만듭니다. 그러나 JS의 모든 것이 객체이므로 사용자 정의 객체를 만드는 데 어떤 방법을 사용할 수 있습니까? JS 프로토 타입이 필요합니다.
우리는 단순히 프로토 타입을 템플릿으로 간주 할 수 있습니다. 새로 생성 된 사용자 정의 객체는이 템플릿 (프로토 타입)의 사본입니다 (실제로는 사본이 아니라 링크이지만이 종류의 링크는 보이지 않습니다. 새로 인스턴스화 된 개체 내부에는 보이지 않는 __proto__ 포인터가 있으며 프로토 타입 객체를 가리 킵니다).
JS는 생성자와 프로토 타입을 통해 클래스의 기능을 시뮬레이션하고 구현할 수 있습니다. 또한, JS 유형 상속의 구현은 프로토 타입 체인에 의존함으로써 달성된다.
프로토 타입 상속 및 클래스 상속
고전적인 상속은 하위 유형 생성자 내부의 슈퍼 유형 생성자의 호출입니다.
엄격한 클래스 상속은 그다지 일반적이지 않으며 일반적으로 조합으로 사용됩니다.
코드 사본은 다음과 같습니다.
함수 super () {
this.colors = [ "빨간색", "파란색"];
}
함수 sub () {
Super.call (this);
}
프로토 타입 상속은 기존 객체의 도움을 받아 새 객체를 만들고 서브 클래스의 프로토 타입을 부모 클래스의 프로토 타입 체인을 추가하는 것과 같습니다.
프로토 타입 체인 상속
아동 클래스가 부모 클래스 (메서드 포함)의 속성을 물려 받으려면 먼저 생성자가 정의해야합니다. 그런 다음 부모 클래스의 새 인스턴스를 생성자의 프로토 타입에 할당하십시오. 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
<cript>
기능 부모 () {
this.name = 'Mike';
}
기능 child () {
this.age = 12;
}
child.prototype = new Parent (); // child는 부모를 상속하고 프로토 타입을 통해 체인을 형성합니다.
var test = new Child ();
경고 (test.age);
alert (test.name); // 상속 된 속성을 얻습니다
// 프로토 타입 체인을 계속 상속합니다
기능 형제 () {// Brother Construct
this.weight = 60;
}
brother.prototype = new child (); // 프로토 타입 체인 상속을 계속하십시오
var brother = 새로운 형제 ();
Alert (brother.name); // 부모와 자녀를 상속받은 Mike가 팝업됩니다
경고 (brother.age); // 팝 12
</스크립트>
위의 프로토 타입 체인 상속은 여전히 하나의 링크, 즉 객체, 모든 생성자가 물체에서 상속됩니다. 상속 객체는 자동으로 완료되며 스스로 수동 상속이 필요하지 않습니다. 그렇다면 그들의 하위 관계는 무엇입니까?
프로토 타입과 인스턴스의 관계를 결정하십시오
프로토 타입과 인스턴스의 관계를 결정하는 두 가지 방법이 있습니다. 연산자 instanceof 및 isprototype () 메소드 :
코드 사본은 다음과 같습니다.
경고 (객체의 형제 인스턴스) // true
경고 (형제의 테스트 인스턴스); // 거짓, 테스트는 형제의 슈퍼 클래스입니다
경고 (자식의 형제 인스턴스); // true
경고 (부모의 형제 인스턴스); // true
프로토 타입 체인에 나타나는 프로토 타입 인 한, 프로토 타입 체인에서 파생 된 인스턴스의 프로토 타입이라고 할 수 있습니다. 따라서 isprototype () 메소드도 True를 반환합니다.
JS에서 상속 된 함수를 슈퍼 형 (부모 클래스, 기본 클래스 및 또한)이라고하며 상속 기능을 하위 유형 (서브 클래스, 파생 클래스)이라고합니다. 프로토 타입 상속을 사용하면 주로 두 가지 문제가 필요합니다.
먼저, 프로토 타입의 문자 적 다시 쓰기는 관계를 중단하고, 참조 유형의 프로토 타입을 사용하며, 하위 유형은 매개 변수를 슈퍼 유형으로 전달할 수 없습니다.
의사 급은 참조 공유 문제를 해결하고 슈퍼 타입은 인수를 전달할 수 없습니다. "빌린 생성자"기술을 사용할 수 있습니다.
빌린 생성자 (고전 상속)
코드 사본은 다음과 같습니다.
<cript>
기능 부모 (Age) {
this.name = [ 'Mike', 'Jack', 'Smith'];
this.age = age;
}
기능 아동 (나이) {
parent.call (이, 나이);
}
var test = 새로운 아동 (21);
경고 (test.age); // 21
Alert (Test.Name); // Mike, Jack, Smith
test.name.push ( 'bill');
Alert (Test.Name); // Mike, Jack, Smith, Bill
</스크립트>
빌린 생성자는 프로토 타입없이 지금 두 가지 문제를 해결했지만 재사용 할 방법은 없으므로 프로토 타입 체인 + 빌린 생성자 패턴이 필요합니다. 이 패턴을 조합 상속이라고합니다.
조합 상속
코드 사본은 다음과 같습니다.
<cript>
기능 부모 (Age) {
this.name = [ 'Mike', 'Jack', 'Smith'];
this.age = age;
}
parent.prototype.run = function () {
return.name + '는 둘 다' + this.age;
};
기능 아동 (나이) {
parent.call (this, age); // 객체는 매개 변수를 슈퍼 타입으로 가장합니다
}
child.prototype = new Parent (); // 프로토 타입 체인 상속
var test = new Child (21); // 새로운 부모 (21)를 쓰는 것은 괜찮습니다
Alert (test.run ()); // Mike, Jack, Smith는 모두 21입니다
</스크립트>
조합 상속은 비교적 일반적으로 사용되는 상속 방법입니다. 그 뒤에 아이디어는 프로토 타입 체인을 사용하여 프로토 타입 특성 및 방법의 상속을 구현하고 생성자를 빌려서 인스턴스 특성의 상속을 구현하는 것입니다. 이러한 방식으로, 기능 멀티플렉싱은 프로토 타입에서 메소드를 정의하고 각 인스턴스에 자체 특성을 갖도록함으로써 달성된다.
Call ()의 사용 : 객체의 메소드를 호출하고 현재 객체를 다른 객체로 바꾸십시오.
코드 사본은 다음과 같습니다.
콜 ([thisobj [, arg1 [, arg2 [, .Argn]]]])))
프로토 타입 상속
사용자 정의 유형을 생성하지 않고 기존 객체를 기반으로 새로운 객체 생성을 상속하는이 방법은 프로토 타입 상속이라고합니다.
코드 사본은 다음과 같습니다.
<cript>
기능 obj (o) {
함수 f () {}
F. 프로토 타입 = O;
새로운 f ()를 반환합니다.
}
var box = {
이름 : 'Trigkit4',
ARR : [형제 ','자매 ','바바 ']
};
var b1 = obj (box);
경고 (b1.name); // trigkit4
b1.name = 'Mike';
경고 (b1.name); // Mike
경고 (b1.arr); // 형제, 자매, 바바
b1.arr.push ( '부모');
경고 (b1.arr); // 형제, 자매, 바바, 부모
var b2 = obj (box);
경고 (b2.name); // trigkit4
경고 (b2.arr); // 형제, 자매, 바바, 부모
</스크립트>
프로토 타입 상속은 먼저 OBJ () 함수 내부에 임시 생성자를 생성 한 다음 전달 된 객체를 생성자의 프로토 타입으로 사용하고 마지막 으로이 임시 유형의 새 인스턴스를 반환합니다.
기생 상속
이 상속 방법은 프로토 타입 + 공장 모델을 캡슐화 생성 프로세스를 목적으로 결합합니다.
코드 사본은 다음과 같습니다.
<cript>
함수 생성 (o) {
var f = obj (O);
f.run = function () {
reture this.arr; // 마찬가지로 참조가 공유됩니다
};
반환 f;
}
</스크립트>
조합 상속의 작은 문제
조합 상속은 JS에서 가장 일반적으로 사용되는 상속 모드이지만, 결합 된 상속의 슈퍼 형은 사용하는 동안 두 번 호출됩니다. 한 번은 하위 유형을 만들 때이고 다른 하나는 하위 유형 생성자 안에 있습니다.
코드 사본은 다음과 같습니다.
<cript>
기능 부모 (이름) {
this.name = 이름;
this.arr = [ 'brother', 'sister', '부모'];
}
parent.prototype.run = function () {
이 this.name;
};
기능 어린이 (이름, 나이) {
parent.call (this, age); // 두 번째 호출
this.age = age;
}
child.prototype = new Parent (); // 첫 번째 호출
</스크립트>
위의 코드는 이전 조합 상속이므로 기생 조합 상속은 두 호출의 문제를 해결합니다.
기생 조합 상속
코드 사본은 다음과 같습니다.
<cript>
기능 obj (o) {
함수 f () {}
F. 프로토 타입 = O;
새로운 f ()를 반환합니다.
}
함수 생성 (부모, 테스트) {
var f = obj (parent.prototype); // 객체를 만듭니다
f.constructor = test; // 향상된 객체
}
기능 부모 (이름) {
this.name = 이름;
this.arr = [ 'brother', 'sister', '부모'];
}
parent.prototype.run = function () {
이 this.name;
};
기능 어린이 (이름, 나이) {
parent.call (this, name);
this.age = age;
}
상속 프로로 타입 (부모, 자식); // 상속은 여기를 통해 실현됩니다
var test = new Child ( 'trigkit4', 21);
test.arr.push ( 'Nephew');
경고 (test.arr); //
alert (test.run ()); // 메소드 만 공유됩니다
var test2 = 새로운 어린이 ( 'Jack', 22);
ALERT (test2.arr); // 인용 문제를 해결하십시오
</스크립트>
전화하고 신청하십시오
글로벌 기능이 적용되며 호출을 사용하여 다음과 같이 기능에서 이것의 포인팅을 변경할 수 있습니다.
코드 사본은 다음과 같습니다.
// 글로벌 기능을 정의합니다
함수 foo () {
Console.log (this.fruit);
}
// 글로벌 변수를 정의합니다
var fruit = "Apple";
// 객체를 사용자 정의합니다
var pack = {
과일 : "오렌지"
};
// window.foo ()에 해당합니다.
foo.apply (창); // "Apple", 이것은 창과 같습니다
// this === FOO를 포장합니다
foo.apply (팩); // "주황색"