C나 Java와 같은 클래스 기반 프로그래밍 언어와 달리 JavaScript의 상속은 프로토타입 기반입니다. 동시에 JavaScript는 매우 유연한 언어이기 때문에 상속을 구현하는 방법이 많이 있습니다.
첫 번째 기본 개념은 생성자와 프로토타입 체인에 대한 것입니다. 부모 개체의 생성자를 Parent라고 하고, 자식 개체의 생성자를 Child라고 하며, 해당 부모 개체와 자식 개체를 각각 parent와 child라고 합니다.
객체에 숨겨진 속성 [[prototype]](프로토타입 아님 참고)이 있습니다. Chrome에서는 __proto__이지만 일부 환경에서는 이 객체의 프로토타입을 가리킵니다. 어떤 객체의 속성이나 메소드에 접근할 때 객체의 모든 속성을 먼저 검색합니다. 발견되지 않은 경우 프로토타입 객체의 속성은 발견될 때까지 [[prototype]]에 따라 프로토타입 체인을 따라 단계별로 검색됩니다. 그렇지 않으면 정의되지 않은 상태를 반환합니다.
1. 프로토타입 체인 상속:
프로토타입 체인은 JavaScript에서 상속을 구현하는 기본 방법입니다. 자식 개체가 부모 개체를 상속받도록 하려면 가장 간단한 방법은 자식 개체 생성자의 프로토타입 특성을 부모 개체의 인스턴스를 가리키는 것입니다.
함수 부모() {}
함수 하위() {}
Child.prototype = new Parent()
현재 Child의 프로토타입 속성은 다시 작성되어 새 개체를 가리키지만 이 새 개체의 생성자 속성은 Child를 올바르게 가리키지 않습니다. JS 엔진은 이 작업을 자동으로 완료하지 않으므로 수동으로 작업을 수행해야 합니다. Child 프로토타입 객체의 생성자 속성은 Child를 다시 가리킵니다.
Child.prototype.constructor = 자식
위 내용은 재사용해야 하는 속성과 메서드를 프로토타입 객체로 마이그레이션하고 재사용할 수 없는 부분을 객체 자체 속성으로 설정하는 JavaScript의 기본 상속 메커니즘입니다. 그러나 이 상속 메서드에는 새 인스턴스가 필요합니다. 프로토타입 객체는 효율적입니다.
2. 프로토타입 상속(비프로토타입 체인):
이전 메소드에서 프로토타입 객체 인스턴스를 반복적으로 생성하는 문제를 피하기 위해 하위 객체 생성자의 프로토타입을 상위 객체 생성자의 프로토타입에 직접 가리킬 수 있습니다. 이런 방식으로 Parent의 모든 속성과 메소드는 .prototype은 동시에 재사용할 수도 있으며 프로토타입 객체 인스턴스를 반복적으로 생성할 필요가 없습니다.
Child.prototype = Parent.prototype
Child.prototype.constructor = 자식
그러나 우리는 JavaScript에서 객체가 참조 유형으로 존재한다는 것을 알고 있습니다. 이 방법은 실제로 Child.prototype과 Parent.prototype에 저장된 포인터를 동일한 객체로 가리킵니다. 따라서 자식 객체 프로토타입을 사용하려는 경우 나중에 상속을 계속하려면 부모 개체의 프로토타입도 다시 작성됩니다. 여기에는 프로토타입 개체의 인스턴스가 항상 하나만 있기 때문에 이 상속 방법의 단점이기도 합니다.
3. 임시 생성자 상속:
위 문제를 해결하려면 임시 생성자를 사용하여 중간 레이어 역할을 할 수 있습니다. 하위 객체 프로토타입에 대한 모든 작업은 임시 생성자의 인스턴스에서 완료되며 상위 객체 프로토타입에는 영향을 주지 않습니다.
var F = 함수() {}
F.prototype = Parent.prototype
Child.prototype = new F()
Child.prototype.constructor = 자식
동시에 하위 객체의 상위 클래스 프로토타입에 있는 속성에 액세스하려면 uber와 같은 하위 객체 생성자에서 상위 객체 프로토타입을 가리키는 속성을 추가하면 됩니다. child.constructor.uber를 통해 상위 프로토타입 객체에 직접 액세스할 수 있습니다.
위 작업을 함수로 캡슐화할 수 있으며, 나중에 이 함수를 호출하면 다음 상속 방법을 쉽게 구현할 수 있습니다.
함수 확장(자식, 부모) {
var F = 함수() {}
F.prototype = Parent.prototype
Child.prototype = new F()
Child.prototype.constructor = 자식
Child.uber = Parent.prototype
}
그러면 다음과 같이 호출할 수 있습니다.
연장(개, 동물)
4. 속성 복사:
이 상속 방법은 기본적으로 프로토타입 체인의 관계를 변경하지 않고 상위 프로토타입 객체의 모든 속성을 하위 객체 프로토타입에 직접 복사합니다. 물론 여기서의 복사는 기본 데이터 유형, 객체 유형에만 적용됩니다. 참조로 전달만 지원합니다.
함수 확장2(자식, 부모) {
var p = Parent.prototype
var c = Child.prototype
for (var i in p) {
c[i] = p[i]
}
c.uber = p
}
이 방법은 일부 프로토타입 속성을 재구성하는데, 이는 객체를 만들 때 효율성이 떨어지지만 프로토타입 체인 검색을 줄일 수 있습니다. 그러나 개인적으로 이 방법의 장점은 분명하지 않다고 생각합니다.
5. 객체 간 상속:
생성자 간 상속 방법 외에도 생성자 없이 객체 간 직접 상속도 가능합니다. 즉, 얕은 복사와 깊은 복사를 포함하여 객체 속성을 직접 복사합니다.
얕은 문구:
상속할 개체를 수락하고, 동시에 새로운 빈 개체를 만들고, 상속할 개체의 속성을 새 개체에 복사하고 새 개체를 반환합니다.
함수 확장복사(p) {
var c = {}
for (var i in p) {
c[i] = p[i]
}
c.uber = p
c반환
}
복사가 완료된 후 새 개체에 다시 작성해야 하는 속성을 수동으로 다시 작성할 수 있습니다.
딥 카피:
얕은 복사의 문제도 명백합니다. 객체 유형의 속성은 복사할 수 없고 참조만 전달할 수 있습니다. 이 문제를 해결하려면 깊은 복사를 사용해야 합니다. Deep Copy의 핵심은 객체 유형의 속성이 감지되면 해당 객체 또는 배열이 생성되고 기본 유형 값이 하나씩 복사됩니다.
함수 deepCopy(p, c) {
c = c || {}
for (var i in p) {
If (p.hasOwnProperty(i)) {
If (typeof p[i] === '객체') {
c[i] = Array.isArray(p[i]) [] : {}
deepCopy(p[i], c[i])
} else {
c[i] = p[i]
}
}
}
c반환
}
ES5 Array.isArray() 메서드는 매개변수가 배열인지 확인하는 데 사용됩니다. 이 메서드를 구현하지 않는 환경에서는 shim을 수동으로 캡슐화해야 합니다.
Array.isArray = 함수(p) {
배열의 p 인스턴스 반환
}
그러나 다른 프레임워크의 배열 변수는 instanceof 연산자를 사용하여 판단할 수 없지만 이러한 상황은 비교적 드뭅니다.
6. 프로토타입 상속:
상위 개체의 도움으로 생성자를 통해 상위 개체가 프로토타입한 새 개체를 만듭니다.
함수 객체(o) {
변수
함수 F() {}
F.prototype = o
n = 새로운 F()
n.uber = o
n 반환
}
여기서는 상위 객체가 하위 객체의 프로토타입으로 직접 설정됩니다. ES5의 Object.create() 메소드가 이러한 구현입니다.
7. 프로토타입 상속과 속성 복사의 혼합 사용:
프로토타입 상속 방법에서는 전달된 상위 객체를 기반으로 하위 객체가 생성됩니다. 동시에 상위 객체가 제공하는 속성 외에도 복사해야 하는 추가 객체를 전달할 수 있습니다.
function objectPlus(o, stuff) {
변수
함수 F() {}
F.prototype = o
n = 새로운 F()
n.uber = o
for (var i in stuff) {
n[i] = 물건[i]
}
n 반환
}
8. 다중 상속:
이 방법은 프로토타입 체인의 작업을 포함하지 않습니다. 속성을 복사해야 하는 여러 개체가 전달되고 모든 속성이 순서대로 복사됩니다.
함수 멀티() {
var n = {}, 물건, i = 0,
len = 인수.길이
for (i = 0; i
물건 = 인수[i]
for (물건의 var 키) {
n[i] = 물건[i]
}
}
n 반환
}
개체는 전달된 순서에 따라 순서대로 복사됩니다. 즉, 나중에 전달된 개체에 이전 개체와 동일한 속성이 포함되어 있으면 후자가 전자를 덮어씁니다.
9. 생성자 차용:
JavaScript의 call() 및 apply() 메서드는 사용하기 매우 쉽고 메서드 실행 컨텍스트를 변경하는 기능도 상속 구현에 중요한 역할을 할 수 있습니다. 소위 생성자 차용이란 자식 객체 생성자에서 부모 객체의 생성자를 빌려서 이를 운용하는 것을 말합니다.
함수 부모() {}
Parent.prototype.name = '부모'
함수 Child() {
Parent.apply(this, 인수)
}
var child = new Child()
console.log(자식.이름)
이 방법의 가장 큰 장점은 하위 개체의 생성자에서 하위 개체의 자체 속성이 완전히 재구성되고 참조 유형 변수도 참조 대신 새 값을 생성하므로 하위 개체에 대한 모든 작업은 object 부모 개체에는 영향을 주지 않습니다.
이 방법의 단점은 자식 개체를 생성하는 과정에서 new 연산자가 사용되지 않으므로 자식 개체가 부모 프로토타입 개체의 속성을 상속하지 않는다는 것입니다. 자식은 정의되지 않습니다.
이 문제를 해결하려면 하위 개체 생성자 프로토타입을 다시 상위 개체의 인스턴스로 수동으로 설정할 수 있습니다.
Child.prototype = new Parent()
그러나 이는 또 다른 문제를 야기합니다. 즉, 부모 개체의 생성자가 두 번 호출됩니다. 한 번은 부모 개체의 생성자를 빌리는 과정에서 호출되고 다른 한 번은 상속 프로토타입 프로세스에서 호출됩니다.
이 문제를 해결하려면 상위 개체의 생성자에 대한 호출을 제거해야 합니다. 생성자 차용은 생략할 수 없으므로 마지막 호출만 제거할 수 있습니다. 프로토타입 상속을 구현하는 또 다른 방법은 다음과 같습니다.
확장2(자식, 부모)
이전에 구현된 extend2() 메서드를 사용하면 됩니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
