JavaScript를 상속하는 몇 가지 방법
3501 단어 JavaScript계승
구조 계승, 원형 체인 계승, 구조 계승 + 원형 체인 계승 조합 계승, 그리고 조합 계승에서 파생된 계승 방식.
구조 계승 (call을 빌려 실현)
실현
function Super(age){
this.age = age;
this.say = function(){
console.log(this.age)
}
}
function Child(name,age){
Super.call(this,age)
this.name = name;
}
var child = new Child("min",23)
console.log(child instanceof Super); // false
console.log(child instanceof Child); // true
이점(1) 다중 계승 가능(call 여러 상위 대상)
(2) 구조 함수에서 부모 레벨로 매개 변수 전달
결점
(1) 부류 실례의 속성과 방법만 계승할 수 있고 원형의 속성과 방법은 계승할 수 없다
(2) 인스턴스는 상위 클래스의 인스턴스가 아니라 하위 클래스의 인스턴스입니다.
원형 체인 계승 (원형 체인을 빌려 실현)
실현
function Super(){
this.getName = function(){
console.log(this.name)
}
}
function Child(name){
this.name = name;
}
Child.prototype = new Super(); //
Child.prototype.constructor = Child;
var child = new Child("min");
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child
이점(1) 상위 클래스의 원형 속성과 방법, 하위 클래스에 접근할 수 있음
(2) 인스턴스는 하위 클래스의 인스턴스이자 상위 클래스의 인스턴스입니다.
결점
(1) 다중 계승을 실현할 수 없음 (2) 하위 클래스 실례를 만들 때 상위 구조 함수에 전참할 수 없음
조합 계승 (구조 계승 + 원형 체인 계승)
실현
function Super(age){
this.age = age;
this.getAge = function(){
console.log(this.age);
}
}
function Child(name,age){
Super.call(this,age)
this.name = name;
}
Child.prototype = new Super(1);
Child.prototype.constructor = Child;
var child = new Child("min",23);
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child
이점(1) 구조+원형 체인 계승의 장점 결합
결점
(1) Child.prototype = new Super(); 한 번 더 호출해서 원형 대상에 불필요한 속성이 존재하게 했습니다. 예를 들어 위의 예에서age 속성
기생 조합 계승
실현
function Super(age){
this.age = age;
this.getAge = function(){
console.log(this.age)
}
}
function Child(name,age){
Super.call(this,age)
this.name = name;
}
(function(){
function Copy(){}
Copy.prototype = Super.prototype;
Child.prototype = new Copy();
})()
Child.prototype.constructor = Child;
var child = new Child("min",23);
비고물음: 왜 직접 Child를 사용하지 않았습니까?prototype = Super.prototype;
답: 어린이.prototype.constructor = Child;핵심 코드, 위에 Super라고 쓰여 있습니다.prototype도 변경됩니다. (같은 주소를 가리키는 인용 형식)
이점
(1) 이것은 계승을 실현하는 가장 완벽한 방안이어야 한다.es6의 extends 키워드는babel 변환 후 코드도 이런 방식으로 계승된다.
추가: 지원(Object.create)
실현
function Super(age){
this.age = age;
this.getAge = function(){
console.log(this.age)
}
}
function Child(name,age){
Super.call(this,age)
this.name = name;
}
Child.prototype = Object.create(Super.prototype,{
constructor:{ //
value: Child
}
})
var child = new Child("min",23);
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child
이상은 JavaScript가 계승을 실현하는 몇 가지 방식에 대한 상세한 내용입니다. JavaScript가 계승을 실현하는 것에 관한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.