JS 상속--프로토타입 체인 상속 및 클래스 상속

JS 상속--프로토타입 체인 상속 및 클래스 상속_기본 지식

WBOY

풀어 주다： 2016-05-16 17:37:49

원래의

1651명이 탐색했습니다.

상속이란 무엇입니까? 답변: 다른 사람이 무료로 제공하는 과정을 상속이라고 합니다.

상속을 사용하는 이유는 무엇인가요? 답변: 기성품을 선택하세요.

글쎄, 모두가 이미 사용 가능한 것을 선택하고 싶어하기 때문에 그것을 상속하는 방법을 배워야 합니다!

이해하기 전에 생성자, 객체, 프로토타입 체인...

등의 개념을 이해해야 합니다.

JS에서 일반적으로 사용되는 두 가지 상속 방법:

프로토타입 체인 상속(객체 간 상속) 클래스 상속(생성자 간 상속)

프로토타입 체인 상속:

코드 복사 코드는 다음과 같습니다.

//상속할 개체
var parent= {
name : "baba"
　 say : function(){
alert("나는 바바입니다");
}
}

//새 개체
var child = proInherit(부모);

//테스트
alert(child.name); //"바바"
child.say() //"나는 바바입니다"

proInherit(obj) 메서드를 사용하고 개체를 전달하여 개체의 속성과 메서드를 상속합니다. 이 메서드는 내장된 메서드가 아니므로 직접 정의해야 합니다.

코드 복사 코드는 다음과 같습니다.

function proInherit(obj){
function F () {}
F.prototype = obj ;
새 F() 반환;
}

여기서 F()는 임시 빈 생성자이고 F()의 프로토타입은 상위 개체로 설정되지만 동시에 _proto_ 링크의 이점을 활용하여 상위 개체의 모든 기능을 갖습니다.

체인 다이어그램:

클래스 상속:

코드 복사 코드는 다음과 같습니다.

//부모 클래스 생성자
함수 Parent( ) {
this.name = "baba";
}
//부모 클래스 프로토타입 메서드
Parent.prototype.getName = function() {
return this.name;
}

//하위 클래스 생성자
function Child() {
this.name = "cc";
}

//클래스 상속
classInherit(부모, 자식);

//인스턴스
var child = new Child();
alert(child.getName()) //“baba”

상속의 핵심 메소드를 살펴보겠습니다: classInherit(Parent,Child)

코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.

var classInherit = (function () {
var F = function () { }
return function (P, C) {
F.prototype = P. 프로토타입;
C.prototype = new F();
C.prototype.constructor = C;
}
}());

이 방법을 분석해 보세요.

먼저 빈 생성자 F()를 만들고 해당 인스턴스의 _proto_ 속성을 사용하여 상위 클래스와 하위 클래스의 프로토타입 체인을 빌드합니다. 이는 하위 클래스가 인스턴스화된 후 상위 클래스와 함께 속성이나 메서드를 수정하는 C.prototype = P.prototype을 방지하기 위한 프록시 역할을 합니다. 클로저에 인스턴트 함수와 F() 저장을 전반적으로 사용하면 다중 상속 중에 빈 생성자가 많이 생성되는 것을 방지하여 메모리 소비를 줄일 수 있습니다. 마지막 줄은 프로토타입 체인으로 인해 C의 인스턴스 객체 생성자가 P를 가리키므로 재설정된다는 의미입니다.

체인 다이어그램:

이 메소드는 인스턴스 중에 프로토타입 메소드를 상속하지만 상위 클래스의 속성은 상속할 수 없습니다. 다음은 클래스 상속을 보완하는

복사 상속

입니다.

상속 복사:

코드 복사 코드는 다음과 같습니다.

//상속 복사
function copyInherit(p, c) {
var i,
toStr = Object.prototype.toString,
astr = "[object Array]";
c = c || {};
for (i in p) {
if (p.hasOwnProperty(i)) {
if (typeof p[i] === "객체" ) {
c[i] = toStr.call(p[i]) == astr ? [] : {};
c[i] = copy(p[i], c[i]);
}
else {
c[i] = p[i];
}
}
}
return c;
}

//부모 다시 쓰기
function Parent() {
this.name = "pp";
this.obj= {a:1,b:2};
this.arr = [1, 2]
}
//인스턴스
var child = new Child();
var parent = new Parent();
copyInherit(부모, 자식);
Alert(child.name) //"baba"
alert(child.arr) //1,2
alert(child.obj.a) //1

copyInherit(p,c) 분석

변수에 값을 할당할 때 값 전달과 참조 전달의 두 가지 방법이 있습니다. 상위 객체의 속성에 배열 유형 또는 객체 유형이 포함된 경우 c[i] = toStr.call(p[ i] ) == astr ? [] : {}; 이 문장은 하위 개체의 속성을 수정할 때 상위 개체의 속성이 변경되는 것을 방지합니다.

요약:

클래스 상속은 모두가 이 생성자 메서드에 익숙하기 때문에 더 일반적이지만 메모리를 많이 차지합니다. 프로토타입 상속은 메모리를 덜 차지하지만 배열이나 객체 유형을 복제하는 것이 더 번거롭습니다. 복사 상속은 간단하고 널리 사용됩니다.