JavaScript는 기본적으로 프로토타입 상속을 사용합니다. 클래스라는 개념은 없지만 해당 함수는 생성자 역할을 할 수 있습니다. this 및 new와 결합된 생성자는 Java와 유사한 클래스를 빌드할 수 있습니다. 따라서 JavaScript는 자체 확장을 통해 클래스 기반 상속을 에뮬레이트할 수 있습니다.
다른 객체 지향 언어와 마찬가지로 JavaScript는 객체 유형에 대한 참조를 사용합니다. 객체를 담고 있는 변수는 단지 주소일 뿐이고, 기본 유형 데이터는 값입니다. 프로토타입에 객체를 저장할 때 몇 가지 함정이 있을 수 있습니다.
먼저 첫 번째 예를 살펴보겠습니다.
다음과 같이 코드 코드를 복사합니다.
var 생성 = 함수() {
함수 Fn() {}
반환 함수(부모) {
Fn.prototype = 부모
새 Fn 반환
}
}()
var 부모 = {
이름: '잭',
나이: 30,
결혼 여부: 거짓
}
var 자식 = 생성(부모)
console.log(자식)
create 도구 함수는 기본 프로토타입 상속을 구현합니다. create가 호출될 때마다 새 개체는 상위 개체를 기반으로 복사됩니다. 여기서 parent에는 세 가지 속성이 있으며 모두 기본 데이터 유형인 문자열, 숫자 및 부울입니다.
이제 하위 항목을 수정하여 상위 항목에 영향을 미치는지 확인하세요.
다음과 같이 코드 코드를 복사합니다.
child.name = '백합'
아동.나이 = 20,
child.isMarried = 사실
console.log(자식)
console.log(부모)
결과는 다음과 같습니다
즉, 자식을 수정해도 부모에는 영향을 미치지 않습니다.
또 다른 예를 살펴보겠습니다
다음과 같이 코드 코드를 복사합니다.
var 생성 = 함수() {
함수 Fn() {}
반환 함수(부모) {
Fn.prototype = 부모
새 Fn 반환
}
}()
var 부모 = {
데이터: {
이름: '잭',
나이: 30,
결혼 여부: 거짓
},
언어: ['자바']
}
var 자식 = 생성(부모)
child.data.name = '백합'
child.data.age = 20
child.data.isMarried = 참
child.언어.push('자바스크립트')
console.dir(자식)
console.dir(부모)
여기에서 부모의 두 가지 속성인 데이터와 언어는 모두 참조 유형이며, 하나는 객체이고 다른 하나는 배열입니다. 자식은 여전히 부모로부터 상속을 받고 나면 결과는 다음과 같습니다.
보시다시피 이때 부모도 수정되었으며, 아이의 이름, 나이 등은 동일합니다. 이는 프로토타입 상속을 사용할 때 주의해야 할 사항입니다.
상속을 사용하는 더 좋은 방법은 다음과 같습니다.
1. 데이터 속성은 클래스 상속(이것에 매달려 있음)을 채택하므로 새로운 경우 매개변수를 통해 구성할 수도 있습니다.
2. 이 메소드는 메모리를 절약할 수 있는 프로토타입 상속을 채택합니다. 동시에 하위 클래스에 의한 메소드 재정의는 상위 클래스에 영향을 주지 않습니다.
다음은 위의 두 가지 점을 만족하는 필기 도구 기능입니다.
다음과 같이 코드 코드를 복사합니다.
/**
* @param {String} 클래스이름
* @param {문자열/함수} superCls
* @param {함수} 팩토리
*/
함수 $class(이름, superClass, 공장) {
if (superClass === '') superClass = 객체
함수clazz() {
if (typeof this.init === '함수') {
this.init.apply(this, 인수)
}
}
var p = clazz.prototype = 새로운 superCls
clazz.prototype.constructor = 클래즈
clazz.prototype.className = 클래스이름
var supr = superCls.prototype
window[className] = 클래즈
Factory.call(p, supr)
}
상위 클래스의 프로토타입에 객체 유형을 배치할 때 하위 클래스가 이를 수정할 때 주의하세요. 이 경우 상위 클래스에서 상속받은 하위 클래스의 모든 인스턴스가 수정됩니다. 그리고 이로 인해 발생하는 버그는 찾기가 매우 어렵습니다.
프로토타입 상속을 구현하기 위해 새로운 API인 Object.create가 ES5에 추가되었습니다. 다음과 같이 위의 자체 구현 생성 기능을 대체하는 데 사용할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
var 부모 = {
이름: '잭',
나이: 30,
결혼 여부: 거짓
}
var child = Object.create(부모)
console.log(자식)