JavaScript를 상속하는 몇 가지 방법

3501 단어 JavaScript계승
비ES6 코드를 상속하는 주요 방식은 다음과 같습니다.
구조 계승, 원형 체인 계승, 구조 계승 + 원형 체인 계승 조합 계승, 그리고 조합 계승에서 파생된 계승 방식.

구조 계승 (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가 계승을 실현하는 것에 관한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!

좋은 웹페이지 즐겨찾기