프론트엔드 개발이 꼭 알아야 할 JS 프로토타입과 상속_js 객체지향

1. 프로토타입 및 생성자

모든 JS 함수에는 프로토타입이라고도 불리는 프로토타입 객체를 참조하는 프로토타입 속성이 있습니다. 이 함수에는 생성자와 일반 함수가 포함됩니다. 생성자의 프로토타입에 대해 더 많이 이야기하고 있지만 일반 함수에도 프로토타입이 있다는 사실을 부인할 수 없습니다. 예를 들어, 일반 함수:

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

function F (){
Alert(F.prototype instanceof Object) //true;
}

　생성자, 즉 객체를 생성하는 것입니다. 먼저 생성자를 통해 객체를 인스턴스화하는 과정을 이해해보자.

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

함수 A(x){
this.x =x;
}
var obj=new A(1);

obj 객체를 인스턴스화하는 세 단계가 있습니다.

1. obj 객체 생성: obj=new Object();

　2. obj의 내부 __proto__를 이를 구성하는 함수 A의 프로토타입을 가리킵니다. obj.constructor===A.prototype.constructor(A.prototype이 더 이상 원본 A 프로토타입을 가리키지 않더라도 이는 항상 true입니다. 즉, 클래스 인스턴스 객체의 생성자 속성은 항상 "생성자"의 프로토타입.constructor), 따라서 obj.constructor.prototype이 A.prototype을 가리키도록 만듭니다(obj.constructor.prototype===A.prototype, 아래에서 볼 수 있듯이 A.prototype이 변경되면 이는 사실이 아닙니다. ). obj.constructor.prototype과 내부 _proto_는 객체를 인스턴스화할 때 사용됩니다. obj에는 프로토타입 속성이 없지만 __proto__를 사용하여 프로토타입 체인에서 프로토타입 속성을 얻을 수 있습니다. 및 프로토타입 메서드를 사용하면 FireFox에서 경고할 수 있는 __proto__를 노출합니다(obj.__proto__).

　3. 이를 사용하여 생성자 A를 호출하여 멤버(예: 개체 속성 및 개체 메서드)를 설정하고 초기화합니다. .

이 세 단계가 완료되면 obj 객체는 생성자 A와 더 이상 연결되지 않습니다. 이때 생성자 A가 멤버를 추가하더라도 인스턴스화된 obj 객체에는 더 이상 영향을 미치지 않습니다. 이때 obj 객체에는 x 속성과 생성자 A의 프로토타입 객체의 모든 멤버가 있습니다. 물론 이때 프로토타입 객체에는 멤버가 없습니다.

프로토타입 객체는 처음에는 비어 있습니다. 즉, 멤버가 없습니다(예: 프로토타입 속성 및 프로토타입 메서드). 다음 방법을 사용하여 프로토타입 객체에 포함된 멤버 수를 확인할 수 있습니다.

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

var num=0; (o in A.prototype) {
Alert(o);//alert는 프로토타입 속성 이름을 출력합니다.
num
}
alert("member: " num);//alert는 프로토타입의 모든 멤버 수입니다.

그러나 일단 프로토타입 속성이나 프로토타입 메서드가 정의되면 생성자를 통해 인스턴스화된 모든 객체는 내부적으로 수행되는 이러한 프로토타입 속성과 프로토타입 메서드를 상속합니다. _proto_ 체인이 구현됩니다.

예:

A.prototype.say=function(){alert("Hi")};

그러면 모든 A 객체에는 say 메소드가 있습니다. 프로토타입 객체의 say 메소드는 모든 객체가 say 메소드의 복사본을 갖고 있는 것이 아니라 모든 사람이 공유하는 유일한 복사본입니다.


2. 프로토타입 및 상속
먼저 간단한 상속 구현을 살펴보겠습니다.

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

함수 A(x){
this.x =x
}
함수 B(x,y){
　this.tmpObj=A;
　this.tmpObj(x)
　this.tmpObj; >　y=y;
}



5, 6, 7행: 생성자 A를 참조하는 임시 속성 tmpObj를 생성한 다음 이를 B 내에서 실행하고 실행 후 삭제합니다. this.x=x가 B(여기서는 B의 객체임) 내에서 실행되면 B는 물론 x 속성을 갖게 됩니다. 물론 B의 x 속성과 A의 x 속성은 독립적이므로 서로 다릅니다. 엄격하게 상속. 5행, 6행 및 7행은 call(apply) 메소드를 통해 더 간단하게 구현됩니다. A.call(this,x)

두 메소드 모두 이를 A 실행에 전달하며 this는 다음을 가리킵니다. B의 객체이므로 A(x)가 직접 사용되지 않습니다. 이 상속 방법은 클래스 상속입니다(js에는 클래스가 없으며 여기서는 생성자만 나타냅니다). A가 생성한 개체의 모든 속성 메서드를 상속하지만 A의 프로토타입 개체의 멤버는 상속할 수 없습니다. 이 목표를 달성하려면 이를 기반으로 프로토타입 상속을 추가해야 합니다.


다음 예시를 통해 프로토타입에 대한 깊은 이해와 프로토타입이 참여하는 완벽한 상속에 대해 알아볼 수 있습니다. (이 글의 핵심은 여기^_^)

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

함수 A( x){
　this.x = x;
}
A.prototype.a = "a"
함수 B(x,y){
　this .y = y;
A.call(this,x);
}
B.prototype.b1 = function(){
경고("b1")
B.prototype = new A();
B.prototype.b2 = function(){
　alert("b2")
}
B.prototype.constructor = B; >var obj = new B (1,3);


이 예는 B가 A를 상속하는 것에 관한 것입니다. 7행 클래스 상속: A.call(this.x); 위에서 언급한 바와 같습니다. 프로토타입 상속은 12행에서 구현됩니다. B.prototype = new A();

이는 B의 프로토타입이 A의 인스턴스 객체를 가리킨다는 의미입니다. 이 인스턴스 객체에는 정의되지 않은 x 속성이 있습니다. 값이 "a"인 속성이 있습니다. 따라서 B 프로토타입에도 이 두 가지 속성이 있습니다(즉, B와 A가 프로토타입 체인을 구축했으며 B는 A의 하위 항목입니다). 방금 클래스 상속으로 인해 B의 인스턴스 객체에도 x 속성이 있습니다. 이는 obj 객체에 동일한 이름을 가진 두 개의 x 속성이 있음을 의미합니다. 이때 프로토타입 속성 x는 인스턴스 객체에 양보해야 합니다. x 속성이므로 obj.x는 정의되지 않은 것이 아니라 1 입니다. 13행에서는 프로토타입 메서드 b2도 정의하므로 B 프로토타입에도 b2가 있습니다. 프로토타입 메서드 b1이 9~11행에 설정되어 있지만 12행을 실행한 후 B 프로토타입에는 더 이상 b1 메서드가 없습니다. 즉, obj.b1이 정의되지 않은 것을 알 수 있습니다. 12행에서 B 프로토타입 포인터가 변경되기 때문에 b1이 있는 원래 프로토타입 객체는 폐기되고 당연히 b1은 없습니다.

12행이 실행된 후 B 프로토타입(B.prototype)은 A의 인스턴스 객체를 가리키고 A의 인스턴스 객체 생성자는 생성자 A이므로 B.prototype.constructor는 생성자 객체입니다. A. (즉, A가 B의 프로토타입을 구성합니다.)

alert(B.prototype.constructor)는 "function A(x){...}"로 나옵니다. 마찬가지로 obj.constructor도 A 생성자 객체입니다. Alert(obj.constructor)가 나온 후에는 "function A(x){...}", 즉 B.prototype.constructor===입니다. obj.constructor(true) , 그러나 B.prototype===obj.constructor.prototype(false), 전자는 B의 프로토타입이고 x, a, b2 멤버를 갖고 후자는 A의 프로토타입이고 구성원이 있습니다. 이 문제를 해결하는 방법 16번 줄에서 B 프로토타입의 생성자를 B 생성자로 리디렉션한 다음 B.prototype===obj.constructor.prototype(true) 모두 x, a, b2 멤버를 갖습니다.

16행이 없으면 obj = new B(1,3)는 인스턴스화를 위해 A 생성자를 호출합니까? 대답은 '아니오'입니다. obj.y=3이므로 호출된 B 생성자에 의해 여전히 인스턴스화됩니다. obj.constructor===A(true)이지만 new B()의 동작에 대해 생성자를 통해 인스턴스 객체를 생성하기 위해 위에서 언급한 세 단계가 수행됩니다. 첫 번째 단계는 두 번째 단계입니다. 단계, obj.__proto__ === B.prototype, B.prototype에는 x, a, b2 멤버가 있으며, obj.constructor는 B.prototype.constructor, 즉 생성자 A를 가리킵니다. , 생성자 B라고 함 멤버를 설정하고 초기화하려면 x, y 속성을 갖습니다. 16줄을 추가하지 않아도 obj의 속성에는 영향을 미치지 않지만, 이전 단락에서 언급한 것처럼 obj.constructor 및 obj.constructor.prototype에는 영향을 미칩니다. 따라서 프로토타입 상속을 사용한 후에는 수정 작업을 수행해야 합니다.

12행과 16행에 대해 간단히 말하면, 12행은 B의 프로토타입이 A의 프로토타입 객체의 모든 멤버를 상속하도록 하지만 B의 인스턴스 객체 생성자의 프로토타입이 프로토타입을 가리키도록 만듭니다. 따라서 이 결함은 16행을 통해 수정되어야 합니다.

끝났습니다.